webWorker中的postMessage

线程与主线程的音讯通信

语法

myWorker.postMessage(aMessage, transferList);//transferList 可选,一个可选的Transferable对象的数组，用于传递所有权。

用法

//main.jsvar myWorker = new Worker('./worker.js');myWorker.postMessage(40);myWorker.onmessage = function(event){    var data = event.data;    console.log('worker 40获取'+data);}
//worker.jsself.onmessage = function(event){    var data = event.data;    var ans = Math.random()*data;    this.postMessage(ans);}

特点

不可跨域

iframe中的postMessage

线程与主线程的音讯通信

语法

iframe.postMessage(aMessage, transferList);//transferList 可选,一个可选的Transferable对象的数组，用于传递所有权。

用法

//main.jsiframe.postMessage(40);iframe.onmessage = function(event){    var data = event.data;    console.log('worker 40获取'+data);}
//iframe.jswindow.parent.onmessage = function(event){    var data = event.data;    var ans = Math.random()*data;    this.postMessage(ans);}

特点

反对跨域

MessageChannel

Channel Messaging API的MessageChannel 接口容许咱们创立一个新的音讯通道，并通过它的两个MessagePort 属性发送数据。

语法

var channel = new MessageChannel();channel.port1 只读//返回channel的port1。channel.port2 只读//返回channel的port2。
//main.jsvar channel = new MessageChannel();var para = document.querySelector('p');var ifr = document.querySelector('iframe');var otherWindow = ifr.contentWindow;ifr.addEventListener("load", iframeLoaded, false);function iframeLoaded() {  otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]);}channel.port1.onmessage = handleMessage;function handleMessage(e) {  para.innerHTML = e.data;}   
//iframe.jsconst port =  nullwindow.parent.onmessage = function(event){    if(event.ports.length）{        port = event.ports[0];        setTimeout(()=>{            port.postMessage(40)        })    }}

特点

1.是个Transferable对象，能够传递2.有两个port，通过他们传递音讯

BroadcastChannel

BroadcastChannel 接口代理了一个命名频道，能够让指定 origin 下的任意 browsing context 来订阅它。它容许同源的不同浏览器窗口，Tab页，frame或者 iframe 下的不同文档之间互相通信。通过触发一个 message 事件，音讯能够播送到所有监听了该频道的 BroadcastChannel 对象。

语法

var channel = new BroadcastChannel(name);
//index.html<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>index1</title></head><body>  <button onclick="send()">发送</button></body><script>  const setChannel = new BroadcastChannel('demos');  function send(){    setChannel.postMessage('要发送音讯啦啦啦啦啦啦啦');  }  </script></html>
//index2.html<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>index2</title></head><body>  </body><script>  const setChannel = new BroadcastChannel('demos');  setChannel.onmessage = function(data){    console.log(data)  }</script></html>

特点

1.不可跨域
2.反对同域下不同tab页，iframe，浏览器之间通信
3.通过name辨别
4.是个Transferable对象，能够传递