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

两个页面之间的通信

时间:2017-07-27 15:49:09      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:doc   function   log   存储   document   div   数字   代码   方法   

今天要给大家说的是两个不同页面之间的通信,通过一个拖拽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这个方法实现两个页面之间的通信,获取到本地存储的数据,转成数字实现两个页面的同步

 

两个页面之间的通信

标签:doc   function   log   存储   document   div   数字   代码   方法   

原文地址:http://www.cnblogs.com/zzp0320/p/7244718.html

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