首页 > 其他分享 >浏览器内多个标签页之间的通信方式有哪些

浏览器内多个标签页之间的通信方式有哪些

时间:2024-03-29 15:25:35浏览次数:15  
标签:浏览器 跨域 哪些 标签 之间 通信 SharedWorker

浏览器内多个标签页之间的通信方式有哪些?

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

相关文章

  • 电脑桌面上好用的记事本软件有哪些?
    在日常办公中,上班族们经常需要记录各种工作事项、笔记和资料。使用一款电脑桌面记事本软件能够大大提高工作效率和便捷性。想象一下,当你需要快速记录一个灵感或待办事项时,只需在电脑桌面上轻点几下,就能轻松完成记录,这是多么高效和方便啊!那么,电脑桌面上好用的记事本软件有哪些呢?哪......
  • 不用ul列表标签,用nav标签做出简洁导航栏
    本人想开设一个minecraft服务器,正想着为我的游戏服务器写一个网页,加上今天上完web课有所感想写了这篇博客。在大学的web教材当中,都是用ul标签来做导航来(这么说是因为我们的教材就是教我们用ul标签来做而且不怎么好看),那么今天阿征教大家如何不用列表也能做出导航栏。效果正......
  • 宁波中墙建材教你如何选择合适的PC砖胎膜?安装需要注意哪些细节?
    宁波中墙建材教你如何选择合适的PC砖胎膜?安装需要注意哪些细节?选择合适的PC砖胎膜对于确保施工质量和工程的耐久性至关重要。PC砖胎膜是一种预制混凝土构件,用于建筑工程中的模板结构,特别是在地下室筏板的侧壁施工中。以下是如何选择合适的PC砖胎膜以及安装时需要注意的细节......
  • 宁波中墙建材北仑海螺水泥新产品有哪些,制作工艺是什么
    宁波中墙建材北仑海螺水泥新产品有哪些,制作工艺是什么水泥新产品主要集中在优化传统硅酸盐水泥性能、减少环境影响以及利用工业废弃物等方面的研发。以下是一些新型水泥产品的示例及其可能的制作工艺特点:掺矿粉硅酸盐水泥:制作工艺:在传统的硅酸盐水泥熟料制造过程中,添加......
  • HTML基础标签
    基础标签:加粗标签:加粗标签:      作用:为文本添加加粗效果      基本语法:        <b>文本</b>  <strong>文本</strong>      注意:双标签      书写标签时:快捷键:记住标签的单词,直接配合tab/回车键,直......
  • Java中有哪些容器(集合类)?
    Java中的集合类主要由Collection和Map这两个接口派生而出,其中Collection接口又派生出三个子接口,分别是Set、List、Queue。所有的Java集合类,都是Set、List、Queue、Map这四个接口的实现类,这四个接口将集合分成了四大类,其中Set代表无序的,元素不可重复的集合;List代表有序的......
  • 【前端面试题-19】简单说一下,如果前端页面要做个页面加载进度条,该通过哪些实现进度上
    前端页面要实现一个页面加载进度条,可以通过以下步骤进行进度上的把控:HTML结构:在页面中创建一个用于承载进度条的<div>元素或其他合适的元素,例如:<divid="progress-bar"><divid="progress"></div></div>progress-bar作为进度条的容器,progress则是实际表示进度的部......
  • 做拖拽的标签遇到的问题总结
     这种表格只有2个一个左边一个右边,使用自定义表头<el-table-column><template#header><divclass="box_right_table_header_left"><span>XX名称</span></div><......
  • 在vue中 使用v-if时它的响应式系统会作哪些优化
    前言:有时我们没在一个组件做初始化数据的工作,只是在template下的根元素加了个v-if控制显示,这样一来也能达到初始化数据的目的。但其背后的原理是什么? 在Vue2.x中,当你使用v-if指令将一个组件或元素的条件设置为false,使得它在DOM中不可见时,Vue的响应式系统会进行一些......
  • 智慧工地安全生产与风险预警大平台的构建,需要哪些技术?
    随着科技的不断发展,智慧工地已成为现代建筑行业的重要发展趋势。智慧工地方案是一种基于先进信息技术的工程管理模式,旨在提高施工效率、降低施工成本、保障施工安全、提升施工质量。一般来说,智慧工地方案的构建,需要通过集成物联网、云计算、大数据、人工智能等先进技术,打造全面、......