![iframe引用父页面样式](https://img-blog.csdnimg.cn/img_convert/5e01431fa41d57c45fb83ca95452d241.png)
iframe引用父页面样式
Here's a JavaScript that let's you style an iframe just like its top parent. The script is basically just a proof of concept I did after talking to a friend about similar problem he has had in the past, so feel free to modify and use if you like it.
这是一个JavaScript,可让您像对其上级父级一样对iframe进行样式设置。 脚本基本上只是概念证明,是我在与朋友谈论他过去遇到过的类似问题之后所做的,因此,可以随意修改和使用。
So I have a page, called big.html and a stylesheet for this page, called big.html" title=css>css. On the page there is an iframe that loads small.html. small.html has its own style, called small.html" title=css>css. What my little Javascript function does is:
所以我有一个网页,名为big.html并为此页面样式表,称为big.html" title=css>css 。 在页面上,有一个内嵌框架,可加载small.html 。 small.html具有自己的样式,称为small.html" title=css>css 。 我的Javascript小功能是:
Getting all top parent's
<link>
tags获取所有顶级父项的
<link>
标签Looping through the tags and checking if the
rel
attribute has valuestylesheet
遍历标签并检查
rel
属性是否具有值stylesheet
- For all stylesheets found, makes a copy of the link tag and all its attributes and adds it to the head of the iframed page 对于找到的所有样式表,请复制链接标记及其所有属性,并将其添加到iframed页面的开头
Here's the code:
这是代码:
function styleMe() {
if(window.top && window.top.location.href != document.location.href) {
// I'm small but I'm not alone
// all parent's <link>s
var linkrels = window.top.document.getElementsByTagName('link');
// my head
var small_head = document.getElementsByTagName('head').item(0);
// loop through parent's links
for (var i = 0, max = linkrels.length; i < max; i++) {
// are they stylesheets
if (linkrels[i].rel && linkrels[i].rel == 'stylesheet') {
// create new element and copy all attributes
var thestyle = document.createElement('link');
var attrib = linkrels[i].attributes;
for (var j = 0, attribmax = attrib.length; j < attribmax; j++) {
thestyle.setAttribute(attrib[j].nodeName, attrib[j].nodeValue);
}
// add the newly created element to the head
small_head.appendChild(thestyle);
}
}
// maybe, only maybe, here we should remove the kid's own styles...
} else {
alert('I hate to tell you that, but you are an orphant :( ');
}
}
To see the code in action, see big.html.
要查看实际的代码,请参阅big.html 。
Tell your friends about this post on Facebook and Twitter
在Facebook和Twitter上告诉您的朋友有关此帖子的信息
翻译自: https://www.phpied.com/parents-styles-in-an-iframe/
iframe引用父页面样式