如何将CSS应用于iframe？

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

---

#1楼

上面有一些更改的作品：

var cssLink = document.createElement("link") 
cssLink.href = "pFstylesEditor.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 

//Instead of this
//frames['frame1'].document.body.appendChild(cssLink);
//Do this

var doc=document.getElementById("edit").contentWindow.document;

//If you are doing any dynamic writing do that first
doc.open();
doc.write(myData);
doc.close();

//Then append child
doc.body.appendChild(cssLink);

至少与ff3和ie8兼容

---

#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标记之前的最后。）

在相对调用js和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>

祝好运！

---

#3楼

var $head = $("#eFormIFrame").contents().find("head");

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));

---

#4楼

我的精简版 ：

<script type="text/javascript">
$(window).load(function () {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }   
});
</script>

但是，有时iframe在窗口加载时尚未准备好，因此需要使用timer 。

即用型代码 （带计时器）：

<script type="text/javascript">
var frameListener;
$(window).load(function () {
    frameListener = setInterval("frameLoad