隐藏 iframe 中的元素

Question

我有一个 iframe（同一个域），我隐藏了一些我不想在这个 iframe 中显示的元素。一切正常，但是当我单击 ul > li 列表并选择此列表中的一项时，隐藏的元素会再次显示。

iframe 不会更改隐藏项目的 ID 或类似的东西，所以我不知道为什么隐藏的项目会再次显示。

我现在的解决方案是一个 setInterval，它可以隐藏项目，但它会在页面中处于非活动状态几分钟后折叠页面，所以我需要另一个解决方案。

我尝试过检测 iframe 内的点击功能，但是当我选择列表中的一个项目时，此功能不再起作用。

    $(function(){
        var f=$('#iframe')
        f.load(function(){ 
            f.contents().find("#____bl_k_dd").on('click', function(event) { 
                runAfterTimeout();
            });
        });
    });
    function runAfterTimeout() {
        setTimeout(function(){
            alert("hi its me");
            $('#iframe').contents().find('body').css("background", "green");
        },2000);
    };

我尝试检测元素上的点击功能，它第一次工作，然后它不工作。

如果我将元素的 ID 更改为 body 它有时会起作用，所以它不是解决方案。

Answer 1

您可以创建一个 css 文件并将其添加到您的 iframe 页面中

var $head = $("iframe").contents().find("head");                
$head.append($("<link/>", 
    { rel: "stylesheet", href: "file://path/to/style.css", type: "text/css" }));