zoukankan      html  css  js  c++  java
  • 通过伪协议解决 父页面与iframe页面通信的问题

    我们经常会有父页面与iframe页面的操作,比如

    <iframe id = "iframe"></iframe>

    这个iframe里面的内容是js写的。如以下代码

    var iframe = document.getElementById("iframe"),
          doc = iframe.contentWindow.document;
    doc.open();
    doc.write("---------something------");
    doc.close();

    以上代码在大多数情况下是对的。但有种情况,即父页面显式的写了document.domain = "xxx";

    在ie系列(IE10没试过)会出现没权限的错误。 而在firefox, chrome都没问题.

    这是为什么呢?这是ie的一个bug, 即父页没有显式的设置document.domain时,iframe会默认document.domain与父页面一致,即都是

    location.host,父子页面是可以进行通信,即文章头的例子, 但当父页面显式的设置了document.domain="", iframe里面的页面必须也显式的设置document.domain="xxx",否则是

    没有权限得到iframe.contentWindow.document的, 即也没办法去动态写内容,其实也可以让iframe指向一个特定的页面,这个页面显式的设置document.domain="xxx",再通过文章开头的方

    的方式来写,但问题是我的父页面有很多这样的iframe,个数是未知的(都是广告位),所以也不能通过特定页面。

    这样问题就来了,在这种情况下,我们貌似没有办法

    1. 父页面设置了并且必须会显式的设置document.domain

    2.iframe页面的内容需要js动态生成。

    3.没有机会为iframe设置src。

    但上面3个条件都满足时,我们可以通过伪协议来解决此类的问题。

    iframe.src="javascript:void((function(){var d=document;d.open();d.domain='xxx;d.write('---something');d.close()})())";
        

    通过这种方式可以显式的设置iframe的document.domain与父页面一致。

    这样写了后,的确实现了动态写iframe内容的需求,但这个页面会单独弹出来,像window.open();

    这是为什么呢? 这也是ie系列的bug ,即父页面有<base target="_blank"></base>, 通过iframe的伪协议所写的内容会类似window.open一样弹出新页面,

    但父页面的<base>又必须是_self,  所以只能在调用iframe.src之前将base的target设置为_self, 内容写完后,再将base的target设为_blank

    这样就解决了此问题。

    虽然伪协议可以解决此问题,但也有些风险,如果不到万不得已,也别随便用这种方式。

    文章有点长,大家如有疑问请给我留言, 谢谢。

  • 相关阅读:
    vue中$refs、$slot、$nextTick相关的语法
    js中hash、hashchange事件
    js中filter的用法
    ES6新特性-函数的简写(箭头函数)
    js中把ajax获取的数据转化成树状结构(并做成多级联动效果)
    jq中get()和eq()的区别
    new Date() 日期格式处理
    微信小程序 加载图片时,先拉长,再恢复正常
    一个例子理解ES6的yield关键字
    eclipse在光标停留在同一对象的背景色提示,开启与关闭
  • 原文地址:https://www.cnblogs.com/fang9159/p/iframe.html
Copyright © 2011-2022 走看看