两个浏览器窗口间通信

浏览器窗口间通信

补充一下，这里的通讯指遵守同源策略情况下。

为了吸引读者的兴趣，先把demo放到前面：
下面有几个我自己写的演示多页面通讯的demo, 为了正常运行，请用最新的chrome浏览器打开。
demo的源码地址https://github.com/xiangwenhu/page-communication/tree/master/docs

• 首页
• setInterval + sessionStorage
• localStorage
• BroadcastChannel
• SharedWorker

为什么会扯到这个话题，最初是源于听 https://y.qq.com/ QQ音乐，

• 播放器处于单独的一个页面
• 当你在另外的一个页面搜索到你满意的歌曲的时候，点击播放或添加到播放队列
• 你会发现，播放器页面做出了响应的响应

这里我又联想到了商城的购物车的场景，体验确实有提升。
刚开始，我怀疑的是Web Socket作妖，结果通过分析网络请求和看源码，并没有。 最后发现是localStore的storage事件作妖，哈哈。

回归正题，其实在一般正常的知识储备的情况下，我们会想到哪些方案呢？

1. WebSocket

这个没有太多解释，WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。当然是有代价的，需要服务器来支持。
js语言，现在比较成熟稳定当然是 socket.io和ws. 也还有轻量级的ClusterWS。

你可以在The WebSocket API (WebSockets)
看到更多的关于Web Socket的信息。

2. 定时器 + 客户端存储

定时器：setTimeout/setInterval/requestAnimationFrame
客户端存储： cookie/localStorage/sessionStorage/indexDB/chrome的FileSystem

定时器没啥好说的，关于客户端存储。

• cookie: 每次会带到服务端，并且能存的并不大，4kb?，记得不太清楚
• localStorage/sessionStorage 应该是5MB, sessionStorage关闭浏览器就和你说拜拜。
• indexDB 这玩意就强大了，不过读取都是异步的，还能存 Blob文件，真的是很high。
• chrome的FileSystem ,Filesystem & FileWriter API,主要是chrome和opera支持。这玩意就是文件系统。

3. postMessage

Cross-document messaging 这玩意的支持率98.9%。 好像还能发送文件，哈哈，强大。
不过仔细一看 window.postMessage()，就注定了你首先得拿到window这个对象。 也注定他使用的限制， 两个窗体必须建立起联系。 常见建立联系的方式：

• window.open
• window.opener
• iframe

提到上面的window.open, open后你能获得被打开窗体的句柄，当然也可以直接操作窗体了。

到这里，我觉得一般的前端人员能想到的比较正经的方案应该是上面三种啦。
当然，我们接下来说说可能不是那么常见的另外三种方式。

1. StorageEvent

Page 1

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！