浅谈postMessage跨域通信与localStorage实现跨域共享
生活随笔
收集整理的這篇文章主要介紹了
浅谈postMessage跨域通信与localStorage实现跨域共享
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
我們可能有需要在多個域名之間共用同一個localStorage的需要
一、我們先測試不同域名之間的通信
1.有 child.html 如下，代碼中?window.parent.postMessage(data,origin)?方法允許來自不同源的腳本采用異步方式進行通信，可以實現(xiàn)跨文本檔、多窗口、跨域消息傳遞。接受兩個參數：
- data：要傳遞的數據，html5規(guī)范中提到該參數可以是JavaScript的任意基本類型或可復制的對象，然而并不是所有瀏覽器支持任意類型的參數，部分瀏覽器只能處理字符串參數，所以在傳遞參數時需要使用JSON.stringify()方法對對象參數序列化。
- origin：字符串參數，指明目標窗口的源，協(xié)議+主機+端口號[+URL]，URL會被忽略，所以可以不寫，只是為了安全考慮，postMessage()方法只會將message傳遞給指定窗口，當然也可以將參數設置為"*"，這樣可以傳遞給任意窗口，如果要指定和當前窗口同源的話設置為"/"。
?
2.然后在 main.html 中引入 child.html，window.addEventListener('message', function(e) { dosomething....}, false);? 用來監(jiān)聽iframe 中發(fā)過來的消息
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;"> <div id="color">Frame Color</div> </div> <div> <iframe id="child" src="http://www.abc.com/child.html"></iframe> </div> <script type="text/javascript"> // 主頁面監(jiān)聽message事件,初始化自身顏色 // 主頁面監(jiān)聽message事件,處理自身變色 window.addEventListener('message', function(e) {console.log('listen.....');var color = e.data; document.getElementById('color').style.backgroundColor = color; }, false); </script> </body> </html>?
3.這時我們就可以看到效果了，如下圖，當我們點擊包含在main.html 中的 child.html頁面時，main.html中的FrameColor也跟著變了
?二、接下來我們實現(xiàn)跨域之間的localstorage共享?
1.解決思路：在A域和B域下引入C域，所有的讀寫都由C域來完成，本地數據存在C域下;?因此 A哉和B域的頁面必定要引入C域的頁面; 當然C域最好是主域，原因后面會提到(在localstorage 不方便的情況下使用cookie);
- 【A域】【B域】需要讀寫時，通過postMessage 向【C域】發(fā)送跨哉消息，
- 【C域】監(jiān)聽跨域消息，在接到批定的消息時進行讀寫操作，
- 【C域】接到跨域消息時，如果是寫入刪除可以不做什么，如果是讀取，就要先讀取本域本地數據通過postMessage向父頁面發(fā)送消息,
- 【A 域 / B 域】在讀取【C域】數據時就需要監(jiān)聽來自【C域】的跨域消息
2.注意事項：
window.postMessage()方法，向【C域】發(fā)消息，應用iframe.contentWindow.postMessage() 這樣iframe內的【C 域】才可以接到，
同理，【C域】向 【A 域B域】發(fā)消息時應用，window.parent.postMessage()，【A域、B域】的邏輯一定要在iframe 加載完成后進行。
?
3.代碼：
【C域】頁面如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="robots" content="noindex"><title>cross domain</title> </head> <body> <script>;(function(doc,win,undefined){var fn=function(){};fn.prototype={/*本地數據存儲*/setLocalCookie: function (k, v, t,domain) {typeof window.localStorage !== "undefined" ? localStorage.setItem(k, v) :(function () {t = t || 365 * 12 * 60 * 60;domain=domain?domain:".hc360.com";document.cookie = k + "=" + v + ";max-age=" + t+";domain="+domain+";path=/";})()},getLocalCookie: function (k) {k = k || "localDataTemp";return typeof window.localStorage !== "undefined" ? localStorage.getItem(k) :(function () {var all = document.cookie.split(";");var cookieData = {};for (var i = 0, l = all.length; i < l; i++) {var p = all[i].indexOf("=");var dataName = all[i].substring(0, p).replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,"");cookieData[dataName] = all[i].substring(p + 1);}return cookieData[k]})();},clearLocalData: function (k) {k = k || "localDataTemp";typeof window.localStorage !== "undefined" ? localStorage.removeItem(k) :(function () {document.cookie = k + "=temp" + ";max-age=0";})()},init:function(){this.bindEvent();},bindEvent:function(){var _this=this;win.addEventListener("message",function(evt){if(win.parent!=evt.source){return}var options=JSON.parse(evt.data);if(options.type=="GET"){var data=tools.getLocalCookie(options.key);win.parent.postMessage(data, "*");}options.type=="SET"&&_this.setLocalCookie(options.key,options.value);options.type=="REM"&&_this.clearLocalData(options.key);},false)}};var tools=new fn();tools.init();})(document,window); </script> </body> </html>【A域】頁面如下：我們再C中設置了?localStorage
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;"> <div id="color">Frame Color</div> </div> <div> <iframe id="child" src="http:///c.html"></iframe> </div> <script type="text/javascript"> window.onload = function() {console.log('set key value......................')window.frames[0].postMessage(JSON.stringify({type:"SET",key:"key",value:"value"}),'*');} </script> </body> </html>上傳A、C之后我們見到效果如上圖
?
【B域】頁面如下：我們讀取A中設置的 localStorage
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;"> <div id="color">Frame Color</div> </div> <div> <iframe id="child" src="http:///c.html"></iframe> </div> <script type="text/javascript"> window.onload = function() {console.log('get key value......................')window.frames[0].postMessage(JSON.stringify({type:"GET",key:"key"}),'*');}window.addEventListener('message', function(e) {console.log('listen.....');var data = e.data; console.log(data);}, false);</script> </body> </html>訪問c打開console見到效果如下?
至此我們實現(xiàn)了跨域?localStorage 的讀取和刪除。
?
當然土豪隨意打賞
使用微信掃一掃，隨意
?
使用支付寶掃一掃，隨意
轉載于:https://www.cnblogs.com/tyrion1990/p/8134384.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的浅谈postMessage跨域通信与localStorage实现跨域共享的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 按字符串长度切割字符串（支持汉字占2个长
- 下一篇： Deepin中设置文件或文件夹权限