兩個頁面之間的通信
阿新 • • 發佈：2017-07-27
null down 新建 fun () odi 同步 etl 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){ varfactX=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這個方法實現兩個頁面之間的通信，獲取到本地存儲的數據，轉成數字實現兩個頁面的同步
兩個頁面之間的通信