通过伪协议解决父页面与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小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
采用call方式实现js继承
May 20 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
vue项目中微信登录的实现操作
Sep 08 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
mac系统安装Python3初体验
2018/01/02 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
python 实现字符串下标的输出功能
2020/02/13 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
美国创意之家:BulbHead
2017/07/12 全球购物
什么是会话Bean
2015/05/14 面试题
销售类求职信
2014/06/13 职场文书
英文演讲稿开场白
2014/08/25 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers