zoukankan      html  css  js  c++  java
  • 两个页面之间的通信

    今天要给大家说的是两个不同页面之间的通信,通过一个拖拽demo来模拟:

    首先,写好基础的拖拽代码:

    <script>
    window.onload=function(){
    var oDiv=document.getElementById('div’);
    oDiv.onmousedown=function(ev){
     var ev=window.event ||ev;
    var disX=ev.clientX-oDiv.offsetLeft;
    var disY=ev.clientY-oDiv.offsetTop;
    document.onmousemove=function(ev){
    var factX=ev.clientX-disX;
    var factY=ev.clientY-disY;
    oDiv.style.left=factX+'px';
    oDiv.style.top=factY+'px';
    localStorage.json=JSON.stringify({left:oDiv.offsetLeft,top:oDiv.offsetTop});
    }
    document.onmouseup=function(){
         document.onmousemove=null;
    }
    }
    }
    </script>

    这是将div拖动变化的值存入到本地存储localStorage,用JSON.stringify将其转为字符串形式:

    localStorage.json=JSON.stringify({left:oDiv.offsetLeft,top:oDiv.offsetTop});

    然后新建一个demo,获取本地的数据:

    <script>
     window.onload=function(){
        var oDiv=document.getElementById('div');
      window.onstorage=function(ev){
         var json=JSON.parse(localStorage[ev.key]);
    oDiv.style.left=json.left+"px";
    oDiv.style.top=json.top+"px";
    }
    }
    </script>

    通过onstorage这个方法实现两个页面之间的通信,获取到本地存储的数据,转成数字实现两个页面的同步

  • 相关阅读:
    java-五子棋棋盘排布 && 数字转换成汉字 &&大数计算
    动手动脑,无法自拔(2)课时作业4
    动手动脑,无法自拔(1)课时作业3
    《大道至简》 第二章 读后感
    NABCD需求
    第九周总结
    第八周总结
    最大子数组(循环连接)
    第七周总结
    最大子数组和
  • 原文地址:https://www.cnblogs.com/zzp0320/p/7244718.html
Copyright © 2011-2022 走看看