我有一个简单的页面,有一些iframe部分(显示RSS链接)。如何将相同的CSS格式从主页应用到iframe中显示的页面?


当前回答

编辑:除非设置了适当的CORS报头,否则不能跨域工作。

这里有两个不同的东西:iframe块的样式和嵌入在iframe中的页面的样式。你可以用通常的方法设置iframe块的样式:

<iframe name="iframe1" id="iframe1" src="empty.htm" 
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 100%; height: 120px;"></iframe>

iframe中嵌入的页面样式必须通过在子页面中包含它来设置:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

或者它可以从父页面加载Javascript:

var cssLink = document.createElement("link");
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['iframe1'].document.head.appendChild(cssLink);

其他回答

你不能这样样式iframe的内容。我的建议是使用服务器端脚本(PHP、ASP或Perl脚本),或者找到可以将提要转换为JavaScript代码的在线服务。唯一的另一种方法是如果你能做一个服务器端包含。

var $head = $("#eFormIFrame").contents().find("head");

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));

var link1 = document.createElement('link'); link1。type = 'text/css'; link1。rel =“样式表”; link1。href = "../../assets/css/normalize.css"; 窗口框架[' richTextField ']文件。身体。appendChild (link1);

以上方法稍加改变即可奏效:

var cssLink = document.createElement("link") 
cssLink.href = "pFstylesEditor.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 

//Instead of this
//frames['frame1'].document.body.appendChild(cssLink);
//Do this

var doc=document.getElementById("edit").contentWindow.document;

//If you are doing any dynamic writing do that first
doc.open();
doc.write(myData);
doc.close();

//Then append child
doc.body.appendChild(cssLink);

工作良好的ff3和ie8至少

扩展上面的jQuery解决方案来处理加载帧内容的延迟。

$('iframe').each(function(){
    function injectCSS(){
        $iframe.contents().find('head').append(
            $('<link/>', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' })
        );
    }

    var $iframe = $(this);
    $iframe.on('load', injectCSS);
    injectCSS();
});