Question

我在这里读过十几个类似的问题并尝试了我能想到的一切，但我显然做错了，因为我无法让它发挥作用。

HTML ：

<iframe name="posts" id="posts" src="edit.php">

JS ：

$(document).ready(function() {
    $('iframe#posts').ready(function() {
        var frame = $('iframe#posts').contentDocument;
        console.log($('#adminmenu', frame));
        $('#adminmenu', frame).css('display', 'none !important');
    });
});

控制台正在输出：

[<ul id="adminmenu" style="display: none !important; ">…</ul>]

这是正确的元素。但是，display:none永远不会在浏览器中应用。此外，我发现控制台正在使用内联样式输出很奇怪，即使它是在console.log()语句之后设置的（不确定它是否相关，但看起来不应该如此）。

有谁知道为什么这不起作用？

我还应该补充一点，主文档正文中也有一个<ul id="adminmenu">，但我想通过提供iframe上下文来确定iframe的目标。

Answer 1

您是否尝试过使用jQuery的contents()函数代替contentDocument？

$("iframe#posts").contents().find("#adminmenu").hide();

已更新：已将.css("display", "none !important")更改为.hide()。

Answer 2

对于iframe，请尝试使用'load'方法而不是'ready'。另外，使用'contents（）'代替'contentDocument'来获取iframe的内容。

$(document).ready(function() {
    $('iframe#posts').load(function() {
        var frame = $('iframe#posts').contents();
        /* other code */
    });
});

使用jQuery来设置样式iFrame

2 个答案: