关于邮件

Window.postMessage是html5函数，但是支持IE8。如果你的网站不需要支持IE6和IE7，可以用window.postMessage，关于window.postMessage，很多朋友说可以支持跨域。是的，窗口。邮件是客户端之间的直接数据传输，可以跨域传输，也可以在同一个域内传输。

应用场景

我简单给出一个应用场景。当然，这个功能可以用在很多地方。

如果你有一个页面，你在那里获取一些用户信息，点击进入另一个页面，而另一个页面默认无法获取用户信息，你可以通过window.postMessage向这个页面发送一些用户信息(当然要考虑安全等方面。)

代码示例

发送信息：

//弹出一个新窗口

var domain=' http://Hao rooms.com '；

varmyPopup=window.open(域

/windowpostmessagelistener . html '，' my window ')；

//定期发送消息

setTimeout(函数(){

//varmessage='当前时间是'(newDate()。getTime())；

Varmessage={name:' site '，sex : ' male ' }；//这里也可以传递一些数据，obj等。

Console.log('传递的数据是' message)；

myPopup.postMessage(消息，域)；

},1000);

为了延迟，我们通常使用定时器setTimeout来延迟重传。

接受的页面

//监控消息反馈

window . addevent listener(' message '，function(event){

if(event.origin！=='http://haorooms.com)返回；//我们来判断一下我的域名是否跳过去了。

console . log(' received response : '，event . data)；

}，false)；

如下所示，接受从页面获得的数据

2016520115816771.png(507161)

如果使用iframe，代码应该编写如下：

//捕获iframe

var domain=' http://Hao rooms.com '；

vari frame=document . GetElementbyID(' MyiFrame ')。contentWindow

//发送消息

setTimeout(函数(){

//varmessage='当前时间是'(newDate()。getTime())；

Varmessage={name:' site '，sex : ' male ' }；//这里也可以传递一些数据，obj等。

Console.log('传递的数据是： '消息)；

//发送消息和目标URI

iframe.postMessage(message，domain)；

},1000);

接受数据

//响应事件

window . addevent listener(' message '，function(event){

if(event.origin！=='http://haorooms.com)返回；

console . log(' message received : ' event . data，event)；

event . source . PostMessage(' hollabakyoungin！'，event . origin)；

}，false)；

上面的代码片段是向消息源反馈信息，确认消息已经收到。以下是一些重要的事件属性：

source消息源，消息发送窗口/iframe。

来源-消息来源的URI(可能包括协议、域名和端口)，用于验证数据源。

数据——发送方发送给接收方的数据。

调用实例

1.在主线程中创建一个工作线程实例，并监听一个消息事件

超文本标记语言

头

meta http-equiv=' Content-TYPe ' Content=' text/html；charset=iso-8859-1 '

标题测试网站工作人员/标题

scripttype='text/JavaScript '

functioninit(){

var Worker=NewWorker(' compute . js ')；

//事件参数有一个数据属性，是子线程返回的结果数据

worker . on message=function(event){

//将子线程返回的结果添加到p。

document . getelementbyid(' result ')。innerHTML=

event . data ' br/'；

};

}

/script

/head

bodyonload='init()'

pid='结果'/p

/body

/html

在客户端的compute.js中，简单的重复几次sum操作，最后通过postMessage方法将结果返回给主线程，目的是等待一段时间。在此期间，主线程应该不会被阻塞，用户可以通过拖放浏览器来测试这种现象，使浏览器窗口变大变小。这个非阻塞主线程的结果就是WebWorkers想要实现的。

2.调用2.compute.js中的postMessage方法返回计算结果

vari=0；

functiontimedCount(){

for(varj=0，sum=0；j100j ){

for(vari=0；i100000000i ){

sum=I；

}

}

//调用postMessage向主线程发送消息

post message(sum)；

}

postMessage('Beforecomputing，' NewDate())；

timed count()；

postMessage('Aftercomputing，' new date())；

本文转载自中文网站