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

【问题标题】：.append of CSS doesn't affect iframe in IE/Edge.append 的 CSS 不会影响 IE/Edge 中的 iframe
【发布时间】：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 代码：
drury.edu/evening-and-online/majors-minors-even" target="" width="100%" height ="100%">

标签： jquery internet-explorer iframe microsoft-edge

【解决方案1】：

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

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

或非 jQuery 版本：

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

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

【讨论】：