通过伪协议解决父页面与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的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
js判断节假日实例代码
Dec 27 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 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错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
在nodejs中创建child process的方法
2021/01/26 NodeJs
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
体育教师求职信
2014/06/30 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
单位同意报考证明
2015/06/17 职场文书
旅行社计调工作总结
2015/08/12 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
分析设计模式之模板方法Java实现
2021/06/23 Java/Android