iframe跨域获取CSS答案

【问题标题】：iframe cross domain get CSSiframe跨域获取CSS
【发布时间】：2012-02-16 01:26:14
【问题描述】：

我有一个带有 css 的 html 页面，我需要 css 来控制该页面上 iframe 的内容。我可以控制 iframe 中的页面，如果页面和框架都是本地的，则以下代码可以工作：

<script type="text/javascript">
window.onload = function() {
    if (parent) {
        var oHead = document.getElementsByTagName("head")[0];
        var arrStyleSheets = parent.document.getElementsByTagName("style");
        for (var i = 0; i < arrStyleSheets.length; i++)
        oHead.appendChild(arrStyleSheets[i].cloneNode(true));
    }
}
</script>

但是，如果包含 iframe 的页面和 iframe 所在的页面位于不同的域中，则不起作用。有谁知道如何让它跨两个域工作，或者有替代解决方案？

提前致谢:)

因为我的页面显示在 iframe 中，我不能只允许用户让他们的 css 覆盖我的吗？？

【问题讨论】：

标签： javascript css iframe cross-domain xss

【解决方案1】：

您在框架中加载的站点必须grant you permission using CORS 才能指示访问者的浏览器使用JS 在它与您的站点之间交换信息。默认this is forbidden for sensible security reasons。

【讨论】：

【解决方案2】：

在目标站点上添加这个 HTTP Header：

Access-Control-Allow-Origin: *

见http://ox86.tumblr.com/post/17652823257/cross-domain-ajax-for-your-api-endpoints

【讨论】：

【解决方案3】：

您必须使用Cross-document messaging。基本上，算法应该是这样的：

在父框架中，在加载iframe之前添加消息监听f。
在iframe中，设置消息监听g，onload后向f发送消息
f 将 CSS url 作为 JSON 序列化消息发送，g 将 CSS 加载到 iframe 中

【讨论】：