使用 jQuery 设置 iFrame 样式

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，请尝试使用“加载”方法而不是“就绪”方法。另外，使用 'contents()' 而不是 'contentDocument' 来获取 iframe 的内容。

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