两个窗口之间的通信

两个窗口之间的通信

1.localstorage

一个窗口更新localStorage，另一个窗口监听window对象的”storage”事件，来实现通信。(localStorage需要同源窗口才能共享，即协议，域名，端口一致)

// 本窗口的设值代码
localStorage.setItem('aaa', (Math.random()*10).toString())

// 其他窗口监听storage事件
window.addEventListener("storage", function (e) {
   
  console.log(e)
  console.log(e.newValue)
})

2.WebSocket

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

var ws = new WebSocket("ws://localhost:3000/")
ws.onopen = function (event) {
   
  // 或者把此方法注册到其他事件中，即可与其他服务器通信
  ws.send({
   now : Date.now()}); // 通过服务器中转消息
};
ws.onmessage = function (event) {
   
  // 消费消息
  console.log(event.data);
}

window.postMessage()

window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。

通常情况下，不同页面上的脚本允许彼此访问，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“同源策略”）。window.postMessage()提供了一个受控的机制来安全地规避这个限制（如果使用得当的话）。

一般来说，一个窗口可以获得对另一个窗口的引用(例如，通过targetWind