JS實現兩個頁面之間的通訊
阿新 • • 發佈：2019-02-18
兩個不同頁面之間的通訊，通過一個拖拽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這個方法實現兩個頁面之間的通訊，獲取到本地儲存的資料，轉成數字實現兩個頁面的同步。