如果是使用iframe,代码应该这样写:
1 2 3 4 5 6 7 8 9 10 11 |
|
确保你使用的是iframe的contentWindow属性,而不是节点对象。
数据接收端
下面我们要开发的是数据接收端的页面。接收方窗口里有一个事件监听器,监听“message”事件,一样,你也需要验证消息来源方的地址。消息可以来自任何地址,要确保处理的消息是来自一个可信的地址。
1 2 3 4 5 6 |
|
上面的代码片段是往消息源反馈信息,确认消息已经收到。下面是几个比较重要的事件属性:
source ?C 消息源,消息的发送窗口/iframe。
origin ?C 消息源的URI(可能包含协议、域名和端口),用来验证数据源。
data ?C 发送方发送给接收方的数据。
这三个属性是消息传输中必须用到的数据。
使用window.postMessage
跟其他很web技术一样,如果你不校验数据源的合法性,那使用这种技术将会变得很危险;你的应用的安全需要你对它负责。window.postMessage就像是PHP相对于JavaScript技术。window.postMessage很酷,不是吗?
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
vue.js做出图书管理平台的详细步骤
bootstrap里如何统计table sum的数量
怎么用JS做出按钮禁用和启用
以上就是H5中怎样使用postMessage实现两个网页间传递数据的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html5 track标签是什么意思?html5 track标签的使用方法介绍
html5中返回音视频的当前媒体控制器的属性controller
使用html5 canvas api中的clip()方法裁剪区域图像代码实例
更多相关阅读请进入《postmessage》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者