关于html：如何将CSS应用于iframe？


How to apply CSS to iframe?

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

相关讨论

编辑：除非设置了适当的CORS头，否则这不会跨域工作。

这里有两种不同的东西：iframe块的样式和iframe中嵌入的页面的样式。可以按常规方式设置iframe块的样式：

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

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

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

或者可以使用javascript从父页面加载：

1
2
3
4
5
var cssLink = document.createElement("link");
cssLink.href="style.css";
cssLink.rel ="stylesheet";
cssLink.type ="text/css";
frames['iframe1'].document.head.appendChild(cssLink);
相关讨论

我在谷歌日历上遇到了这个问题。我想在较暗的背景上设置它的样式并更改字体。

幸运的是，嵌入代码中的URL对直接访问没有限制，因此通过使用php函数file_get_contents可以获得页面中的整个内容。不调用Google URL，而是可以调用位于服务器上的php文件，例如google.php，该文件将包含经过修改的原始内容：

1
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');

将路径添加到样式表中：

1
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);

(这将使样式表最后放置在head结束标记之前。)

如果CSS和JS被相对调用，请指定原始URL的基URL形式：

1
$content = str_replace('','<base href="https://www.google.com/calendar/" />', $content);

最终的google.php文件应该如下所示：

1
2
3
4
5
<?php
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
$content = str_replace('','<base href="https://www.google.com/calendar/" />', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
echo $content;

然后将iframe嵌入代码更改为：

1
<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

祝你好运！

相关讨论

如果iframe的内容不完全在您的控制之下，或者您想要从不同风格的不同页面访问内容，您可以尝试使用javascript来操作它。

1
2
3
4
5
6
7
var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel","stylesheet");
link.setAttribute("type","text/css");
link.setAttribute("href","style.css");
otherhead.appendChild(link);

请注意，根据您使用的浏览器，这可能只适用于从同一域提供服务的页面。

相关讨论