如何实现浏览器内多个标签页之前的通信(阿里)?

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容