这里的跨窗口通信,包括不同浏览器窗口,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.open
或target=_blank
方式打开子窗口),子窗口很容易感知到父窗口作用于值的变化,但是当子窗口刷新后,父子窗口之间的引用关系会消失,此时子窗口也不能接受到父窗口的消息。
cookie + setInterval(不推荐)
与sessionStorage + setInterval相比,效率更低,效果更差,传送的内容也少,强烈不推荐。
websocket
所有的websocket都监听统一个服务器地址,利用send发送消息,利用onmessage获取消息的变化,不能能跨窗口,还能跨浏览器,兼容性最佳,只是需要消耗点服务器资源