zoukankan      html  css  js  c++  java
  • 如何实现浏览器内多个标签页之间的通信?

    方法一:使用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);  
  • 相关阅读:
    十大最容易找工作的编程语言
    阿里云主机优惠购买后试用感受(送阿里云代金券)
    【目录】整理
    【git】关联远程分支
    【java】java基本用法记录
    【svn】本地文件夹同步到SVN
    【算法】Bert预训练源码阅读
    【算法】Attention is all you need
    【算法】Normalization
    【算法】BILSTM+CRF中的条件随机场
  • 原文地址:https://www.cnblogs.com/xiaoan0705/p/8629724.html
Copyright © 2011-2022 走看看