如何将CSS应用于iframe？
我有一个简单的页面，有一些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);
我在Google日历上遇到了这个问题。 我想在较暗的背景上设计它，并更改字体。
幸运的是，嵌入代码的URL对直接访问没有限制，所以通过使用PHP函数file_get_contents ，可以从页面获取整个内容。 可以调用位于服务器上的一个php文件，而不是调用Google URL，例如。 google.php ，它将包含修改后的原始内容：
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
将路径添加到您的样式表中：
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
（这会将您的样式表放在head标签前面）。
在相对调用css和js的情况下，指定原始url的基础url：
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
最终的google.php文件应该如下所示：
<?php
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
$content = str_replace('</title>','</title><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嵌入代码更改为：
<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
祝你好运！
如果iframe的内容不完全在您的控制之下，或者您想从不同风格的不同页面访问内容，则可以尝试使用JavaScript处理它。
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);
请注意，根据您使用的浏览器，这可能只适用于从同一个域提供的页面。
链接地址: http://www.djcxy.com/p/88167.html