浏览器内多个标签页之间的通讯

最新推荐文章于 2025-05-08 18:25:39 发布
原创 最新推荐文章于 2025-05-08 18:25:39 发布 · 399 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在Vue应用中，如何实现多个标签页间以及单页面内的数据交互。主要方法包括利用localStorage进行数据共享，通过Cookie进行定时读取，以及借助WebSocket实现实时双向通信。此外，还提到了HTML5的SharedWorker技术在多页面通信中的应用。
部署运行你感兴趣的模型镜像
  • 多个标签页之间的通讯和单页面通讯（VUE）使用VUEX不同，它主要是在各个标签页之间数据交互。
  • 多个标签页之间的数据交互主要有以下两种方式：

浏览器存储

localStorage方式

  • 在一个标签页使用localStorage.setItem(key,value)添加内容

  • 在这里插入图片描述

  • 在另一个标签页采用localStorage.getItem(key)获得内容

  • 在这里插入图片描述

Cookie

  • 与本地存储类似，但是Cookie存储的数据比较小，将要传递的信息存储在cookie中，每隔一定时间读取cookie信息
  • 在B页面设置setInterval，以一定的时间间隔来读取cookie值

监听服务器事件

websocket通讯

  1. websocket是全双工通信，服务器可以主动发送数据给浏览器，浏览器也可以主动发送数据给服务器。
  2. http请求是半双工的通讯，浏览器主动请求服务器发送数据，服务器才能发送数据，服务器不能主动
  • 因为websocket是全双工通信，所以A页面可以把数据发给服务器，服务器在主动把数据发送给B页面

HTML5浏览器的新特性SharedWorker

  • worker实现单页面通讯
  • sharedWorker实现多页面通讯（必须是同源的：协议，域名，端口号要相同）

您可能感兴趣的与本文相关的镜像

Wan2.2-T2V-A5B

Wan2.2-T2V-A5B

文生视频
Wan2.2

Wan2.2是由通义万相开源高效文本到视频生成模型，是有​50亿参数的轻量级视频生成模型，专为快速内容创作优化。支持480P视频生成，具备优秀的时序连贯性和运动推理能力

