浏览器内多个标签页之间的通信方式有哪些?
1. localStorage (不可跨域)
- 在 Web 开发中,localStorage 是一个用于在浏览器中存储键值对数据的 API,可以被不同标签页或窗口之间共享。借助相关的
storage
event 可以使用它来实现多个标签页之间的通信。
2. cookie (不可跨域)
- Cookie 是一种小型的文本文件,由服务器发送给用户浏览器,然后浏览器将其存储在用户的计算机上。它包含了一些关键的信息,用于跟踪用户的会话、存储用户偏好设置或执行其他与用户相关的功能。Cookie 是 Web 开发中常用的一种客户端存储技术。我们可以用类似询的方式实现不同标签之间的通信,
3. SharedWorker (不可跨域)
- 用途: SharedWorker 用于创建一个在多个页面或标签页之间共享的后台线程。它是为了允许多个浏览器上下文(例如,不同标签页或窗口)之间共享数据和通信而设计的。
- 多个上下文: 多个页面可以通过 SharedWorker 实例共享相同的后台线程。这对于需要在不同标签页之间传递消息或共享数据的场景非常有用。
- 通信: SharedWorker 支持通过 postMessage 方法进行消息传递,可以在不同的页面之间传递数据。
- 生命周期: SharedWorker 的生命周期不依赖于打开的页面,而是由所有共享它的页面来管理。只有当所有页面都关闭时,SharedWorker才会被终止。
- SharedWorker 不会在不同的域之间共享。SharedWorker 是在浏览器中运行的脚本,它们被设计为在主线程之外运行,以便执行一些耗时的任务而不阻塞用户界面。由于安全原因,同源策略(Same-Origin Policy)适用于 SharedWorker,这意味着它们的脚本必须与其创建它们的脚本同源。
4. BroadcastChannel (不可跨域)
- BroadcastChannel是 HTML5 中引入的 API,允许在同一浏览器窗口下的不同标签页之间进行发布-订阅式的通信。
5. WebSocket (可跨域)
- 多个标签可以同时连入同一个WebSocket服务器,websocket协议是全双工协议,借助这种双向通信的连接,可以轻松实现不同标签之间的通信。
6. postMessage (可跨域)
- 这是一种使用 window.postMessage 方法的通信方式,允许在不同窗口或标签页之间传递消息。
- 通过指定目标窗口的 origin,可以确保安全通信。
欢迎关注仓库获取源码及更多面试题:https://github.com/BetterWzC/Daily-Frontend-Interview
作者:BetterZheng
链接:https://www.jianshu.com/p/55aefb23c2de
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 标签:浏览器,跨域,哪些,标签,之间,通信,SharedWorker From: https://www.cnblogs.com/guwufeiyang/p/18103911