兩個頁面之間的通訊

今天要給你們說的是兩個不一樣頁面之間的通訊，經過一個拖拽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這個方法實現兩個頁面之間的通訊，獲取到本地儲存的數據，轉成數字實現兩個頁面的同步。

 

一個簡單的頁面通訊就能夠實現了，但願能幫到你們！！！！！！！