我有一个简单的页面，其中包含一些iframe部分（以显示RSS链接）。如何将相同的CSS格式从首页应用到iframe中显示的页面？

评论

这是可能的，但前提是iframe的域与父域相同
gawpertron，只是为了澄清一下，您是说如果我使用我无法控制的其他领域的iFrame内容，那么我无法控制该内容的CSS吗？
您能否列出该页面的链接，以便我们仅能够查看我们的更改。
域，端口和协议必须相同，也不能与子域一起使用。

#1 楼

编辑：除非设置了适当的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);


评论

请注意，在我看来，以前发布的某些示例现在对html5无效。您可以按以下方式访问框架的内容：document.getElementById（“ myframe”）。contentDocument。嵌入CSS似乎仍然对我不起作用。

–雷诺·林德克（Rehno Lindeque）
2011-2-2在19:54


链接只能出现在HEAD中

– Knu
2011年5月23日19:05


仅在完成... document.head.appendChild（cssLink）-Firefox和Safari时为我工作。

– mojuba
2011-09-26 12:47
这实际上可以跨域工作吗？我认为不会。

–西蒙东
2011年11月4日，0：52
只是没有其他人必须对其进行测试才能发现：正确，它不能跨域工作。在执行frame ['name']后，您立即获得“不安全的JavaScript尝试从具有URL blah的框架访问具有URL blah的框架。域，协议和端口必须匹配。”

–凯文
2011-11-27 17:37

#2 楼

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

幸运的是，嵌入代码中的URL没有直接访问限制，因此通过使用PHP函数file_get_contents，可以获取
页面上的所有内容。除了调用Google URL，还可以调用服务器上的php文件，例如。 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结束标记之前。 ）

以原始URL形式指定基本URL，以防css和js被相对调用：

 $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>


祝你好运！ br />

评论

如果需要，可以根据定义将其称为骇客入侵。但是您没有提供任何更好的解决方案...该解决方案不是损害Google服务或欺骗人们以利用他们的弱点的方法。

– SequenceDigitale.com
2014年8月12日下午16:58
我会想办法使此解决方案与Google文档一起使用。它会引发各种JavaScript错误。 “未捕获的TypeError：无法读取未定义的属性'a'”

– deweydb
2014年8月19日23:52
没关系，我知道了，在这里发布了解决方案：stackoverflow.com/questions/25395279/…

– deweydb
2014年8月20日，1：12
@ChrisHoughton仅供参考，基本上不是。但是，这可能会使整个iframe变得毫无意义（例如，使用iframe的一个原因是出于安全目的，例如使用卡付款，如果您按照此处的建议进行操作，很可能会导致自己出现问题）。

–阿拉斯泰
2015年2月5日在16:31
这样，您始终可以将日历作为未登录用户使用。使用普通的html iframe，如果用户登录google，则他们会看到他们自己的个人日历，但是由于您的PHP代码无法得知用户的Google会话ID，因此无法获取他们的个人日历。

–bdsl
17年1月10日在15:10

#3 楼

如果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);


请注意，取决于您使用的浏览器，此方法可能仅适用于来自同一域的页面。

评论

可能值得注意的是，如果页面位于不同的域上，则相同的原始策略将停止此工作。

– ConroyP
08年10月20日9:00
以同样的思路，但更简洁：