js Iframe与父级页面通信及IE9-兼容性
一、 postMessage
window.postMessage()方法安全地启用Window对象之间的跨源通信；例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间。
二、语法
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow：是接收对象的窗体引用，例如：子窗体(iframe)对父级窗体的引用 "window.parent" 或者其他Iframe的引用 “Window.frames +索引值(命名或数字)”
message：将要发送到其他 window的数据。在IE9以下的浏览器,message不支持JSON对象，必须是字符串类型
targetOrigin：通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。
transfer：是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。
三、应用子窗体和父窗体之间的通信
1. parent.html：添加有Iframe(childIframe.html) 页面，并监听message事件
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
iframe{
border:none;
width:100%;
}
</style>
</head>
<body>
<h1>parent</h1>
<iframe src="childiframe.html"></iframe>
<script>
window.addEventListener("message", function (message) {
alert(JSON.stringify(message.data));
});
</script>
</body>
</html>
2. childIframe.html：直接向parent 发送一条消息
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<h1>childIframe</h1> <script>
window.parent.postMessage({type:"open",url:"iframe.html"},"*");
</script>
</body>
</html>
3. IE9-兼容问题：
IE9及以下的浏览器,message不支持JSON对象，必须是字符串类型。发送时将JSON转换为字符串
window.parent.postMessage(JSON.stringify({ type: "open", url: "iframe.html" }), "*");
IE9还是IE8 不兼容addEventListener和"message"监听方法和事件，兼容办法
//IE8,IE9兼容方法
if (window.attachEvent) {
window.attachEvent('onmessage', function (message) {
console.log(JSON.parse(message.data));
});
} else {
window.addEventListener('message', function (message) {
console.log(JSON.parse(message.data));
});
}
js Iframe与父级页面通信及IE9-兼容性的更多相关文章
- iframe之父子页面通信
iframe之父子页面通信 1.获取 子页面 的 window 对象 在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindo ...
- 如何实现iframe页面与父级页面js交互
处理办法:1.同一域下,相同端口2.父级.子集页面上同时标记 document.domain = "xxx.com" 操作内部元素:1.jQuery使用 iframe.conten ...
- js 取父级 页面上的元素
var bb=window.opener.frames["contentIframe"].document.all["my:费用类别"][0].value; / ...
- js之iframe子页面与父页面通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...
- js之iframe父、子页面通信
注意事项 一 . 页面加载顺序:一般先加载完父页面才会去加载子页面,所以:必须要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误.判断ifra ...
- iframe及与页面之间的通信
获取iframe对象 iframe元素本身是位于父级页面中的,所以你可以像一个普通元素一样的使用和操作它 代表了iframe内容window对象是作为一个页面的属性加入到iframe中的, 为了让父级 ...
- JS 的子父级页面调用
window.frames["iframevehquery"].add(); // 父页面调用嵌套子页面的js函数, iframevehquery 为 iframe 的name值, ...
- window.frames && iframe 跨页面通信
1.定义 frames[]是窗口中所有命名的框架组成的数组.这个数组的每个元素都是一个Window对象,对应于窗口中的一个框架. 2.用法 假设iframe 是一个以存在的 iframe 的 ID 和 ...
- iframe调用父页面js函数 方法 元素
在一个页面中添加iframe,但是有时需要与父页面进行通信,传递参数. 网上总结有以下方法: 一.iframe标签中 src属性传参 <iframe src="test.jsp?i ...
随机推荐
- 【CF1053E】Euler tour
[CF1053E]Euler tour 题面 CF 洛谷 大概意思是你有一棵树,然而你并不知道这棵树是啥.给你一个确定了一些位置的欧拉序(就是\(ST\)表求\(LCA\)的那个序列),问你是否存在一 ...
- Zabbix 系列文章
Zabbix 所有文章目录 本系列文章都基于 Zabbix 4.0 , Zabbix 4.0 是属于长期支持版本,其它的长期支持版本有 3.0 .2.2 . 官方已经有中文文档, 官方文档链接: Za ...
- python基础(29):网络编程(软件开发架构、网络基础、套接字初使用)
1. 软件开发架构 我们了解的程序之间通讯的应用可分为两种: 第一种是应用类:qq.微信.百度网盘.腾讯视频这一类是属于需要安装的桌面应用. 第二种是web类:比如百度.知乎.博客园等使用浏览器访问就 ...
- python基础(8):基本数据类型三(dict)、is和==、编码和解码
1. 字典 1.1 字典的介绍 字典(dict)是python中唯一的一个映射数据类型,它是以{}括起来的键值对组成.在dict中key是唯一的,在保存的时候,根据key来计算出一个内存地址,然后将k ...
- Python分页爬取数据的分析
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 向右奔跑 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...
- 比较好用的移动端适配的两种方案及flexible和px2rem-loader在webpack下的配置
移动端适配,目前自己常用的两种 方案,参考以下两篇好文 方案一:使用lib-flexible包 https://www.w3cplus.com/mobile/lib-flexible-for-html ...
- 作用域,作用域链,垃圾收集,js解析
变量中包含基本数据类型和引用数据类型,基本类型指简单的数据值,引用类型由多个值构成的对象. 引用类型可以为其添加属性和方法,也可以改变和删除属性和方法. 复制变量值: 基本类型:一个变量向另一 ...
- [转]Redis之（一）初识Redis
原文地址:http://blog.csdn.net/u012152619/article/details/52550315 Redis之(一)初识Redis 标签: Redisredis-server ...
- 将Docker容器转移至另一服务器
1 把当前的容器提交为一个镜像: docker commit 容器名 镜像名 2 将镜像存为tar文件 docker save 镜像名 >备份文件.tar 3将 备份文件.tar 复制到目的主机 ...
- docker介绍和安装（一）
虚拟化简介 虚拟化(英语:Virtualization)是一种资源管理技术,是将计算机的各种实体资源,如服务器.网络.内存及存储等,予以抽象.转换后呈现出来,打破实体结构间的不可切割的障碍,使用户可以 ...