浏览器tab页之间的通信

转载：https://zhuanlan.zhihu.com/p/63422027

1.场景1:两个需要交互的tab页面具有依赖关系 – postMessage

如 A页面中通过JavaScript的window.open打开B页面，或者B页面通过iframe嵌入至A页面，此种情形最简单，可以通过HTML5的 window.postMessage API完成通信，由于postMessage函数是绑定在 window 全局对象下，因此通信的页面中必须有一个页面（如A页面）可以获取另一个页面（如B页面）的window对象，这样才可以完成单向通信；B页面无需获取A页面的window对象，如果需要B页面对A页面的通信，只需要在B页面侦听message事件，获取事件中传递的source对象，该对象即为A页面window对象的引用：

2.场景2: 两个打开的页面属于同源范畴 – storage

若要实现两个互不相关的同源tab页面通信，可以使用一种比较巧妙的方式：localstorage。localStorage的存储遵循同源策略，因此同源的两个tab页面可以通过这种共享localStorage的方式实现通信，通过约定localStorage的某一个itemName，基于该key值的内容作为“共享硬盘”方式通信。

HTML5提供了storage事件，通过window对象侦听storage事件，会侦听localStorage对象的变化事件（包括item的添加、修改和删除）。因此，通过事件可以完成高效的通信机制。