iframe引用父页面样式_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

FacebookTwitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/parents-styles-in-an-iframe/

iframe引用父页面样式

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值