js中的postMessage javascript消息推送

webWorker中的postMessage
线程与主线程的消息通信
语法

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

用法

//main.js var myWorker = new Worker('./worker.js'); myWorker.postMessage(40); myWorker.onmessage = function(event){ var data = https://www.it610.com/article/event.data; console.log('worker 40获取'+data); }

//worker.js self.onmessage = function(event){ var data = https://www.it610.com/article/event.data; var ans = Math.random()*data; this.postMessage(ans); }

特点

不可跨域

iframe中的postMessage
线程与主线程的消息通信
语法

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

用法

//main.js iframe.postMessage(40); iframe.onmessage = function(event){ var data = https://www.it610.com/article/event.data; console.log('worker 40获取'+data); }

//iframe.js window.parent.onmessage = function(event){ var data = https://www.it610.com/article/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.js var 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.js const port =null window.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 对象。
语法