通过伪协议解决父页面与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带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
vue使用i18n实现国际化的方法详解
Sep 05 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
深入了解JavaScript词法作用域
Jul 29 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 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
一个查看session内容的函数
2006/10/09 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
使用python绘制常用的图表
2016/08/27 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
Python识别验证码的实现示例
2020/09/30 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
英语系本科生求职信范文
2013/12/18 职场文书
政风行风评议整改方案
2014/09/15 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
Java字符串逆序方法详情
2022/03/21 Java/Android
python获取带有返回值的多线程
2022/05/02 Python
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android