通过伪协议解决父页面与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 相关文章推荐
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
搞定immutable.js详细说明
May 02 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
详解es6新增数组方法简便了哪些操作
May 09 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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
Terran剧情介绍
2020/03/14 星际争霸
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
Python中整数的缓存机制讲解
2019/02/16 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
Python调用C语言的实现
2019/07/26 Python
python实现实时视频流播放代码实例
2020/01/11 Python
python中os包的用法
2020/06/01 Python
python3中编码获取网页的实例方法
2020/11/16 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
教师党员自我评议不足范文
2014/10/19 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
2016国培学习心得体会
2016/01/08 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS