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

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

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>


相关文章
|
2天前
|
存储 安全 前端开发
浏览器跨窗口通信:原理与实践
浏览器跨窗口通信:原理与实践
57 0
|
2天前
|
Web App开发 测试技术
软件测试/测试开发|edge浏览器首页及新标签页设置
软件测试/测试开发|edge浏览器首页及新标签页设置
52 0
|
2天前
|
JavaScript
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
|
6月前
|
Web App开发 视频直播
浏览器跨标签页通信、双向数据传输、实时通信有什么区别?
浏览器跨标签页通信、双向数据传输、实时通信有什么区别?
37 0
|
9月前
|
Web App开发 网络协议 前端开发
【从零学习python 】86. 深入了解HTTP协议及其在浏览器和服务器通信中的作用
【从零学习python 】86. 深入了解HTTP协议及其在浏览器和服务器通信中的作用
89 0
|
9月前
|
编解码 移动开发 C++
初识http协议,简单实现浏览器和服务器通信
初识http协议,简单实现浏览器和服务器通信
758 0
|
9月前
|
Web App开发 搜索推荐
Infinity颜值与实用兼备的新标签页,高效书签管理必选的浏览器扩展
Infinity是一款基于 Chrome、Edge、Fierfox 等浏览器的扩展插件,它以其简洁、优雅、美观和可定制化而备受推崇,并被官方多次精选推荐。如今,它已经成为许多人必备的浏览器扩展之一。
68 0
|
12月前
|
前端开发 JavaScript 开发者
进一步防止 Selenium 被检测——如何防止浏览器用新标签页打开链接?
进一步防止 Selenium 被检测——如何防止浏览器用新标签页打开链接?
137 0
前端如何设置浏览器网页标签页前的小图标favicon.ico
前端如何设置浏览器网页标签页前的小图标favicon.ico
934 0
前端如何设置浏览器网页标签页前的小图标favicon.ico
|
存储 Web App开发 JavaScript
面试官:你是如何实现浏览器多标签页之间通信的?
前言 我们都知道浏览器是可以打开很多标签页的,如果每个标签页代表的是单独的一个网站,那么这些标签页之间肯定是不能通信的,如果能通信那估计我们都得凉凉。但是在很多情况下,浏览器中的很多标签页都属于某一个网站,而且这些标签页之间会使用一些相同的数据,这个时候我们就需要让这些标签页的数据都保持同步。 比如很多博客网站,点击文章列表通常是打开一个新的标签页进入文章详情页,那么如果我们在文章详情页点赞、评论等操作,而文章列表页也使用了这些数据,这个时候我们需要保持两边的数据一致,衍生出来就是详情页改了数据,需要让列表页知道。 总结来看:在某些情况下,实现多标签页之间通信是必要的!
489 0
面试官:你是如何实现浏览器多标签页之间通信的?