今天要给大家说的是两个不同页面之间的通信,通过一个拖拽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这个方法实现两个页面之间的通信,获取到本地储存的数据,转成数字实现两个页面的同步。
一个简单的页面通信就可以实现了,希望能帮到大家!!!!!!!
原文:http://www.cnblogs.com/user-5253/p/7242250.html