通过伪协议解决父页面与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 相关文章推荐
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
Vue分页器实现原理详解
Jun 28 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
laravel学习教程之关联模型
2016/07/30 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
实习单位接收函模板
2014/01/10 职场文书
房屋公证委托书
2014/04/03 职场文书
2014年共青团工作总结
2014/12/10 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android