通过伪协议解决父页面与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 表单中textarea字数限制实现代码
Dec 07 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
javascript中的面向对象
Mar 30 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
Vue实现图书管理小案例
Dec 03 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的正则处理函数总结分析
2008/06/20 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
php文件上传简单实现方法
2015/01/24 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
Python3生成手写体数字方法
2018/01/30 Python
python3处理含有中文的url方法
2018/05/10 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
Python绘制热力图示例
2019/09/27 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
python多线程和多进程关系详解
2020/12/14 Python
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
加拿大最大的书店:Indigo
2017/01/01 全球购物
艺术用品:Arteza
2018/11/25 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
酒店员工培训方案
2014/06/02 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
先进个人推荐材料
2014/12/29 职场文书
抢劫罪辩护词
2015/05/21 职场文书