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

最新推荐文章于 2024-04-07 19:20:34 发布
最新推荐文章于 2024-04-07 19:20:34 发布
阅读量323 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41189996/article/details/115133046
版权
本文探讨了在Vue应用中，如何实现多个标签页间以及单页面内的数据交互。主要方法包括利用localStorage进行数据共享，通过Cookie进行定时读取，以及借助WebSocket实现实时双向通信。此外，还提到了HTML5的SharedWorker技术在多页面通信中的应用。
摘要由CSDN通过智能技术生成
  • 多个标签页之间的通讯和单页面通讯（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实现多页面通讯（必须是同源的：协议，域名，端口号要相同）
SZR___ __ ___
关注
10-网页多标签通讯.md
03-31
3. **SharedWorker**：SharedWorker是Web Workers的一种，它可以被同一域下的多个标签页共享。SharedWorker适用于需要跨标签页共享数据或者进行计算的复杂场景。在使用SharedWorker时，可以通过`postMessage`方法和`...
vue跨标签页通信（BroadcastChannel）方案
qq_873366938的博客
05-30 1654
日常业务开发中我们常常会碰到如下的场景，即两个标签页之间的通信问题。我们在第一个标签页如何执行操作后在第二个标签页获取到信息。首先我们需要创建一个可以在多数环境下都可以快速使用的方法，在工程的任意位置创建一个可以访问的。创建比代理的东西，一个引用类型且被代理的东西肯定是不会允许克隆的，毕竟大家指向的地址是同一个。并没又直接获取到反而在发送的时候就报错了,再仔细看看发送的消息。文件，当然你可以叫它任何你想叫的名字。为我们提供了一种快捷且高效的途径。2.创建发送及接收的方法。发送消息标签页的使用。
vue-两个浏览器tab页通信的思路
zxw的博客
12-01 1670
前言 最近在开发中遇到一个场景，有一个列表页和详情页，由于业务需求，需要用新标签页来打开详情页，因此我用了window.open()打开详情页，详情页中有一个保存功能，保存后需要触发一个事件，让列表页监听执行刷新列表的操作，最先想到的是eventBus，详情页保存成功时emit一个事件让列表页去监听，但发现列表页始终监听不到，后面又用vuex状态管理，详情页保存后更改store里的值，列表页监听这个值做对应的操作，也是失败了。后面才反应过来，由于vue是单页应用，两个标签页的状态是响应不到一块的 解决思路
vue 跨标签页的数据共享(即跨标签页通信)
UserGuan的博客
11-07 3681
指在同一个浏览器窗口中的多个标签页之间进行数据交流和信息传递的过程。通常情况下，每个标签页都是一个独立的浏览器上下文，它们之间是相互隔离的，无法直接访问对方的数据或进行通信。跨标签页通信的目的是允许这些相互隔离的标签页之间进行信息共享和交互。通过跨标签页通信，可以实现数据的共享、状态的同步、消息的传递等功能。例如：在一个标签页中进行了某个操作，希望其他标签页能够及时获得相关的变化和通知，就需要使用跨标签页通信机制来实现这种交互。
【VUE】跨标签页多页数据传输的实现
RogerQianpeng的博客
01-25 7920
前言 需要借助后端实现，是个有效但不够优雅的笨办法。 需求 数据可视化分析。 A页面是一张表单，在此填入各种筛选条件，然后点击提交。在新标签页B页面展示结果图表。 可以在A页面更新提交表单，B页面实时更新图表结果，但不会弹出新的页面。 关闭B页面，再点击A页面，会弹出新的B页面。 可以点击侧边栏“图表分析”直接跳转到B页面，“数据选择”跳转到A页面，两个页面已经填入和已经展示的数据不能消失。 简单地说，核心需求就是，在一个页面输入表单，在另一个页面实时更新数据。 解决思路 排除的解决方法 vue是单页面
vue2多标签页通信(标签页通信 , 新增页新增数据后, 列表页刷新)
m0_73854403的博客
09-14 263
1. 列表页面 , 在mounted钩子监听 , 如果有更新那就刷新列表 , 同时设置监听变量为false ,告诉浏览器我已刷新列表。这样就能通过监听localstorage , 实现多个标签页通信 , 注意组件销毁后移除事件哦 , 优化性能。2.新增页面 添加完成后 , 把这个状态变为true , 告诉浏览器我添加完成了。
多页面浏览器—Opera
03-04
【多页面浏览器—Opera】是本文的焦点，Opera是一款备受赞誉的浏览器，以其高效资源管理、快速浏览体验和丰富的功能而闻名。对于那些对互联网有深入接触的人来说，Opera是一个非常熟悉的名字，它常被视为除IE及其...
flash javascript之间的通讯方法小结
10-30
标题《flash javascript之间的通讯方法小结》表明本文主要讨论的是Flash和JavaScript这两种技术之间进行交互与通讯的方法。Flash是一种用于创建动画、游戏和应用的多媒体软件平台，而JavaScript是一种广泛用于网页...
idrt:我没有重建标签页
05-26
"IDRT: 我没有重建标签页" 是一个与JavaScript相关的项目，主要目的是为了在基于Web的消息传递应用程序（如即时通讯软件或者单页应用）中实现数据恢复和状态保存功能。IDRT，全称为"Idling Detection and Resume Tab...
iPhone wap浏览器之预备篇
08-18
虽然DOM模式会占用更多内存，但其易于编程和理解的特点使得处理WML标签变得简单。 4. **渲染和显示WML标签**：解析完成后，需要将WML标签转换为可以显示在iPhone界面（UIView）上的内容。这通常涉及到UI布局和样式...
Vue3 用父子组件通信实现页面页签功能
qq_53478650的博客
08-20 1157
因为子页面中存在路由跳转新页面操作时候需要增加页签，也就是将新的页面作为tab加入到页签数组中，而页签数组放在父页面里，所以需要子给父传值。子给父传值是通过调用方法实现用this.$emit("通信名",数据)实现。缓存页签数据到浏览器，页面刷新时，页签状态保留当前状态不会清空。然后在父页面的子标签里用@接受通信名并绑定调用的方法，再在父页面中的子页面标签中用:绑定符绑定。这样就可以将父页面的页签数组传到子页面里。所以顶部栏需要向父页面获取页签数组。因为页签的数组要放在父页面中，
多个浏览器窗口之间通信
qq_38648382的博客
03-27 1029
多个浏览器窗口间通信，浏览器通信简单实现，双屏浏览器通信，多屏浏览器通信
实现多个标签页之间通信的几种方法
yangyang的专栏
08-08 4487
websocket、setInterval+cookie、localstorage、SharedWorker和postMessage 1.localstorage localstorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信(ps：session是会话级的存储空间，每个标签页都是单独的）。 2.SharedWorker SharedWorker可以被多个window共同...
在Vue中使用websocket实时通信
weixin_39001286的博客
02-24 9899
文章目录描述一、构建一个全局的global.js文件二、使用步骤1.引入global.js2.实例化webscoekt3.心跳机制4.其它路由页面使用webscoekt 描述 前端中实现实时通信必须用到websocket，通常前端vue项目中会有多个不同的路由页面，为了保证整个项目中共用一个相同的websocket连接，需要在App.vue中实例化websocket对象。同时，复杂的网络环境难以判断长连接的状态，需要有心跳包以及重连机制。 一、构建一个全局的global.js文件 新建一个名为globa
实现浏览器内多个标签页面之间通信的四种方法
热门推荐
weixin_46399753的博客
03-30 1万+
一一演示实现浏览器内多个标签页面之间通信的四种方式并详细解释其原理
2020-8：实现浏览器内多个标签页之间通信的4种方式(html5 & JavaScript)
Sylvia的博客
12-30 1210
1) cookie + setInterval 方式 注: cookie、localStorage、sessionStorage在同源页面间属于共享资源。（同源：如两个页面的协议、IP地址、端口号相同，即为同源页面） 缺点： ① cookie 空间有限，浏览器在每个域名下最多能设置30-50个cookie，容量最多4k左右 ② 每次 HTTP 请求会把当前域的所有cookie发送到服务器上，包括只在本地才用到的。浪费网络带宽 ③ setInterval的频率设置，过大会影响浏览器性能，过小会影响时效性 优
实现浏览器多标签页通信
大灰狼的小绵羊哥哥的博客
04-21 5286
前言 我们都知道浏览器是可以打开很多标签页的，如果每个标签页代表的是单独的一个网站，那么这些标签页之间肯定是不能通信的，如果能通信那估计我们都得凉凉。但是在很多情况下，浏览器中的很多标签页都属于某一个网站，而且这些标签页之间会使用一些相同的数据，这个时候我们就需要让这些标签页的数据都保持同步。 比如很多博客网站，点击文章列表通常是打开一个新的标签页进入文章详情页，那么如果我们在文章详情页点赞、评论等操作，而文章列表页也使用了这些数据，这个时候我们需要保持两边的数据一致，衍生出来就是详情页改了数据，需要让
如何实现浏览器内多个标签页之间的通信
jewfer的博客
02-12 4161
浏览器内多个标签页之间通信，通俗的讲就是浏览器中开了多个窗口，在其中一个窗口做了一些行为等其他窗口不用刷新也能有相关表现。 cookie+setInterval方式 要想在多个窗口中通信，通信的内容一定不能放在window对象中，因为window是当前窗口的作用域，里面的内容只属于当前窗口。而cookie是浏览器的本地存储机制，和窗口无关。 将要发送的信息写入cookie： var msg = documet.querySelector('#msg'); if(msg.value.trim()
前端浏览器相关面试题
最新发布
Mihoa的博客
04-07 1103
Webkit 和 Firefox 都做了这个优化，当执行 JavaScript 脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变 DOM 树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。同源策略：protocol（协议）、domain（域名）、port（端口）三者必须一致。当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值