html - 如何将 CSS 应用于 iframe？

Question

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

Answer 1

编辑:除非适当的CORS header，否则跨域不起作用。已设置。

这里有两个不同的东西:iframe block 的样式和嵌入 iframe 的页面的样式。您可以按照通常的方式设置 iframe block 的样式:

<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);