WebSocket、SharedWorder(需要实现试试),也可以调用localstorage、cookies等本地存储方式
1.localStorage
在一个标签页调用localStorage.setItem(name,val)保存数据localStorage.removeItem(name)删除数据的时候会触发 'storage'事件。
在另外一个标签页监听document对象的storage事件,在事件event对象属性中获取信息。event事件对象包含以下信息1. domain 2. newValue 3. oldValue 4. key
2.cookie
在A页面将需要传递的消息存储在cookie当中
在B页面设置setInterval,以一定的时间间隔去读取cookie的值。
3.postMessage API
window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。
从广义上讲,一个窗口可以获得对另一个窗口的引用(比如 targetWindow = window.opener),然后在窗口上调用 targetWindow.postMessage()方法分发一个MessageEvent 消息。接收消息的窗口可以根据需要自由处理此事件。传递给 window.postMessage() 的参数(比如 message )将通过消息事件对象暴露给接收消息的窗口。
支持两个页面跨域;只能传递字符串数据;向另一个地方(当前页面中的iframe元素、当前页面弹出的窗口)传递数据。两个参数(1.一条消息 2.消息接收方来自哪个域的字符串)。接收到消息后会触发window对象的message事件,,以异步形式触发,传递给onmessage处理程序三个信息(data、origin、source)
4.直接引用
适用于两个页面在同一域;可以传递对象数据(对象数据使用 instanceof 做类型判断时有坑);参考 window.open;
5.WebSocket 服务器中转
需要页面都与服务器建立 WebSockets 连接;支持跨域;参考 WebSocket