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

Question

我有一个父(主)页面有一些iframe部分.我想将css样式应用于内部iframe元素.

When I googling for it, I found many post relate to this topic but they all suggest to use jquery/javascript to apply CSS to inner elements.

Is it possible to apply css style to inner iframe element through parent window(main page) CSS class?

(All the iframe's domain is the same as the parent)

Answer 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">')
            );
        });
    });

Answer 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适当的操作。

另外，上面的代码可能只适用于较新的浏览器。