通过伪协议解决父页面与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 相关文章推荐
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
Three.js基础部分学习
Jan 08 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
JavaScript门面模式详解
Oct 19 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
vue权限问题的完美解决方案
May 08 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
Vue常用API、高级API的相关总结
Feb 02 Vue.js
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实现图片压缩的两则实例
2014/07/19 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
web.js.字符串与正则表达式操作
2017/05/13 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
python图片验证码生成代码
2016/07/02 Python
Python管理Windows服务小脚本
2018/03/12 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python elasticsearch环境搭建详解
2019/09/02 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
个人自我鉴定范文
2013/10/04 职场文书
管理科学大学生求职信
2013/11/13 职场文书
建筑专业毕业生推荐信
2013/11/21 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS