通过伪协议解决父页面与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中的函数与闭包
Apr 14 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
koa2 从入门到精通(小结)
Jul 23 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之第二天
2006/10/09 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
wxpython绘制音频效果
2019/11/18 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
python实现猜拳游戏项目
2020/11/30 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
vivo智能手机官方商城:vivo
2016/09/22 全球购物
网络维护中文求职信
2014/01/03 职场文书
绿色学校实施方案
2014/03/31 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
高老头读书笔记
2015/06/30 职场文书
中秋联欢会主持词
2015/07/04 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB