使用 jQuery 设置 iFrame 样式

Posted 2023-03-06

【中文标题】使用 jQuery 设置 iFrame 样式

【英文标题】：Using jQuery to Style iFrame

【发布时间】：2011-05-25 20:52:21

【问题描述】：

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

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 为目标。

【问题讨论】：

我认为您不应该在 css 属性中使用 !important

也许这是一个时间问题？也许内部 iframe 尚未加载？您可以通过添加 alert() 来尝试

是的，我试过不带 !important 但它也不起作用，所以我想我会暴力破解它。

回复。时机 - 这就是为什么我将它包装在 $('iframe#posts').ready() 中。也许这不符合我的想法？

【参考方案1】：

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

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

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

【讨论】：

我可以发誓我试过了，但它不起作用......但现在它是 :) 谢谢！

【参考方案2】：

对于 iframe，请尝试使用“加载”方法而不是“就绪”方法。另外，使用 'contents()' 而不是 'contentDocument' 来获取 iframe 的内容。

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

【讨论】：

当事情看起来很暗淡时，我开始走这条路，但我遇到了另一个问题。 “iframe”中的链接现在加载完整的浏览器，但我希望它们也保持“框架”。对此有何建议？我什至开始劫持链接以使它们在“框架”中打开，但是对于点击事件和其他未知数，这似乎几乎是不可能的。