我有一个简单的页面,其中包含一些iframe部分(以显示RSS链接)。如何将相同的CSS格式从首页应用到iframe中显示的页面?
我有一个简单的页面,其中包含一些iframe部分(以显示RSS链接)。如何将相同的CSS格式从首页应用到iframe中显示的页面?
Answers:
编辑:除非设置了适当的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);
document.getElementById("myframe").contentDocument
。嵌入css似乎仍然不适合我。
...document.head.appendChild(cssLink)
-Firefox和Safari。
我在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
end标记之前的最后。)
在相对调用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);
请注意,取决于您使用的浏览器,此方法可能仅适用于同一域提供的页面。
<iframe onload="this.contentDocument.body.style.overflow='hidden';" />
var $head = $("#eFormIFrame").contents().find("head");
$head.append($("<link/>", {
rel: "stylesheet",
href: url,
type: "text/css"
}));
这是直接应用CSS代码而不使用<link>
加载额外样式表的方法。
var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
'#banner{display:none}; ' +
'</style>';
jQuery(head).append(css);
这会将横幅广告隐藏在iframe页面中。谢谢您的建议!
iframe
?
#iframe
用#<id>
,甚至iframe
选择所有iframe
小号
上面有一些更改的作品:
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兼容
dynamic data
如果要从主页重用CSS和JavaScript,则应考虑替换<IFRAME>
为Ajax加载的内容。当搜索机器人能够执行JavaScript时,这对SEO更加友好了。
这是jQuery示例,其中在文档中包含另一个html页面。这比SEO友好得多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/-这意味着可以选择自动包含较新的版本,并且可以显着提高速度。同样,这意味着您必须信任他们才能为您提供jQuery;)
扩展上述jQuery解决方案以应对加载框架内容中的任何延迟。
$('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();
});
我的精简版:
<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("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="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
这里的其他答案似乎使用jQuery和CSS链接。
此代码使用原始JavaScript。它创建一个新<style>
元素。它将该元素的文本内容设置为包含新CSS的字符串。并将该元素直接附加到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);
当您说“ doc.open()”时,它意味着您可以在iframe中编写任何HTML标签,因此您应该为HTML页面编写所有基本标签,如果要在iframe头中包含CSS链接,只需编写一个内嵌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="https://stackoverflow.com/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');
doc.close();
如果您有权访问iframe页面,并且仅当通过iframe在页面上加载页面时希望在其上应用其他CSS,那么我在这里找到了针对此类情况的解决方案
即使iframe加载了其他域,此方法也有效
检查一下 postMessage()
计划是,将CSS作为消息发送到iframe,例如
iframenode.postMessage('h2{color:red;}','*');
*
是要发送此消息,而不管它在iframe中处于哪个域
并在iframe中接收消息,然后将接收到的消息(CSS)添加到该文档头。
在iframe页面中添加的代码
window.addEventListener('message',function(e){
if(e.data == 'send_user_details')
document.head.appendChild('<style>'+e.data+'</style>');
});
由于针对相同的域编写了许多答案,因此我将编写如何在跨域中执行此操作。
首先,您需要了解Post Message API。我们需要使者在两个窗口之间进行通信。
这是我创建的Messenger。
/**
* Creates a messenger between two windows
* which have two different domains
*/
class CrossMessenger {
/**
*
* @param {object} otherWindow - window object of the other
* @param {string} targetDomain - domain of the other window
* @param {object} eventHandlers - all the event names and handlers
*/
constructor(otherWindow, targetDomain, eventHandlers = {}) {
this.otherWindow = otherWindow;
this.targetDomain = targetDomain;
this.eventHandlers = eventHandlers;
window.addEventListener("message", (e) => this.receive.call(this, e));
}
post(event, data) {
try {
// data obj should have event name
var json = JSON.stringify({
event,
data
});
this.otherWindow.postMessage(json, this.targetDomain);
} catch (e) {}
}
receive(e) {
var json;
try {
json = JSON.parse(e.data ? e.data : "{}");
} catch (e) {
return;
}
var eventName = json.event,
data = json.data;
if (e.origin !== this.targetDomain)
return;
if (typeof this.eventHandlers[eventName] === "function")
this.eventHandlers[eventName](data);
}
}
在两个窗口中使用它进行通信可以解决您的问题。
在主窗口中
var msger = new CrossMessenger(iframe.contentWindow, "https://iframe.s.domain");
var cssContent = Array.prototype.map.call(yourCSSElement.sheet.cssRules, css_text).join('\n');
msger.post("cssContent", {
css: cssContent
})
然后,从iframe接收事件。
在iframe中:
var msger = new CrossMessenger(window.parent, "https://parent.window.domain", {
cssContent: (data) => {
var cssElem = document.createElement("style");
cssElem.innerHTML = data.css;
document.head.appendChild(cssElem);
}
})
有关更多详细信息,请参见完整的 Javascript和Iframes教程。
我找到了另一种解决方案,将样式放在这样的主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>
它可能不是最好的解决方案,但肯定可以改进,但是如果您想在父窗口中保留“样式”标签,则这是另一种选择。
在这里,域内有两件事
因此,您希望按照以下方式设置这两部分的样式,
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")
cssFile.rel = "stylesheet";
cssFile.type = "text/css";
cssFile.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。也张贴在这里...
<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>
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);
richTextField
什么?
我认为最简单的方法是在与iframe相同的位置添加另一个div,然后
使其z-index
比iframe容器大,因此您可以轻松设置自己的div样式。如果您需要单击它,只需pointer-events:none
在自己的div上使用,这样iframe就可以工作,以防您需要单击它;)
我希望它会帮助某人;)
有一个很棒的脚本,可以用自身的iframe版本替换节点。 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?color=red
(最后一个词组a{color:red}
按urlencode
功能编码。
2)target.php
像这样设置接收者页面:
<head>
..........
$col = FILTER_VAR(SANITIZE_STRING, $_GET['color']);
<style>.xyz{color: <?php echo (in_array( $col, ['red','yellow','green'])? $col : "black") ;?> } </style>
..........