18

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

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

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

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

4

2 回答 2

16

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

如，（所有 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">')
            );
        });
    });
于 2013-11-08T14:05:41.763 回答
5

如果你所有的 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适当的操作。

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

于 2014-09-05T23:34:24.623 回答