网页多标签页之间的通讯
题目
网络多标签之间如何通讯？
例如打开两个 chrome 标签，一个访问列表页，一个访问详情页。在详情页修改了标题，列表页也要同步过来。
webSocket
通过 webSocket 多页面通讯，无跨域限制。
localStorage
同域的两个页面，可以通过 localStorage 通讯。通过监听 storage 的变化。A 页面可以监听到 B 页面的数据变化。
// list 页面
window.addEventListener('storage', event => {
console.log('key', event.key)
console.log('newValue', event.newValue)
})
// detail 页面
localStorage.setItem('changeInfo', 'xxx')
SharedWorker
Javascript 是单线程的，而且和页面渲染线程互斥。所以，一些计算量大的操作会影响页面渲染。
WebWorker 可以 new Worker('xxx.js') 用来进行 JS 计算，并通过 postMessage 和 onmessage 和网页通讯。
但这个 worker 是当前页面专有的，不得多个页面、iframe 共享。
PS：WebWorker 专用于 JS 计算，不支持 DOM 操作。
SharedWorker 可以被同域的多个页面共享使用，也可以用于通讯。
源码参考 msg-sharedWork-list.html 和 msg-sharedWork-detail.html 。注意，worker 中的日志需要 chrome://inspect 中打开控制台查看。
PS：注意浏览器兼容性，不支持 IE11
答案
- webSocket 需要服务端参与，但不限制跨域
- localStorage 简单易用
- SharedWorker 本地调试不太方便，考虑浏览器兼容性
连环问：iframe 通讯
除了上述几个方法，iframe 通讯最常用 window.postMessage ，支持跨域。
通过 window.postMessage 发送消息。注意第二个参数，可以限制域名，如发送敏感信息，要限制域名。
// 父页面向 iframe 发送消息
window.iframe1.contentWindow.postMessage('hello', '*')
// iframe 向父页面发送消息
window.parent.postMessage('world', '*')
可监听 message 来接收消息。可使用 event.origin 来判断信息来源是否合法，可选择不接受。
window.addEventListener('message', event => {
console.log('origin', event.origin) // 通过 origin 判断是否来源合法
console.log('child received', event.data)
})
补充：messageChannel
参考：MessageChannel - Web API 接口参考 | MDN (mozilla.org)
简单来说，MessageChannel创建了一个通信的管道，这个管道有两个端口，每个端口都可以通过postMessage发送数据，而一个端口只要绑定了onmessage回调方法，就可以接收从另一个端口传过来的数据。
var channel = new MessageChannel();
var port1 = channel.port1;
var port2 = channel.port2;
port1.onmessage = function(event) {
console.log("port1收到来自port2的数据：" + event.data);
}
port2.onmessage = function(event) {
console.log("port2收到来自port1的数据：" + event.data);
}
port1.postMessage("发送给port2");
port2.postMessage("发送给port1");
window与单个iframe或者多个iframe之间的通信可以使用MessageChannel，通过只暴露有限的能力从而保证安全性。另外，当iframe和服务端的通信要从原来的XHR改造成websocket，window与iframe原有的MessageChannel通信方式是不用改动的。