SZR___ __ ___
关注
如何实现浏览器内多个标签页之间的通信?
m0_38066007的博客
04-23 196
标签页间通过共享一个线程，然后通过这个共享的线程来实现数据的交换。（3）使用 localStorage 的方式，我们可以在一个标签页对 localStorage 的变化事件进行监听，然后当另一个标签页修改数据的时候，我们就可以通过这个监听事件来获取到数据。因为标签页之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。（4）使用 postMessage 方法，如果我们能够获得对应标签页的引用，就可以使用postMessage 方法，进行通信。
浏览器内多个标签页之间的通信
weixin_42079403的博客
03-15 813
实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。
Javascript常见问题及解决（二）如何实现浏览器内多个标签页之间的通信?
baizaozao的博客
05-25 951
方法一：使用localStorage 使用localStorage.setItem(key,value);添加内容 使用storage事件监听添加、修改、删除的动作    [javascript] view plain copy window.addEventListener("storage",function(event){
Web前端面试指导(三十四)：如何实现浏览器内多个标签页之间的通信?
热门推荐
雄领IT的专栏
10-10 2万+
题目点评 本题主要考察数据存储的知识，数据存储有本地和服务器存储两种方式，对于前端开发来讲，只需要讲解用本地存储的方式来解决就好。当然也能知道服务器端的方式更好。本题的难易程度一般，只要能够说出思路就可以，至少说两种解决方法。   解题方法   方法一：使用localStorage 使用localStorage.setItem(key,value);添加内容 使用storage事件监
浏览器多个标签页之间的通信
？？？的博客
02-24 380
1.localStorage在添加删除修改时会触发一个storage事件，通过在另一个标签页监听storage事件，就可以得到localStorage存储的值，实现不同页面之间的通信。2.使用cookie,将要传递的信息存储在cookie中，再在另一个页面读取cookie的信息。...
vue 跨标签页的数据共享(即跨标签页通信)
UserGuan的博客
11-07 5598
指在同一个浏览器窗口中的多个标签页之间进行数据交流和信息传递的过程。通常情况下，每个标签页都是一个独立的浏览器上下文，它们之间是相互隔离的，无法直接访问对方的数据或进行通信。跨标签页通信的目的是允许这些相互隔离的标签页之间进行信息共享和交互。通过跨标签页通信，可以实现数据的共享、状态的同步、消息的传递等功能。例如：在一个标签页中进行了某个操作，希望其他标签页能够及时获得相关的变化和通知，就需要使用跨标签页通信机制来实现这种交互。
浏览器跨标签通信的实现原理
liangshanbo1215的博客
05-07 1010
浏览器跨标签页通信（Cross-Tab Communication）是指在同一个浏览器中，不同标签页（或窗口）之间共享数据或同步状态的技术。由于浏览器默认出于安全考虑会隔离不同标签页，因此需要特定的 API 或技巧来实现通信。✅ 简单易用，现代浏览器支持（Chrome 54+, Firefox 38+）。✅ 直接高效，适合已知窗口关系的场景（如父子窗口）。如果需要更复杂的场景（如跨浏览器窗口同步），可结合。❌ 兼容性一般（IE 不支持），需手动管理连接。✅ 兼容性好（IE8+）。
前端面试题：如何实现浏览器跨标签页实时通信
weixin_48420104的博客
04-19 587
前端跨标签页实时通信指的是在同一个浏览器的不同标签页或窗口之间进行数据通信。这种需求可能在多标签页应用中比较常见，例如，在一个标签页中的行为需要实时更新另一个标签页的数据。
两个html页面之间通讯,面试官：前端跨页面通信，你知道哪些方法？
weixin_36278346的博客
06-07 3053
引言在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状态；类似的，在详情页点击“收藏”后，列表页中按钮也会更新。跨页面通信实例这就是我们所说的前端跨页面...
网页多标签页之间的通讯方式详解
SharedWorker可以实现多个页面之间的通讯，例如，在多标签页之间通讯时，使用SharedWorker可以实现数据同步。 SharedWorker可以实现JS计算，并通过postMessage和onmessage与网页通讯。 在实际开发中，需要根据项目...
vue2多标签页通信(标签页通信 , 新增页新增数据后, 列表页刷新)
m0_73854403的博客
09-14 456
1. 列表页面 , 在mounted钩子监听 , 如果有更新那就刷新列表 , 同时设置监听变量为false ,告诉浏览器我已刷新列表。这样就能通过监听localstorage , 实现多个标签页通信 , 注意组件销毁后移除事件哦 , 优化性能。2.新增页面 添加完成后 , 把这个状态变为true , 告诉浏览器我添加完成了。
如何实现浏览器内多个标签页之间的通信
jewfer的博客
02-12 4507
浏览器内多个标签页之间通信，通俗的讲就是浏览器中开了多个窗口，在其中一个窗口做了一些行为等其他窗口不用刷新也能有相关表现。 cookie+setInterval方式 要想在多个窗口中通信，通信的内容一定不能放在window对象中，因为window是当前窗口的作用域，里面的内容只属于当前窗口。而cookie是浏览器的本地存储机制，和窗口无关。 将要发送的信息写入cookie： var msg = documet.querySelector('#msg'); if(msg.value.trim()
vue-两个浏览器tab页通信的思路
zxw的博客
12-01 1829
前言 最近在开发中遇到一个场景，有一个列表页和详情页，由于业务需求，需要用新标签页来打开详情页，因此我用了window.open()打开详情页，详情页中有一个保存功能，保存后需要触发一个事件，让列表页监听执行刷新列表的操作，最先想到的是eventBus，详情页保存成功时emit一个事件让列表页去监听，但发现列表页始终监听不到，后面又用vuex状态管理，详情页保存后更改store里的值，列表页监听这个值做对应的操作，也是失败了。后面才反应过来，由于vue是单页应用，两个标签页的状态是响应不到一块的 解决思路
浏览器跨标签页通信的方式都有哪些
weixin_54714100的博客
04-16 1463
localStorage websocket sharedWorker cookie 优缺点 优点: 操作简单，易于理解。缺点: 存储大小限制只能监听非己页面跨域不共享 (总体来说较为推荐) 优点: 理论上可是实现任何数据共享跨域共享 缺点: 需要服务端配合增加服务器压力上手不易 (总体不推荐) 优点: 理论上可以实现任何数据共享性能较好 缺点: 跨域不共享调试不方便兼容性不好 (总体推荐一般) 优点: 兼容性好易于上手和理解 缺点: 有存储大小限制轮询消耗性能发请求会携带cookie (总体不推荐)
实现多个标签页之间通信的几种方法
yangyang的专栏
08-08 4630
websocket、setInterval+cookie、localstorage、SharedWorker和postMessage 1.localstorage localstorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信(ps：session是会话级的存储空间，每个标签页都是单独的）。 2.SharedWorker SharedWorker可以被多个window共同...
Vue3 用父子组件通信实现页面页签功能
qq_53478650的博客
08-20 1373
因为子页面中存在路由跳转新页面操作时候需要增加页签，也就是将新的页面作为tab加入到页签数组中，而页签数组放在父页面里，所以需要子给父传值。子给父传值是通过调用方法实现用this.$emit("通信名",数据)实现。缓存页签数据到浏览器，页面刷新时，页签状态保留当前状态不会清空。然后在父页面的子标签里用@接受通信名并绑定调用的方法，再在父页面中的子页面标签中用:绑定符绑定。这样就可以将父页面的页签数组传到子页面里。所以顶部栏需要向父页面获取页签数组。因为页签的数组要放在父页面中，
Vue实现浏览器多页面之间的通信
最新发布
weixin_44522680的博客
05-08 476
Vue实现多页面通信(同源)
vue跨标签页通信（BroadcastChannel）方案
qq_873366938的博客
05-30 2024
日常业务开发中我们常常会碰到如下的场景，即两个标签页之间的通信问题。我们在第一个标签页如何执行操作后在第二个标签页获取到信息。首先我们需要创建一个可以在多数环境下都可以快速使用的方法，在工程的任意位置创建一个可以访问的。创建比代理的东西，一个引用类型且被代理的东西肯定是不会允许克隆的，毕竟大家指向的地址是同一个。并没又直接获取到反而在发送的时候就报错了,再仔细看看发送的消息。文件，当然你可以叫它任何你想叫的名字。为我们提供了一种快捷且高效的途径。2.创建发送及接收的方法。发送消息标签页的使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值