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


Posted in Javascript onApril 05, 2015

我们经常会有父页面与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

这样就解决了此问题。

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

Javascript 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 #Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 #Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 #Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 #Javascript
javascript Array 数组常用方法
Apr 05 #Javascript
javascript数据结构与算法之检索算法
Apr 04 #Javascript
使用jquery制作弹出框效果
Apr 03 #Javascript
You might like
php实现数组按指定KEY排序的方法
2015/03/30 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
Flask之请求钩子的实现
2018/12/23 Python
Python 切分数组实例解析
2019/11/07 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
物流经理自我评价
2013/09/23 职场文书
夜大毕业生自我评价分享
2013/11/10 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
初中学校对照检查材料
2014/08/19 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技