如何将CSS应用于iframe？

11 浏览
0 Comments

如何将CSS应用于iframe？

\n\n我有一个简单的页面，其中包含一些iframe区域（用于显示RSS链接）。如何将主页面中的相同CSS格式应用于在iframe中显示的页面？

0

2 答案

0 Comments

我在使用Google日历时遇到了这个问题。我想在一个较暗的背景下进行样式设置并更改字体。\n幸运的是，嵌入代码中的URL没有直接访问的限制，因此可以使用PHP函数file_get_contents获取页面中的所有内容。可以调用位于您服务器上的php文件（例如google.php）而不是调用Google URL，该文件将包含经过修改的原始内容：\n\n

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

\n\n添加您的样式表的路径：\n\n

$content = str_replace('','', $content);

\n\n（这将使您的样式表出现在head结束标记之前。）\n\n指定相对调用css和js的原始url的基本url：\n\n

$content = str_replace('','', $content);

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

','', $content);
$content = str_replace('','', $content);
echo $content;

\n\n然后更改iframe嵌入代码为：\n\n

\n\n祝好运！

0
0 Comments

编辑：除非设置适当的CORS头信息，否则此方法在跨域的情况下无效。

这里有两个不同的东西：iframe块的样式和嵌入在iframe中的页面的样式。您可以像通常那样设置iframe块的样式：

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

或者可以通过父页面的Javascript加载：

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

0