这里的跨窗口通信,包括不同浏览器窗口,Tab页,frame或者iframe下的不同文档之间相互通信。

localStorage

见:https://www.yuque.com/webfront/js/kiu5g5
原理:通过监听window对象的storage事件,其他窗口获取到本窗口发送的消息。
前提:同一款浏览器,在同一个域名下

Broadcast channel API

https://developer.mozilla.org/zh-CN/docs/Web/API/BroadcastChannel

sharedWorker

https://developer.mozilla.org/zh-CN/docs/Web/API/SharedWorker

sessionStorage + setInterval(不推荐)

sessionStorage难以侦测到值的变化,所以必须配合定时检测,效率较低,不推荐使用。

父窗口引用

通过父子窗口的引用关系(以window.opentarget=_blank方式打开子窗口),子窗口很容易感知到父窗口作用于值的变化,但是当子窗口刷新后,父子窗口之间的引用关系会消失,此时子窗口也不能接受到父窗口的消息。

cookie + setInterval(不推荐)

与sessionStorage + setInterval相比,效率更低,效果更差,传送的内容也少,强烈不推荐。

websocket

所有的websocket都监听统一个服务器地址,利用send发送消息,利用onmessage获取消息的变化,不能能跨窗口,还能跨浏览器,兼容性最佳,只是需要消耗点服务器资源