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><metacharset="utf-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title></title><style>iframe{border:none;width:100%;}</style> </head> <body><h1>parent</h1><iframesrc="childiframe.html"></iframe><script>window.addEventListener("message",function(message) {alert(JSON.stringify(message.data));});</script> </body> </html>
View Code
2. childIframe.html:直接向parent 发送一条消息
<html> <head><metacharset="utf-8" /><metaname="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>
View Code
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));}); }
转载于:https://www.cnblogs.com/haosit/p/11301350.html
js Iframe与父级页面通信及IE9-兼容性相关推荐
- iframe父子级页面传值支持跨域访问javascript
今天在使用parent.fn()调用父页面方法时发现并没有成功调用到父级iframe中的方法,后来发现是两个iframe并不在同一域名下,在网上查过后,发现H5中message方法恰好支持,闲话不多说 ...
- iframe之父子页面通信
文章目录 iframe之父子同源页面的通信 1.获取 子页面 的 window 对象 ----- `获取iframe节点的contentWindow属性` 2.子 iframe 获取 父页面----- ...
- js中子父级页面相互调用
1.父级页面获取子级属性,例如ID var obj = $(window.frames["addQualiframe1"].document); //add ...
- 在js中访问html页面,javascript – 在IE9的html页面中访问js里面的全局函数
我正在尝试访问我在main.js文件中声明的全局函数,并尝试在html页面中使用它: (function(){ window.myFunction(); })(); 还有我的main.js文件 (fu ...
- iframe 覆盖父页面_一次iframe子页面与父页面的通信
事件回顾: 收到需求,说是要在别人的系统里嵌入目前由我维护的系统,嵌入的逻辑不多,只有一个创建流程. 刚开始觉得没什么,不就是你改改,我改改,你给我url加个参数,我知道是你调用,修改下页面balab ...
- 【转】js之iframe子页面与父页面通信
2019独角兽企业重金招聘Python工程师标准>>> iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 ...
- html简单父子页面,js 的 iframe 父子页面通信的简单方法
1.获取 子页面 的 window 对象 在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindow 可以获取到 子页面 win ...
- java伪协议_通过伪协议解决父页面与iframe页面通信的问题
我们经常会有父页面与iframe页面的操作,比如 这个iframe里面的内容是js写的.如以下代码 var iframe = document.getElementById("iframe& ...
- 实现iframe嵌套页面通信
实现iframe嵌套页面通信 在项目中通过iframe标签嵌入其他网页时,该如何iframe页面进行通信呢?小菜鸡在这里简单记录一下~ 1.父组件获取子组件: (注:父组件是当前项目页面,子组件是if ...
最新文章
- linux启动spark命令,在linux上安装spark
- java 泛型详解、Java中的泛型方法、 java泛型详解
- Teams Bot 如何使用新的 System.Text.Json 库
- “凡尔赛文学”疯狂刷屏!数学家们也拼命“装”了起来,哈哈哈哈哈
- 【DP】Rotating Substrings(CF1363F)
- Robotium_断言方法assert、is、search
- Java第四周编程总结
- 安全界的硬核盛会要来了!2020北京网络安全大会倒计时100天
- C++ 将模板申明为友元
- iOS 动画(三)CABasicAnimation animationWithKeyPath 一些规定的值
- [转载] 的士速递4
- js的tree数组对象扁平化思否_JavaScript数组_二维数组_三维数组(二十五)
- 刚刚,百度宣布造车!
- Android 后台开发
- Supervisor启动java服务(jar)
- 试玩接入unity技巧
- Web scraper使用教程-进阶用法(二)-爬取二级页面内容
- Java本地高性能缓存的几种实现方式
- 【c语言】计算一年中有多少天
- arcgis之切割合并操作