摘要：目標(biāo)當(dāng)前頁面需要與當(dāng)前瀏覽器已打開的的某個(gè)頁通信，完成某些交互。這種方式性能極其低下，需要通信兩方不停的監(jiān)聽某項(xiàng)的變化，及其浪費(fèi)事件隊(duì)列處理效率。至此，的消息走通了所有鏈路，成功抵達(dá)。

當(dāng)前頁面需要與當(dāng)前瀏覽器已打開的的某個(gè)tab頁通信，完成某些交互。其中，與當(dāng)前頁面待通信的tab頁可以是與當(dāng)前頁面同域（相同的協(xié)議、域名和端口），也可以是跨域的。

要實(shí)現(xiàn)這個(gè)特殊的功能，單單使用HTML5的相關(guān)特性是無法完成的，需要有更加巧妙的設(shè)計(jì)。

現(xiàn)在我們發(fā)現(xiàn)下思維，假設(shè)多種場(chǎng)景下的解決方案，最終尋找通用解。

兩個(gè)需要交互的tab頁面具有依賴關(guān)系。

如 A頁面中通過JavaScript的window.open打開B頁面，或者B頁面通過iframe嵌入至A頁面，此種情形最簡(jiǎn)單，可以通過HTML5的 window.postMessage API完成通信，由于postMessage函數(shù)是綁定在 window 全局對(duì)象下，因此通信的頁面中必須有一個(gè)頁面（如A頁面）可以獲取另一個(gè)頁面（如B頁面）的window對(duì)象，這樣才可以完成單向通信；B頁面無需獲取A頁面的window對(duì)象，如果需要B頁面對(duì)A頁面的通信，只需要在B頁面?zhèn)陕爉essage事件，獲取事件中傳遞的source對(duì)象，該對(duì)象即為A頁面window對(duì)象的引用：

B頁面

window.addEventListner("message",(e)=>{
    let {data,source,origin} = e;
    source.postMessage("message echo","/");
});

postMessage的第一個(gè)參數(shù)為消息實(shí)體，它是一個(gè)結(jié)構(gòu)化對(duì)象，即可以通過“JSON.stringify和JSON.parse”函數(shù)還原的對(duì)象；第二個(gè)參數(shù)為消息發(fā)送范圍選擇器，設(shè)置為“/”意味著只發(fā)送消息給同源的頁面，設(shè)置為“*”則發(fā)送全部頁面。

兩個(gè)打開的頁面屬于同源范疇。

若要實(shí)現(xiàn)兩個(gè)互不相關(guān)的通源tab頁面通信，可以使用一種比較巧妙的方式：localstorage。localStorage的存儲(chǔ)遵循同源策略，因此同源的兩個(gè)tab頁面可以通過這種共享localStorage的方式實(shí)現(xiàn)通信，通過約定localStorage的某一個(gè)itemName，基于該key值的內(nèi)容作為“共享硬盤”方式通信。

不過，如果單純使用localStorage存儲(chǔ)做通信方式會(huì)遇到一個(gè)問題，就是兩個(gè)頁面把握不準(zhǔn)通信時(shí)機(jī)，如果A頁面此刻需要發(fā)送給B頁面一條消息“hello B”，它會(huì)設(shè)置localStorage.setItem("message","hello B")，并且采用setTimeout輪訓(xùn)等待B的消息；而B此刻也同樣使用setTimeout輪訓(xùn)等待localStorage的message項(xiàng)的變化，當(dāng)獲取到"message"字段時(shí)，便取出消息"hello B"。B如果要發(fā)消息給A，仍然采用同樣套路。

這種方式性能極其低下，需要通信兩方不停的監(jiān)聽localStorage某項(xiàng)的變化，及其浪費(fèi)事件隊(duì)列處理效率。幸好，HTML5提供了storage事件，通過window對(duì)象偵聽storage事件，會(huì)偵聽localStorage對(duì)象的變化事件（包括item的添加、修改和刪除）。因此，通過事件可以完成高效的通信機(jī)制：

A 頁面

window.addEventListener("storage", function(ev){
    if (ev.key == "message") {
        // removeItem同樣觸發(fā)storage事件，此時(shí)ev.newValue為空
        if(!ev.newValue)
            return;
        var message = JSON.parse(ev.newValue);
        console.log(message);
    }
});

function sendMessage(message){
    localStorage.setItem("message",JSON.stringify(message));
    localStorage.removeItem("message");
}

// 發(fā)送消息給B頁面
sendMessage("this is message from A");

B 頁面

window.addEventListener("storage", function(ev){
    if (ev.key == "message") {
        // removeItem同樣觸發(fā)storage事件，此時(shí)ev.newValue為空
        if(!ev.newValue)
            return;
        var message = JSON.parse(ev.newValue);
        // 發(fā)送消息給A頁面
        sendMessage("message echo from B");
    }
});

function sendMessage(message){
    localStorage.setItem("message",JSON.stringify(message));
    localStorage.removeItem("message");
}

發(fā)送消息采用sendMessage函數(shù)，該函數(shù)序列化消息，設(shè)置為localStorage的message字段值后，刪除該message字段。這樣做的目的是不污染localStorage空間，但是會(huì)造成一個(gè)無傷大雅的反作用，即觸發(fā)兩次storage事件，因此我們?cè)趕torage事件處理函數(shù)中做了if(!ev.newValue) return;判斷。

