跨窗口通信的几种方法

来源：互联网发布：淘宝拍a发b那些平台编辑：程序博客网时间：2024/06/05 19:51

1. localStorage[推荐使用]

通过监听window对象的”storage”事件，其他窗口获取到本窗口发送的消息，注意，必须是同一款浏览器，并且在同一个域名下。

// 本窗口的设值代码localStorage.setItem("EVENT.PUB", JSON.stringify({username : 'yiifaa', now : Date.now()})) // 请务必注意，localStorage不能直接传送复合类型的值(对象)// 其他窗口监听storage事件 $(window).on('storage', function(ev) {     var event = ev.originalEvent,         message = JSON.parse(event.newValue);// 解析出复合的对象值     // 对获取到的值进行处理     console.log(message) })

2. sessionStorage + setInterval[不推荐]

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

3. 父窗口引用

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

与第2中方法相比，效率更低，效果更差，传送的内容也少，强烈不推荐。

5. WebSocket[兼容性最佳]

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

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

6. 其他

有人提出用Worker解决跨窗口通信，其实是行不通的，即使使用引用的同一个任务js文件，但只能自己跟自己通信。

0 0