postMessage和onMessage

html5提供了postMessage和onMessage这一对方法来在不同的文档页或者不同的工作线程之间进行通信。

在不同的文档页内通信

什么叫做不同的文档页？如果一个页面上面嵌套了iframe，那么iframe和外层的页面属于两个不同的文档页。

//parent html
<iframe id="child" src="http://child.com:8083/child.html"></iframe>
function sendMessage(){
document.getElementById('child').contentWindow.postMessage('message from parent', 'http://child.com:8083');
}

window.onmessage = function(message){
console.log(message);
}
//child html
function sendMessage(){
window.parent.postMessage('message from child', 'http://parent.com:8083');
}

window.onmessage = function(message){
console.log(message);
}

console.log(message)打印出来的消息对象是这个东东



postMessage(data, origin)接收两个参数

data是消息对象，javascript中任何可以clone的对象都可以作为信息传递。

origin是字符串参数，指定目标窗口的源，格式为：协议+域+端口，消息只会发送给特定的窗口。如果为*,则发送给任意窗口。

在不同的工作线程之间通信

工作线程是html5里面提出来的一个新api，对于javascript我们的印象是单线程执行，如果运行复杂运算的时候，页面可能就会失去响应。工作线程创建后，会在后台执行，并不会影响浏览器对于页面的响应。

//main.html
var work = new Worker('work.js');

work.onmessage = function(message){
console.log(message);
}

//work.js
while(i < 1000000000){
i++;
}

postMessage({workdown:'yes'});

Worker的使用很简单，直接new一个出来，接收一个指向执行的javascript代码的地址。通过worker实例的onmessage方法可以接受工作线程发送过来的响应信息。工作线程通过postMessage可以向主线程发送消息,但是注意，这里的postMessage只接受一个参数，还记得上面的通过postMessage在文档间传递消息是需要两个参数的，除了消息本身之外还需要传递目标窗口的源。

最后工作线程创建出来，如果不用了记得把他干掉work.terminate().