如何实现浏览器内多个标签页之间的通信

简介: 如何实现浏览器内多个标签页之间的通信

1.使用WebSocket 可以实现多个标签页之间的通信


2.调用localStorage

  • 在一个标签页里面使用 localStorage.setItem(key,value) 添加(修改、删除)内容;
  • 在另一个标签页里面监听 storage 事件。
  • 即可得到 localstorge 存储的值,实现不同标签页之间的通信


标签页1

<input id="name">  
<input type="button" id="btn" value="提交">  
<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
var name=$("#name").val();    
localStorage.setItem("name", name);   
        });    
    });    
 </script>


标签页2:

1. <script type="text/javascript">  
2.     $(function(){   
3. window.addEventListener("storage", function(event){    
4. console.log(event.key + "=" + event.newValue);    
5.         });     
6.     });  
7. </script>


3.调用cookie+setInterval()

将要传递的信息存储在cookie中,每隔一定时间读取cookie信息,即可随时获取要传递的信息。


页面1:

<input id="name">  
<input type="button" id="btn" value="提交">  
<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
var name=$("#name").val();    
document.cookie="name="+name;    
        });    
    });    
 </script>


页面2:

 <script type="text/javascript">  
     $(function(){   
 function getCookie(key) {    
 return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];    
 setInterval(function(
      }     
 ){
console.log("name=" + getCookie("name"));
}, 10000);
});
</script>


相关文章
|
1月前
|
Web App开发 搜索推荐 安全
|
2月前
|
存储 移动开发 API
如何实现浏览器内多个标签页之间的通信
在浏览器中,可通过三种方式实现多标签页通信:一是利用 `localStorage`,通过设置及监听数据变化实现信息传递;二是借助 `Broadcast Channel API`,在同一频道下双向传输消息;三是运用 `SharedWorker`,作为共享工件在各标签间架起沟通桥梁。每种方法依据实际需求选择使用。
|
2月前
|
算法 安全 前端开发
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
96 0
|
4月前
|
JavaScript API
VUE——监听浏览器关闭及标签页关闭事件
VUE——监听浏览器关闭及标签页关闭事件
402 0
|
7月前
|
存储 安全 前端开发
浏览器跨窗口通信:原理与实践
浏览器跨窗口通信:原理与实践
346 0
|
7月前
|
Web App开发 测试技术
软件测试/测试开发|edge浏览器首页及新标签页设置
软件测试/测试开发|edge浏览器首页及新标签页设置
|
7月前
|
JavaScript
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
|
Web App开发 视频直播
浏览器跨标签页通信、双向数据传输、实时通信有什么区别?
浏览器跨标签页通信、双向数据传输、实时通信有什么区别?
84 0
|
缓存 前端开发 JavaScript
前端跨浏览器标签页数据共享解决方案
vue 项目中有一个工单消息通知列表页,每条消息有已读和未读状态,点击消息会用 window.open 打开一个新的浏览器标签页跳转到工单列表页,工单列表页里有项操作是查看消息,会弹窗显示出具体的详细内容,进入这个弹窗就代表用户已经看到消息了,此时会去调后端接口修改消息状态为已读
172 0
|
Web App开发 网络协议 前端开发
【从零学习python 】86. 深入了解HTTP协议及其在浏览器和服务器通信中的作用
【从零学习python 】86. 深入了解HTTP协议及其在浏览器和服务器通信中的作用
129 0