H5中怎样使用postMessage实现两个网页间传递数据


当前第2页 返回上一页

如果是使用iframe,代码应该这样写:

1

2

3

4

5

6

7

8

9

10

11

//捕获iframe  

var domain = 'http://scriptandstyle.com';  

var iframe = document.getElementById('myIFrame').contentWindow;  

   

//发送消息  

setInterval(function(){  

 var message = 'Hello!  The time is: ' + (new Date().getTime());  

 console.log('blog.local:  sending message:  ' + message);  

        //send the message and target URI  

 iframe.postMessage(message,domain);   

},6000);

确保你使用的是iframe的contentWindow属性,而不是节点对象。

数据接收端

下面我们要开发的是数据接收端的页面。接收方窗口里有一个事件监听器,监听“message”事件,一样,你也需要验证消息来源方的地址。消息可以来自任何地址,要确保处理的消息是来自一个可信的地址。

1

2

3

4

5

6

//响应事件  

window.addEventListener('message',function(event) {  

 if(event.origin !== 'http://davidwalsh.name') return;  

 console.log('message received:  ' + event.data,event);  

 event.source.postMessage('holla back youngin!',event.origin);  

},false);

上面的代码片段是往消息源反馈信息,确认消息已经收到。下面是几个比较重要的事件属性:

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中属性download的详细介绍

html5唤起app的方法

使用html5 canvas api中的clip()方法裁剪区域图像代码实例

快速开发基于html5网络拓扑图应用的详解(图文)

html5调用摄像头功能的实现代码

html5表单新增元素与属性

最全的html5标签

html5 video/audio播放本地文件

更多相关阅读请进入《postmessage》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...