如何将CSS应用到iframe？
我有一个简单的页面，有一些iframe部分（显示RSS链接）。 如何将主页面上的相同CSS格式应用到iframe中显示的页面？
编辑：这不工作跨域，除非设置适当的CORS头 。
这里有两个不同的东西：iframe块的样式和embedded在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> embedded在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['frame1'].document.body.appendChild(cssLink);
我在Google日历上遇到了这个问题。 我想在黑暗的背景上devise风格并更改字体。
幸运的是，embedded代码的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');
将path添加到您的样式表中：
$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;
然后，您将iframeembedded代码更改为：
<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);
请注意，根据您使用的浏览器，这可能只适用于从同一个域提供的页面。
var $head = $("#eFormIFrame").contents().find("head"); $head.append($("<link/>", { rel: "stylesheet", href: url, type: "text/css" }));
iframe被大多数浏览器普遍处理为不同的HTML页面。 如果您想将相同的样式表应用于iframe的内容，只需从其中使用的页面引用它。
如果你控制iframe中的页面，就像hangy说的那样，最简单的方法是创build一个共同样式的共享CSS文件，然后从你的html页面链接到它。
否则，您不太可能能够从iframe中的外部页面dynamic更改页面的样式。 这是因为浏览器由于可能被误用于欺骗和其他黑客行为而加强了跨架构脚本的安全性。
本教程可能会为您提供有关脚本iframe的更多信息。 关于跨框架脚本从IE的angular度解释安全限制。
这里是如何直接应用CSS代码，而不使用<link>加载额外的样式表。
var head = jQuery("#iframe").contents().find("head"); var css = '<style type="text/css">' + '#banner{display:none}; ' + '</style>'; jQuery(head).append(css);
这隐藏了iframe页面中的横幅。 谢谢你的build议！
上面有一点改动的作品：
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);
至less可以和ff3和ie8一起工作
如果你想从主页面重用CSS和JavaScript，你可能应该考虑用一个Ajax加载的内容replace<IFRAME> 。 search机器人能够执行JavaScript时，这是更友好的search引擎优化。
这是jQuery的例子，包括另一个html页面到你的文档。 这比iframe更友好。 为了确保漫游器不索引包含的页面，只需将其添加到不允许的robots.txt
<html> <header> <script src="/js/jquery.js" type="text/javascript"></script> </header> <body> <div id='include-from-outside'></div> <script type='text/javascript'> $('#include-from-outside').load('http://example.com/included.html'); </script> </body> </html>
您还可以直接从Google包含jQuery： http ： //code.google.com/apis/ajaxlibs/documentation/ – 这意味着可select自动包含较新的版本，并显着提高速度。 此外，意味着你必须相信他们只提供你的jQuery;）
以下为我工作。
var iframe = top.frames[name].document; var css = '' + '<style type="text/css">' + 'body{margin:0;padding:0;background:transparent}' + '</style>'; iframe.open(); iframe.write(css); iframe.close();
我的简洁版本 ：
<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在加载的窗口上没有准备好，所以需要使用定时器 。
随时可用的代码 （带定时器）：
<script type="text/javascript"> var frameListener; $(window).load(function () { frameListener = setInterval("frameLoaded()", 50); }); function frameLoaded() { var frame = $('iframe').get(0); if (frame != null) { var frmHead = $(frame).contents().find('head'); if (frmHead != null) { clearInterval(frameListener); // stop the listener 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>
…和jQuery链接：
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
扩展上述jQuery解决scheme，以应付加载帧内容的任何延迟。
$('iframe').each(function(){ function injectCSS(){ $iframe.contents().find('head').append( $('<link/>', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' }) ); } var $iframe = $(this); $iframe.on('load', injectCSS); injectCSS(); });
您将无法以这种方式设置iframe的内容。 我的build议是使用服务器端脚本（PHP，ASP或Perl脚本）或find一个在线服务，将一个饲料转换为JavaScript代码。 唯一的办法就是如果你可以做一个服务器端的包含。
当你说“doc.open（）”，这意味着你可以写任何HTML标签内的iframe，所以你应该写的HTML页面的所有基本标签，如果你想有一个CSS链接在你的iframe头只是写一个带有CSS链接的iframe。 我举个例子：
doc.open(); doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-quiv="Content-Type" content="text/html; charset=utf-8"/><title>Print Frame</title><link rel="stylesheet" type="text/css" href="/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>'); doc.close();
我们可以将样式标签插入到iframe中。 发布也在这里…
<style type="text/css" id="cssID"> .className { background-color: red; } </style> <iframe id="iFrameID"></iframe> <script type="text/javascript"> $(function () { $("#iFrameID").contents().find("head")[0].appendChild(cssID); //Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]); }); </script>
我发现了另一种解决scheme，把样式放在主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>
这可能不是最好的解决scheme，当然可以改进，但如果你想在父窗口中保留一个“样式”标签，这是另一种select
其他答案似乎使用jQuery和CSS链接。
此代码使用香草JavaScript。 它创build一个新的<style>元素。 它将该元素的文本内容设置为包含新CSS的string。 并将该元素直接添加到iframe文档的头部。
var iframe = document.getElementById('the-iframe'); var style = document.createElement('style'); style.textContent = '.some-class-name {' + ' some-style-name: some-value;' + '}' ; iframe.contentDocument.head.appendChild(style);
我认为最简单的方法就是在iframe的相同位置添加另一个div
使它的z-index大于iframe容器，所以你可以简单地devise你自己的div。 如果你需要点击它，只需在你自己的div上使用pointer-events:none ，这样iframe就可以工作，以防你需要点击它;）
我希望它会帮助别人;）
如果您有权访问iframe页面，并希望在您的页面上通过iframe加载不同的CSS时应用此function，请在此处find这些types的解决scheme
这工作，即使iframe加载不同的域名
检查一下postMessage()
计划是，把CSS发送到iframe作为一个消息
iframenode.postMessage('h2{color:red;}','*');
*是发送此消息，而不pipe它在iframe中的域是什么
并在iframe中接收消息，并将接收到的消息（CSS）添加到该文档头。
代码添加到iframe页面
window.addEventListener('message',function(e){ if(e.data == 'send_user_details') document.head.appendChild('<style>'+e.data+'</style>'); });
有一个美妙的脚本 ，用自身的iframe版本replace节点。 CodePen 演示
用法示例：
// Single node var component = document.querySelector('.component'); var iframe = iframify(component); // Collection of nodes var components = document.querySelectorAll('.component'); var iframes = Array.prototype.map.call(components, function (component) { return iframify(component, {}); }); // With options var component = document.querySelector('.component'); var iframe = iframify(component, { headExtra: '<style>.component { color: red; }</style>', metaViewport: '<meta name="viewport" content="width=device-width">' });
最好的方法可能是以下（如果你控制目标网站）：
1）用style参数设置iframe链接，如：
http://your_site.com/target.php?style=a%7Bcolor%3Ared%7D
（最后一个短语是由urlencode函数编码a{color:red} 。
2）设置接收者页面target.php像这样：
<head> .......... <style><? echo urldecode($_GET['style']);?> </style> ..........
var link1 = document.createElement('link'); link1.type = 'text/css'; link1.rel = 'stylesheet'; link1.href = "../../assets/css/normalize.css"; window.frames['richTextField'].document.body.appendChild(link1);
这里，域内有两件事
- iFrame部分
- 加载到iFrame中的页面
所以你想要这两个款式的风格如下，
1. iFrame部分的样式
它可以使用与尊重的id或class名称的CSS样式。 您也可以在您的父级样式表中设置样式。
<style> #my_iFrame{ height: 300px; width: 100%; position:absolute; top:0; left:0; border: 1px black solid; } </style> <iframe name='iframe1' id="my_iFrame" src="#" cellspacing="0"></iframe>
2.在iFrame中放置页面样式
这个样式可以在Javascript的帮助下从父页面加载
var cssFile = document.createElement("link") cssLink.rel = "stylesheet"; cssLink.type = "text/css"; cssLink.href = "iFramePage.css";
然后将该CSS文件设置为尊重的iFrame部分
//to Load in the Body Part frames['my_iFrame'].document.body.appendChild(cssFile); //to Load in the Head Part frames['my_iFrame'].document.head.appendChild(cssFile);
在这里，您可以使用这种方式编辑iFrame内页面的头部分
var $iFrameHead = $("#my_iFrame").contents().find("head"); $iFrameHead .append( $("<link/>",{ rel: "stylesheet", href: urlPath , type: "text/css" } ));
使用可以试试这个：
$('iframe').load( function() { $('iframe').contents().find("head") .append($("<style type='text/css'> .my-class{display:none;} </style>")); });
那么，我已经按照这些步骤：
- Div与持有
iframe的类 - 将
iframe添加到div。 - 在CSS文件中，
divClass { width: 500px; height: 500px; } divClass iframe { width: 100%; height: 100%; }
这在IE 6中工作。应该在其他浏览器中工作，请检查！
