如何将 CSS 应用于 iframe? [英] How to apply CSS to iframe?

问题描述

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

I have a simple page that has some iframe sections (to display RSS links). How can I apply the same CSS format from the main page to the page displayed in the iframe?

推荐答案

除非适当的 CORS 标头 已设置.

This does not work cross domain unless the appropriate CORS header is set.

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

There are two different things here: the style of the iframe block and the style of the page embedded in the iframe. You can set the style of the iframe block the usual way:

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

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

The style of the page embedded in the iframe must be either set by including it in the child page:

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

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

Or it can be loaded from the parent page with Javascript:

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

这篇关于如何将 CSS 应用于 iframe?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！