通过伪协议解决父页面与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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 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
Syphon 使用方法
2021/03/03 冲泡冲煮
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
PHP 实现重载
2021/03/09 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
分享Python开发中要注意的十个小贴士
2016/08/30 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
基于python调用psutil模块过程解析
2019/12/20 Python
python多线程使用方法实例详解
2019/12/30 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
python的列表List求均值和中位数实例
2020/03/03 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
容易被忽略的Python内置类型
2020/09/03 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
办公室日常管理制度
2015/08/04 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python