通过伪协议解决父页面与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的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
extjs render 用法介绍
Sep 11 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
js自定义瀑布流布局插件
May 16 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
页面点击小红心js实现代码
May 26 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
解决vuex刷新数据消失问题
Nov 12 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
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
PHP 数组基础知识小结
2010/08/20 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
JS实现合并json对象的方法
2017/10/10 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
Python中SQLite如何使用
2020/05/27 Python
django跳转页面传参的实现
2020/09/17 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
自主招生自荐信格式
2013/12/03 职场文书
公司财务自我评价分享
2013/12/17 职场文书
自我鉴定书
2014/03/24 职场文书
公司联欢会策划方案
2014/05/19 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
年度考核表个人总结
2015/03/06 职场文书
2015年大学生实习评语
2015/03/25 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server