通过JS实现两个页面之间的通信
来源:互联网 发布:冬天通勤穿 知乎 编辑:程序博客网 时间:2024/06/18 10:15
今天要给大家说的是两个不同页面之间的通信,通过一个拖拽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,获取本地的数据:
<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这个方法实现两个页面之间的通信,获取到本地储存的数据,转成数字实现两个页面的同步。
一个简单的页面通信就可以实现了,希望能帮到大家!!!!!!!
阅读全文
2 0
- 通过JS实现两个页面之间的通信
- JS实现两个页面之间的通信
- 两个页面之间通过js进行传值
- 两个页面之间通过js进行传值
- 两个页面之间js的相互调用
- 通过共享内存,实现两个进程A,B之间的通信
- 通过共享内存,利用循环队列实现两个进程A,B之间的通信
- LINUX 实现两个进程之间的通信
- 从跨域和同域两个角度实现多页面之间的通信
- android中通过实现Parcelable来在两个页面之间传递对象的简单使用
- 实现不同页面之间的通信
- 串行通信总结(实现两个单片机之间的通信)
- 页面之间的通信
- 如何使用js来实现通过href完成多个html页面之间的传递参数
- 直接读取进程内存实现两个应用程序之间的通信
- linux下实现两个线程之间的通信
- 使用Socket实现两个模拟器之间的通信
- 如何实现Android两个模拟器之间的通信
- Java多态
- linux系统下磁盘空间被”无形”占用的问题
- Qt之Modbus协议
- UVA 10815 Andy's First Dictionary
- 结束,也是开始。
- 通过JS实现两个页面之间的通信
- API接口安全性
- 机器学习基本概念
- [Leetcode] 314. Binary Tree Vertical Order Traversal 解题报告
- linux(1)
- [GNU/Linux] Linux系统调用-线程相关(三):私有数据
- 2017 Multi-University Training Contest 第一场
- 关于Android的Camera使用总结
- 【二叉树】实现二叉树的前序、中序、后序的非递归遍历