通过伪协议解决父页面与iframe页面通信的问题

 更新时间:2015年04月05日 23:14:58   投稿:mdxy-dxy  
这篇文章主要介绍了通过伪协议解决父页面与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

这样就解决了此问题。

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

相关文章

  • js中requestAnimationFrame()解读与使用示例

    js中requestAnimationFrame()解读与使用示例

    requestAnimationFrame()是JavaScript中用于创建高效、流畅动画的核心方法,它与浏览器的重绘过程同步,确保每次动画更新都与显示器刷新率同步,下面就来一起了解一下
    2024-09-09
  • js实现点击每个li节点,都弹出其文本值及修改

    js实现点击每个li节点,都弹出其文本值及修改

    本篇文章主要分享了js实现点击每个li节点,都弹出其文本值及修改的实例代码,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • 简单分析js中的this的原理

    简单分析js中的this的原理

    这篇文章主要介绍了简单分析js中的this的原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JS数组及对象遍历方法代码汇总

    JS数组及对象遍历方法代码汇总

    这篇文章主要介绍了JS数组及对象遍历方法代码汇总,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 常用的JavaScript验证正则表达式汇总

    常用的JavaScript验证正则表达式汇总

    这篇文章主要是对常用的JavaScript验证正则表达式进行了详细的汇总介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • js charAt的使用示例

    js charAt的使用示例

    这篇文章主要介绍了js charAt的使用方法,需要的朋友可以参考下
    2014-02-02
  • JavaScript学习笔记整理之引用类型

    JavaScript学习笔记整理之引用类型

    引用类型是JavaScript中很重要的内容,通过本文给大家介绍JavaScript学习笔记整理之引用类型,对js引用类型相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • 深入理解JS中的变量及作用域、undefined与null

    深入理解JS中的变量及作用域、undefined与null

    本篇文章主要是对JS中的变量及作用域、undefined与null进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • JavaScript原型和原型链与构造函数和实例之间的关系详解

    JavaScript原型和原型链与构造函数和实例之间的关系详解

    这篇文章主要介绍了JavaScript原型和原型链与构造函数和实例之间的关系,每个对象都连接到一个原型对象,并且它可以从中继承属性。所有通过对象字面量创建的对象都连接到object.prototype,它是JavaScript中的标配对象
    2022-07-07
  • 详解js实时获取并显示当前时间的方法

    详解js实时获取并显示当前时间的方法

    这篇文章主要介绍了js实时获取并显示当前时间的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论