通过伪协议解决父页面与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 相关文章推荐
javascript实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
javascript实现弹出层效果
Dec 10 Javascript
ES6 解构赋值的原理及运用
May 25 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 防恶意刷新实现代码
2010/05/16 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
再论Javascript的类继承
2011/03/05 Javascript
js函数排序的实例代码
2013/07/01 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
详解python中docx库的安装过程
2019/11/08 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
python3排序的实例方法
2020/10/20 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
学习自我鉴定
2014/02/01 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
贷款承诺书
2015/01/20 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python