如何将 CSS 应用于 iframe？

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

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

请注意，根据您使用的浏览器，这可能仅适用于来自同一域的网页。

协慌网

如何将 CSS 应用于 iframe？

答案