iframe跨域获取CSS

Question

我有一个HTML页面与CSS，我需要的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覆盖矿山？

Answer 1

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

Answer 2

添加目标站点上此HTTP标头：

Access-Control-Allow-Origin: * 

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

Answer 3

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

在父框架
• ，加载的iframe前添加一个消息监听器f。
• 在iframe，建立一个消息监听器g和之后的onload
• f发送CSS网址作为JSON序列化消息将消息发送到f，和g加载到CSS的IFRAME