我有一个简单的页面,有一些iframe部分(显示RSS链接)。如何将相同的CSS格式从主页应用到iframe中显示的页面?
当前回答
我遇到了谷歌日历这个问题。我想用更暗的背景和改变字体。
幸运的是,来自嵌入代码的URL对直接访问没有限制,因此通过使用PHP函数file_get_contents可以获得 来自页面的全部内容。而不是调用谷歌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);
(这将把样式表放在头结束标记之前的最后。)
在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>
好运!
其他回答
var link1 = document.createElement('link'); link1。type = 'text/css'; link1。rel =“样式表”; link1。href = "../../assets/css/normalize.css"; 窗口框架[' richTextField ']文件。身体。appendChild (link1);
以上方法稍加改变即可奏效:
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至少
我是这么做的:
Div与类保存iframe 将iframe添加到div中。 在CSS文件中
divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }
这在IE 6中有效。应该可以在其他浏览器上运行,请检查!
我遇到了谷歌日历这个问题。我想用更暗的背景和改变字体。
幸运的是,来自嵌入代码的URL对直接访问没有限制,因此通过使用PHP函数file_get_contents可以获得 来自页面的全部内容。而不是调用谷歌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);
(这将把样式表放在头结束标记之前的最后。)
在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>
好运!
我找到了另一个解决方案,把样式放在主html像这样
<style id="iframestyle">
html {
color: white;
background: black;
}
</style>
<style>
html {
color: initial;
background: initial;
}
iframe {
border: none;
}
</style>
然后在iframe中这样做(参见js的onload)
<iframe onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>
在js中
<script>
ifstyle = document.getElementById('iframestyle')
iframe = top.frames["log"];
</script>
这可能不是最好的解决方案,当然也可以改进,但如果您想在父窗口中保留“style”标签,这是另一种选择