Question

我尝试从父窗口中抓取样式表，然后将样式应用到iframe中的页面。 iframed页面位于一个单独的域中（是的，这必须解决CORS问题）。

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

Answer 1

如果您同时控制父窗口和子窗口，则父窗口可以将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或父级中，这将是不可能的而不是两者。

将样式表从父窗口加载到iframe

1 个答案: