从父窗口加载样式表到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

回答

相关问题