一尘不染

如何将CSS应用于iframe?

css

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


阅读 538

收藏
2020-05-19

共1个答案

一尘不染

编辑:除非设置了适当的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);
2020-05-19