1. localStorage
一个窗口更新 storage,另一个窗口监听 window 对象的 storage 事件,来实现通信。
注意:两个窗口要同源(URL的协议、域名、端口号都要相同)
// 本窗口更新storage
localStorage.setItem('name', 'jim');
// 其他窗口监听storage事件
window.addEventListener('storage', (e)=>{
console.log('e', e)
console.log('newValue', e.newValue)
})
2. WebSocket
所有的 WebSocket 都监听同一个服务器地址,利用 send 发送消息,利用 onmessage 获取消息的变化,不仅能跨窗口,还能跨浏览器,兼容性最佳,只是需要消耗点服务器资源。
let ws = new WebSocket('ws://localhost:3000/');
ws.onopen = (e) => {
// 或者把此方法注册到其他事件中,即可与其他服务器通信
ws.send({name: 'jim'}); // 通过服务器中转消息
}
ws.onmessage = (e) => {
// 消费消息
console.log(e.data);
}
3. postMessage
详情请见:postMessage
4. window.name
浏览器窗口有 window.name 属性。这个属性最大的特点是,无论是否同源,只要在同一个窗口里,前一个网页设置了这个属性,后一个网页就可以读取它。
详情请见:window.name