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

两个页面之间的通信

时间:2017-07-26 23:45:25      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:log   基础   技术   storage   .com   cti   null   http   nbsp   

今天要给大家说的是两个不同页面之间的通信,通过一个拖拽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将其转为字符串形式:

技术分享

 

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

 1 <script>
 2    window.onload = function() {
 3       var oDiv = document.getElementById(‘div‘);
 4      window.onstorage = function(ev){
 5           var json = JSON.parse(localStorage[ev.key]);
 6                     
 7         oDiv.style.left = json.left + "px";
 8          oDiv.style.top = json.top + "px";
 9       }
10    }
12 </script>

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

 

一个简单的页面通信就可以实现了,希望能帮到大家!!!!!!!

 

两个页面之间的通信

标签:log   基础   技术   storage   .com   cti   null   http   nbsp   

原文地址:http://www.cnblogs.com/user-5253/p/7242250.html

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