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的時候就會經常用到，拿到數據進行處理，但不污染原數據。