從父窗口加載樣式表到iframe

我試圖從父窗口中獲取樣式表，並將樣式應用於iframe中的頁面。 iframed頁面在一個單獨的域（是的，這必須圍繞CORS）。從父窗口加載樣式表到iframe

的jQuery坐在父頁面上

$(document).ready(function(){ 
    $('.iframe-div').load(function(){ 
     $('#iframe-div') 
      .contents().find("head") 
      .append($('<link rel="stylesheet" type="text/css" href="style.css">') 
     ); 
    }); 
});

的iframe：

<iframe src="player.html" class="iframe-div" width="800" height="400"></iframe>

Player.html應該應用到頁眉附加樣式表。

舉個例子，這裏有一個fiddle

來源

2015-02-10 Matt

在您的jsFiddle中沒有ID爲「iframe-div」的元素，並且如果窗口已經加載，iframe onload事件不會被觸發。順便說一句，域名必須匹配。這裏是你的固定jsFiddle：http://jsfiddle.net/orfd5jcq/2/ – 2015-02-10 19:09:20

如果您可以控制父和子窗口，家長可以通過CSS文件的URL無論是作爲一個ULR參數的iframe，或者你可能使用window.postMessage將其從父母發送給孩子。

然後你可以用下面的代碼添加CSS

var fileref=document.createElement("link") 
fileref.setAttribute("rel", "stylesheet") 
fileref.setAttribute("type", "text/css") 
fileref.setAttribute("href", filename) 
document.getElementsByTagName("head")[0].appendChild(fileref)

（從http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml借用）

我不相信的iframe可以跨域父窗口訪問任何東西，也不能父母會影響iframe，所以我相信如果你只能將代碼放在iframe或父母中，而不是兩者，這是不可能的。

來源

2015-02-10 19:11:58 tomf

從父窗口加載樣式表到iframe

回答

相關問題