有关html5的postMessage跨域发送消息
来源:互联网 发布:淘宝的宝贝卖点怎么写 编辑:程序博客网 时间:2024/06/05 11:36
昨天在项目中遇到一个问题,需要在主页面把数据传递给iframe的页面,同时需要iframe在进行操作之后把数据传递给主页面,之前想的是用隐藏域的方法,但终究没有实现,后来发现用html5中的postMessage能够很好的实现这个功能,详解如下:
主页面发送消息到iframe页面:(通过监听message来接受iframe发送过来的数据,通过postMessage来发送数据给iframe)
window.addEventListener("message",function(e){ // debugger; var data= e.data; //该data为提交的表单数据,可把该表单的数据进行操作,显示在页面上 }); // debugger; var firame=document.getElementById("popIframe").contentWindow;//必须是contentWindow对象 firame.postMessage("getValue","*");//向iframe发送数据,iframe中同样使用监听message来接受数据,*表示可以传递给任意窗口
子页面接受消息:(同样通过监听message来接受消息,并把需要的数据通过postMessage发送给父页面)
window.addEventListener("message",function(e){ // debugger; var data= e.data; if(data=="getValue"){ var _data=getData(); parent.postMessage(_data,"*");//把数据传递给父级 } });
postMessage的操作简要来说就是这样,虽然很简单,但却解决了我的大问题,故在此总结一下
有关参数e:
简要说明一下:
data:发送的数据
origin:发送消息窗口的源
source:发送消息的窗口对象
postMessage不仅可以在iframe中传递数据,另外常用的使用场景还有例如页面与打开的新窗口的数据传递,多个窗口的数据传递等等
参考网址:
http://www.cnblogs.com/dolphinX/p/3464056.html
阅读全文
0 0
- 有关html5的postMessage跨域发送消息
- HTML5新特性,跨域信息发送方法.postMessage解释
- html5 postMessage解决跨域、跨窗口消息传递
- html5 postMessage解决跨域、跨窗口消息传递
- html5 postMessage解决跨域、跨窗口消息传递
- HTML5 postMessage解决跨域、跨iframe窗口消息传递
- html5 postMessage解决跨域、跨窗口消息传递
- html5 postMessage解决跨域、跨窗口消息传递
- html5 postMessage解决跨域、跨窗口消息传递
- html5 postMessage解决跨域、跨窗口消息传递
- html5 postMessage解决跨域、跨窗口消息传递
- html5 postMessage解决跨域、跨窗口消息传递
- html5 postMessage解决跨域和跨窗口消息传递
- html5 postMessage解决跨域、跨窗口消息传递
- html5 postMessage解决跨域、跨窗口消息传递
- html5 postMessage解决跨窗口/跨域消息传递
- html5 postMessage解决跨域、跨窗口消息传递
- html5 postMessage解决跨域、跨窗口消息传递
- (OK) Android-x86-7.1.1
- CAS客户端和服务端部署
- 关于java代码中求两个日期差的方法
- Quartz使用-入门使用(java定时任务实现)
- JDK8新特性:接口的静态方法和默认方法
- 有关html5的postMessage跨域发送消息
- MongoDB的安装包.msi后缀和.zip后缀的区别
- Kotlin入门系列教程—Kotlin若只如初见
- J2EE的体系结构
- golang 开源项目全集
- RxDownload-基于RxJava打造的下载工具, 支持多线程和断点续传
- 常用工具类
- sqlite.swift应用简介
- Android基础知识