0. 前言
相信跨域有什麼手段,大家都背得滾瓜爛熟了。現在我們來做一些不在同一個tab頁面或者跨域的實踐。
1. localstorage
1.1 onstorage事件
localstorage是瀏覽器同域標籤共用的存儲空間,所以可以用來實現多標籤之間的通信。html5出現了一個事件: onstorage,我們在window對象上添加監聽就可以監聽到變化: window.addEventListener('storage', (e) => console.log(e))
需要注意,此事件是非當前頁面對localStorage進行修改時纔會觸發,當前頁面修改localStorage不會觸發監聽函數。如果實在是要,自己重寫一個方法吧,要不就在修改的時候把自己改的內容po上去。
示例: js:
if(!localStorage.getItem('a')){ localStorage.setItem('a',1) }else{ var s = localStorage.getItem('a') localStorage.setItem('a',+s+1) } window.addEventListener('storage', (e) => console.log(e)) 複製代碼
我們新建兩個html分別叫1.html和2.html,並加上上面的js,於是我們每次打開或者刷新該頁面就會給a加上1。需要注意的是,如果是雙擊打開,是在file://
協議下的,而且不會觸發storage事件,但是會給a加上1,所以可以做一個功能,計算本地某個文件被打開了多少次。如果我們用服務器打開,我們的不同tab頁面通信完成了,而且是實時的。
2. 玩轉iframe
我們都知道frame可以跨域,那麼我們來試一下。下面例子,都是一個html內嵌iframe,當然你直接打開iframe那個文件,沒什麼意義的
2.1 利用hash變化傳遞信息實現父子窗口通信(能跨域)
父窗口:1.html
html:
<iframe name="myIframe" src="http://localhost:1000/2.html"></iframe> 複製代碼
js:
var originURL = myIframe.location.href var i = document.querySelector('iframe') i.onload= function(){//這是異步加載的iframe i.src += '#aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' } 複製代碼
子窗口:2.html
window.onhashchange = function() { console.log(window.location.hash) } 複製代碼
我們打開父窗口,發現子窗口的js已經跑起來了。
既然能跨域,我們直接雙擊打開1.html,發現還是可以,這個例子雙擊打開和服務器打開都能達到目的
2.2 父調用子頁面的js或者反過來調用
父調子:還是基於前面的條件
var i = document.querySelector('iframe') i.onload= function(){ myIframe.window.f(); } 複製代碼
子:2.html
function f(){ console.log('this is 2.html') } 複製代碼
子調父: 子:2.html
parent.fn1() 複製代碼
父:1.html
function fn1(s){ console.log('this is 1.html') } } 複製代碼
當然,你直接打開2.html是沒意義的而且是報錯:Uncaught TypeError: parent.fn1 is not a function
這個需要注意,不能跨域,所以雙擊打開以及不同域是報錯的:Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
,只能服務器打開
2.3 window.name (能跨域)
類似於vue、react的prop父子傳值,只要在父窗口設置iframe標籤的name,在子窗口就可以讀到。
父窗口:1.html
<iframe name="myIframe" src="http://localhost:1000/2.html"></iframe> 複製代碼
子窗口:2.html
console.log(window.name) 複製代碼
少年,放心地雙擊打開吧,有效果的。
2.4 postmessage(能跨域)
H5之後爲window新增了window.postMessage()方法,第一個參數是要發送的數據,第二個參數是域名。
父窗口:1.html
<iframe id="test" name="myIframe" src="http://localhost:1000/2.html"></iframe> //js var frame = document.querySelector('iframe') frame.onload = function(argument) { window.frames[0].postMessage('data from html1', '*'); } 複製代碼
子窗口:2.html
window.onmessage = function (e) { console.log(e.data) } 複製代碼
可以跨域,所以能直接雙擊打開可以看見效果。
上面的父子窗口,是指一個html裏面的iframe標籤引入另一個html。
3. 非同域的兩個tab頁面通信
也就是兩個毫無關係的tab頁面通信(比如我打開一個baidu和一個github),怎麼通?
當然baidu和github能不能通信,我們不知道,得問他們家的開發。前面我們已經知道,iframe能跨域,localstorage能使得兩個tab頁面通信。那我們就來試一下,iframe橋接兩個互不相干的tab頁面。注意,bridge是一個html,其他兩個tab是指瀏覽器打開的兩個html文件。你可以另外建立兩個不同的html,也可以建立兩個一模一樣的html,然後雙擊打開也好、服務器打開也好,有兩個就可以了。
下面,我們把橋接的iframe叫做bridge.html吧。我們用node打開,監聽本地的1000端口。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>hi</h1> </body> <script type="text/javascript"> window.addEventListener("storage", function(ev){ if (ev.key == 'info') { window.parent.postMessage(ev.newValue,'*'); } }); window.addEventListener('message',function(e){ // 接受到父文檔的消息後,廣播給其他的同源頁面 localStorage.setItem('info',e.data); }); </script> </html> 複製代碼
我們再來兩個頁面,內容如下。接着我們可以以n種不同方式分別打開,反正是非同源就可以了
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <input id="ipt" type="text" name=""> <button onclick="sub()">sub</button> <p id="cont"></p> <iframe src="http://localhost:1000/" style="display: none"></iframe> </body> <script type="text/javascript"> var ipt = document.querySelector('#ipt') function sub(){ document.querySelector('iframe').contentWindow.postMessage(ipt.value,'*'); cont.innerHTML +='我:'+ ipt.value + '<br>' ipt.value = '' } window.addEventListener('message',function(e){ if(e.data) cont.innerHTML +='對方:'+ e.data + '<br>' }); </script> </html> 複製代碼
然後一個簡單的聊天就搞定了,試試看。加上websocket的話,還可以非同源聊天呢,其他的可以自己隨意設置了。
從1到2的信息實時傳遞更新就這樣子成功了,反之亦然。
4.MessageChannel
顧名思義,信息通道。允許我們創建一個新的消息通道,並通過它的兩個MessagePort 屬性發送數據m,而且在 Web Worker 中可用。可以控制檯打印,發現有兩個屬性,portl1和port2。一個頁面內嵌與iframe最常用這種方法。
就像一條管道,一邊出一邊進,我們可以給postmessage方法加上第三個參數:
var channel = new MessageChannel(); channel.port1.addEventListener("message", function(e){ window.parent.postMessage(e,'*',[channel.port2]); channel = null; }); 複製代碼
深拷貝
n種不同的對象類型?環引用?怎麼做到特別容易的深拷?
然而真的做到了:
var obj ={a:1,b:2,c:{d:3,e:[{f:1,g:2}]},h:null} obj.h = obj var res new Promise(resolve => { var channel = new MessageChannel(); channel.port2.onmessage = ev => resolve(ev.data); channel.port1.postMessage(obj); }).then(data=>{res = data}) 複製代碼
傳了數據給管道,管道傳回來一個長得一模一樣的數據回來,實現了深拷貝。我們叫他結構化克隆,能處理對象循環依賴和大部分的內置對象。比如postMessage發消息給子窗口或者WebWorker的時候就會經常用到,拿到數據進行處理,但不污染原數據。