Question

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

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

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

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

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。

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

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

2 个答案: