码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-03-23 14:19:27      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:-name   btn   之间   使用   cli   span   事件   type   func   

方法一:使用localStorage

使用localStorage.setItem(key,value);添加内容

使用storage事件监听添加、修改、删除的动作   

html代码

技术分享图片

JS代码-页面1

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

JS代码-页面2

<script type="text/javascript"> 
      $(function(){  
          window.addEventListener("storage", function(event){   
              alert(event.key + "=" + event.newValue);   
          });    
      }); 
  </script> 

 

方法二、使用cookie+setInterval

HTML代码

  1. <inputidinputid="name"><input type="button" id="btnOK"value="发送">  

JS代码-页面1   

 
  1. $(function(){  
  2.        $("#btnOK").click(function(){  
  3.            varname=$("#name").val();  
  4.            document.cookie="name="+name;  
  5.        });  
  6.    });  

JS代码-页面2

 
  1. //获取Cookie天的内容  
  2. function getKey(key) {  
  3.     return JSON.parse("{\""+ document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") +"\"}")[key];  
  4. }  
  5. //每隔1秒获取Cookie的内容  
  6. setInterval(function(){  
  7.     console.log(getKey("name"));  
  8.  },1000);  

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

标签:-name   btn   之间   使用   cli   span   事件   type   func   

原文地址:https://www.cnblogs.com/xiaoan0705/p/8629724.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!