down 新建 fun () odi 同步 etl div 拖动
今天要给大家说的是两个不同页面之间的通信,通过一个拖拽 demo 来模拟:
首先,写好基础的拖拽代码:
- 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;
- }
- }
- }
这是将 div 拖动变化的值存入到本地存储 localStorage,用 JSON.stringify 将其转为字符串形式:
localStorage.json=JSON.stringify({left:oDiv.offsetLeft,top:oDiv.offsetTop});
然后新建一个 demo,获取本地的数据:
- 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";
- }
- }
通过 onstorage 这个方法实现两个页面之间的通信,获取到本地存储的数据,转成数字实现两个页面的同步
两个页面之间的通信
来源: http://www.bubuko.com/infodetail-2230775.html