{"componentChunkName":"component---src-templates-blog-post-js","path":"/2018/11/15/post-message跨文档通信简介/","result":{"data":{"content":{"edges":[{"node":{"id":"30d0920f-b7fb-5869-a153-1c0abb58d3d6","html":"

概述

\n

web通信主要是为了实现独立上下文之间共享数据, 满足业务需求, 同时尽量避免暴露数据的一种技术手段。通常可通过获取句柄、共享存储或结合事件通知等方式来实现。

\n

html文档间通信

\n

实现方式主要有

\n
    \n
  1. 父子文档通信(借助window对象postMessage);
    2. \n
  2. 借助localStorage监听;
    3. \n
  3. 使用广播隧道(BroadcastChannel);
    4. \n
  4. 借助服务器向另一窗口推送信息(WebSocket, SSE)。
    5. \n
\n

父子文档通信

\n

window对象上的postMessage方法包含三个参数:

\n\n

parent.html:

\n
const childPage = window.open('./child.html', 'child')\nchildPage.onload = () => {\n    childPage.postMessage('hello', location.origin);\n}
\n

child.html:

\n
window.onmessage = evt => {\n    console.log(evt)\n    // evt.data\n}
\n

iframe通信与此类似, 获取对象分别为window.frames[0]和window.parent。 此方案比较普遍, 局限在html为父子关系的页面。

\n

localStorage监听

\n

源页面

\n
localStorage.setItem('message', 'hello')
\n

接收页面

\n
window.onstorage = e => {\n    console.log(e.key, e.oldValue, e.newValue)\n}
\n

实现较简单, 但数据会暴露给Web Storage, 并且赋值两次相同时onStorage不会触发。

\n

广播隧道BroadcastChannel

\n

发送页面

\n
const channel = new BroadcastChannel('tab')\nchannel.postMessage('hello')
\n

接收页面

\n
const channel = new BroadcastChannel('tab')\nchannel.onmessage = e => {\n    console.log(e)\n}
\n

数据较安全, 但是兼容性不好。

\n

服务端推送

\n

WebSocket为全双工通道, 可以双向通信; SSE为单向通道, 只能服务器向浏览器发送。实现方法可以参考Server-Sent Events 教程。

\n

Web Worker间通信

\n

worker的postMessage方法向worker内部作用域发送一个消息, worker本身可以使用DedicatedWorkerGlobalScope.postMessage 方法将信息发送回生成它的线程。worker没有浏览器环境, postMessage方法可有两个参数, 第一个为消息体, 第二个是隧道数组。

\n
// 调用worker\nconst w1 = new Worker('worker1.js')\nconst w2 = new Worker('worker2.js')\nconst mc = new MessageChannel()\nw1.postMessage('port1', [mc.port1])\nw2.postMessage('port2', [mc.port2])\nw2.onmessage = function(e) {\n    console.log(`get ${e.data} on html`)\n}\n\n// worker1.js\nself.onmessage = e => {\n    console.log(`get ${e.data} from ${e.currentTarget.origin}`)\n    const port = e.ports[0]\n    port.postMessage('message send from worker1')\n    port.onmessage = function(evt) {\n        console.log(`get ${evt.data} on ${e.currentTarget.location}`)\n    }\n}\n\n// worker2.js\nself.onmessage = e => {\n    console.log(`get ${e.data} from ${e.currentTarget.origin}`)\n    const port = e.ports[0]\n    port.onmessage = function(evt) {\n        console.log(`get ${evt.data} on ${e.currentTarget.location}`)\n        postMessage(`${evt.data} from worker2`)\n    }\n}
\n

可以看到控制台输出

\n
get port1 from http://localhost:端口号\nget port2 from http://localhost:端口号\nget message send from worker1 on http://localhost:端口号/worker2.js\nget message send from worker1 from worker2 on html
\n

还有一种允许多个脚本共享单一worker的Shared Web Workers, 兼容性不太好, 以后有机会再说。

","fields":{"slug":"/post-message跨文档通信简介/"},"tableOfContents":"","frontmatter":{"id":"e25da473f44ea93d91d5a93cda0fcd61","description":"window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。","title":"postMessage跨文档通信简介","slug":"/","date":"2018年11月15日","tags":["postMessage","Web Worker"],"headerImage":"https://2img.net/h/i968.photobucket.com/albums/ae170/laughingjacky/Blog%20Assets%202019/broadcastchannel_zpsimqib898.jpeg"}},"previous":null,"next":null}]},"site":{"siteMetadata":{"title":"王晓博 - 银河系漫游指南","description":"如果这个博客好久不更新了,说明我更浑浑噩噩了"}}},"pageContext":{"id":"30d0920f-b7fb-5869-a153-1c0abb58d3d6","index":5}},"staticQueryHashes":[]}