如何通过父窗口 CSS 类将 CSS 应用于内部 Iframe 元素？答案

【问题标题】：How to apply CSS to inner Iframe element through parent window CSS class?如何通过父窗口 CSS 类将 CSS 应用于内部 Iframe 元素？
【发布时间】：2018-10-14 18:36:25
【问题描述】：

我有一个父（主）页面，其中包含一些 iframe 部分。我想将 css 样式应用于内部 iframe 元素。

当我搜索它时，我发现很多帖子都与这个主题相关，但他们都建议使用 jquery/javascript 将 CSS 应用于内部元素。

是否可以通过父窗口（主页）CSS类将css样式应用于内部iframe元素？

（所有iframe的域与父域相同）

【问题讨论】：

除非您在 iframe 内的页面上有自己的样式表 - 如果您有此样式表，则可以通过 get 字符串上的变量传递该变量，您可以使用该变量将类添加到iframe，然后为每个类添加额外的样式
你可以试试seamless属性not very well supported。
re seamless，多年后：>“该属性已从 WHATWG 和 W3C HTML5 规范中删除。” caniuse

标签： html css iframe

【解决方案1】：

您不能通过父窗口 CSS 类直接将样式应用于内部 IFrame 元素，即使其域与父级相同。

As ,（所有 iframe 的域都与父级相同）..

您可以做的最好的事情是使用 javascript 或 jquery 将主样式表添加到 IFrame。

 $(document).ready(function(){
        $('#myIframe').load(function(){
            $('#myIframe')
                    .contents().find("body")
                    .html("test iframe");
            $('#myIframe')
                .contents().find("head")
                .append($('<link rel="stylesheet" type="text/css" href="style.css">')
            );
        });
    });

【讨论】：

谢谢你的回答，但我真的不想使用 JQuery。
@IshanJain 不幸的是它要么没有。
使用 jQuery 是更好的方法，因为您希望您的代码可以在所有浏览器上运行。 jQuery 基金会在为您处理浏览器之间的所有麻烦方面做得非常出色。我亲自见过他们中的许多人，他们一直在改进他们的代码解决方案，使其成为完全开源的。
@justdan23 这曾经是真的，但现在，它比任何东西都更方便。浏览器已经足够一致了，现在 DOM 是可行的。
如果您以模态方式打开 iframe 会怎样？（我正在使用github.com/noelboss/featherlight）jQuery 解决方案对我不起作用。

【解决方案2】：

如果您的所有 CSS 都在外部文件中，则类似这样的内容可能适用于您的 iframe。

<script>
window.onload = function() {
    Array.prototype.forEach.call(window.parent.document.querySelectorAll("link[rel=stylesheet]"), function(link) {
        var newLink = document.createElement("link");
        newLink.rel  = link.rel;
        newLink.href = link.href;
        document.head.appendChild(newLink);
    });
};
</script>

它基本上向父级询问所有样式表，然后使用相同的引用添加指向 iframe 的链接。如果 iframe 和父页面不在服务器上的同一位置，则必须适当地操作 href。

上面的代码也可能是only works on newer browsers。

【讨论】：