.append 的 CSS 不会影响 IE/Edge 中的 iframe

Posted 2023-05-09

【中文标题】.append 的 CSS 不会影响 IE/Edge 中的 iframe

【英文标题】：.append of CSS doesn't affect iframe in IE/Edge

【发布时间】：2019-06-18 19:16:39

【问题描述】：

我有一个 iframe，我需要将 CSS 附加到其中。它适用于除 IE/Edge 之外的所有浏览器。我需要在这个 iframe 中隐藏标题，我正在使用 .append 来做到这一点。

我试过.append("<style type='text/css'> #header display: none;</style>'); 我也试过-ms-high-contrast 媒体查询。

$(document).ready(function()
    $('iframe').load( function() 
        $('iframe').contents().find("head")
            .append("<style type='text/css'> #header display: none 
 !important;</style>"); 
    );
);

我希望我的 id 为 #header 的 div 隐藏在 iframe 内的 IE/Edge 浏览器上。

【问题讨论】：

标头在您的 iframe 中是如何工作的？您能否分享详细的代码，例如 html 代码？这将使我们更容易重现问题并为您提供帮助。

这是我正在制作 iframe 的页面 (drury.edu/evening-and-online/majors-minors-even)。我正在尝试使用“标题”类隐藏 div。这是我的 iframe html 代码：

【参考方案1】：

直接修改#header div会简单很多，像这样：

$("iframe").contents().find("#header").css(display:"none");

或非 jQuery 版本：

document.querySelector('iframe').contentDocument.querySelector("#header").style.display="none";

请注意，如果您自己的页面不在 drury.edu，contents() 将不起作用。浏览器不会让您构筑别人的网站，然后再玩弄它。