當(dāng)我們?cè)贏頁面中執(zhí)行sendMessage函數(shù)，其他同源頁面會(huì)觸發(fā)storage事件，而A頁面卻不會(huì)觸發(fā)storage事件；而且連續(xù)發(fā)送兩次相同的消息也只會(huì)觸發(fā)一次storage事件，如果需要解決這種情況，可以在消息體體內(nèi)加入時(shí)間戳：

sendMessage({
    data: "hello world",
    timestamp: Date.now()
});
sendMessage({
    data: "hello world",
    timestamp: Date.now()
});

通過這種方式，可以實(shí)現(xiàn)同源下的兩個(gè)tab頁通信，兼容性

通過caniuse網(wǎng)站查詢storage事件發(fā)現(xiàn)，IE的瀏覽器支持非常的不友好，caniuse使用了“completely wrong”的形容詞來表述這一程度。IE10的storage事件會(huì)在頁面document文檔對(duì)象構(gòu)建完成后觸發(fā)，這在嵌套iframe的頁面中造成諸多問題；IE11的storage Event對(duì)象卻不區(qū)分oldValue和newValue值，它們始終存儲(chǔ)更新后的值

兩個(gè)互不相關(guān)的tab頁面通信。

這種情況才是最急需解決的問題，如何實(shí)現(xiàn)兩個(gè)沒有任何關(guān)系的tab頁面通信，這需要一些技巧，而且需要有同時(shí)修改這兩個(gè)tab頁面的權(quán)限，否則根本不可能實(shí)現(xiàn)這兩個(gè)tab頁的能力。

在上述條件滿足的情況下，我們就可以使用case1 和 case2的技術(shù)完成case 3的需求，這需要我們巧妙的結(jié)合HTML5 postMessage API 和 storage事件實(shí)現(xiàn)這兩個(gè)毫無關(guān)系的tab頁面的連通。為此，我想到了iframe，通過在這兩個(gè)tab頁嵌入同一個(gè)iframe頁實(shí)現(xiàn)“橋接”，最終完成通信：

tab A -----> iframe A[bridge.html]
                     |
                     |
                    |/
             iframe B[bridge.html] ----->  tab B    

單方向的通信原理如上圖所示，tab A中嵌入iframe A，tab B中嵌入iframe B，這兩個(gè)iframe引用相同的頁面“bridge.html”。如果tab A發(fā)消息給tab B，首先tab A通過postMessage消息發(fā)送給iframe A（tab A可以獲取到iframe A的window對(duì)象iframe.contentWindow）；此后iframe A通過storage消息完成與iframe B的通信（由于iframeA 與iframe B同源，因此case 2的通信方式這里可以使用）；最終，iframe B同樣采用postMessage方式發(fā)送消息給tab B（在iframe中通過window.parent引用tab B的window對(duì)象）。至此，tab A的消息走通了所有鏈路，成功抵達(dá)tab B。

反方向發(fā)送消息同樣的道理，這里就不在詳細(xì)說明。接下來到了 talk is cheap，show me the code 環(huán)節(jié)：

tab A:

// 向彈出的tab頁面發(fā)送消息
window.sendMessageToTab = function(data){
    // 由于[#J_bridge]iframe頁面的源文件在vstudio服務(wù)器中，因此postMessage發(fā)向“同源”
    document.querySelector("#J_bridge").contentWindow.postMessage(JSON.stringify(data),"/");
};

// 接收來自 [#J_bridge]iframe的tab消息
window.addEventListener("message",function(e){
    let {data,source,origin}  = e;
    if(!data)
        return;
    try{
        let info = JSON.parse(JSON.parse(data));
        if(info.type == "BSays"){
           console.log("BSay:",info);
        }
    }catch(e){
    } 
});

sendMessageToTab({
    type: "ASays",
    data: "hello world, B"
})

bridge.html

window.addEventListener("storage", function(ev){
    if (ev.key == "message") {
        window.parent.postMessage(ev.newValue,"*");
    }
});

function message_broadcast(message){
    localStorage.setItem("message",JSON.stringify(message));
    localStorage.removeItem("message");
}

window.addEventListener("message",function(e){
    let {data,source,origin}  = e;
    // 接受到父文檔的消息后，廣播給其他的同源頁面
    message_broadcast(data);
});

tab B

window.addEventListener("message",function(e){
    let {data,source,origin}  = e;
    if(!data)
        return;
    let info = JSON.parse(JSON.parse(data));
    if(info.type == "ASays"){
        document.querySelector("#J_bridge").contentWindow.postMessage(JSON.stringify({
            type: "BSays",
            data: "hello world echo from B"
        }),"*");
    }
});

// tab B主動(dòng)發(fā)送消息給tab A
document.querySelector("button").addEventListener("click",function(){
    document.querySelector("#J_bridge").contentWindow.postMessage(JSON.stringify({
        type: "BSays",
        data: "I am B"
    }),"*");
})

至此，通過在tab A和tab B中引入“橋接”功能的iframe[bridge.html]頁面，實(shí)現(xiàn)了兩個(gè)無關(guān)tab頁的雙向通信，這種實(shí)現(xiàn)的技巧性較強(qiáng)。

Communication between tabs or windows