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