iframe引用父页面样式_iframe中父项的样式

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.css. On the page there is an iframe that loads small.html. small.html has its own style, called small.css. What my little Javascript function does is:

所以我有一个网页，名为big.html并为此页面样式表，称为big.css 。 在页面上，有一个内嵌框架，可加载small.html 。 small.html具有自己的样式，称为small.css 。 我的Javascript小功能是：

1. Getting all top parent's <link> tags

   获取所有顶级父项的<link>标签

2. Looping through the tags and checking if the rel attribute has value stylesheet

   遍历标签并检查rel属性是否具有值stylesheet

3. 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引用父页面样式