摘要：一同源頁面間的跨頁面通信以下各種方式的在線可以戳這里瀏覽器的同源策略在下述的一些跨頁面通信方法中依然存在限制。因此，我們先來看看，在滿足同源策略的情況下，都有哪些技術可以用來實現跨頁面通信。

在瀏覽器中，我們可以同時打開多個Tab頁，每個Tab頁可以粗略理解為一個“獨立”的運行環境，即使是全局對象也不會在多個Tab間共享。然而有些時候，我們希望能在這些“獨立”的Tab頁面之間同步頁面的數據、信息或狀態。

正如下面這個例子：我在列表頁點擊“收藏”后，對應的詳情頁按鈕會自動更新為“已收藏”狀態；類似的，在詳情頁點擊“收藏”后，列表頁中按鈕也會更新。

這就是我們所說的前端跨頁面通信。

你知道哪些跨頁面通信的方式呢？如果不清楚，下面我就帶大家來看看七種跨頁面通信的方式。

以下各種方式的 在線 Demo 可以戳這里 >>

瀏覽器的同源策略在下述的一些跨頁面通信方法中依然存在限制。因此，我們先來看看，在滿足同源策略的情況下，都有哪些技術可以用來實現跨頁面通信。

BroadCast Channel 可以幫我們創建一個用于廣播的通信頻道。當所有頁面都監聽同一頻道的消息時，其中某一個頁面通過它發送的消息就會被其他所有頁面收到。它的API和用法都非常簡單。

下面的方式就可以創建一個標識為AlienZHOU的頻道：

const bc = new BroadcastChannel("AlienZHOU");

各個頁面可以通過onmessage來監聽被廣播的消息：

bc.onmessage = function (e) {
    const data = e.data;
    const text = "[receive] " + data.msg + " —— tab " + data.from;
    console.log("[BroadcastChannel] receive message:", text);
};

要發送消息時只需要調用實例上的postMessage方法即可：

bc.postMessage(mydata);

Broadcast Channel 的具體的使用方式可以看這篇《【3分鐘速覽】前端廣播式通信：Broadcast Channel》。

Service Worker 是一個可以長期運行在后臺的 Worker，能夠實現與頁面的雙向通信。多頁面共享間的 Service Worker 可以共享，將 Service Worker 作為消息的處理中心（中央站）即可實現廣播效果。

Service Worker 也是 PWA 中的核心技術之一，由于本文重點不在 PWA ，因此如果想進一步了解 Service Worker，可以閱讀我之前的文章【PWA學習與實踐】(3) 讓你的WebApp離線可用。

首先，需要在頁面注冊 Service Worker：

/* 頁面邏輯 */
navigator.serviceWorker.register("../util.sw.js").then(function () {
    console.log("Service Worker 注冊成功");
});

其中../util.sw.js是對應的 Service Worker 腳本。Service Worker 本身并不自動具備“廣播通信”的功能，需要我們添加些代碼，將其改造成消息中轉站：

/* ../util.sw.js Service Worker 邏輯 */
self.addEventListener("message", function (e) {
    console.log("service worker receive message", e.data);
    e.waitUntil(
        self.clients.matchAll().then(function (clients) {
            if (!clients || clients.length === 0) {
                return;
            }
            clients.forEach(function (client) {
                client.postMessage(e.data);
            });
        })
    );
});

我們在 Service Worker 中監聽了message事件，獲取頁面（從 Service Worker 的角度叫 client）發送的信息。然后通過self.clients.matchAll()獲取當前注冊了該 Service Worker 的所有頁面，通過調用每個client（即頁面）的postMessage方法，向頁面發送消息。這樣就把從一處（某個Tab頁面）收到的消息通知給了其他頁面。

處理完 Service Worker，我們需要在頁面監聽 Service Worker 發送來的消息：

/* 頁面邏輯 */
navigator.serviceWorker.addEventListener("message", function (e) {
    const data = e.data;
    const text = "[receive] " + data.msg + " —— tab " + data.from;
    console.log("[Service Worker] receive message:", text);
});

最后，當需要同步消息時，可以調用 Service Worker 的postMessage方法：

/* 頁面邏輯 */
navigator.serviceWorker.controller.postMessage(mydata);

LocalStorage 作為前端最常用的本地存儲，大家應該已經非常熟悉了；但StorageEvent這個與它相關的事件有些同學可能會比較陌生。

當 LocalStorage 變化時，會觸發storage事件。利用這個特性，我們可以在發送消息時，把消息寫入到某個 LocalStorage 中；然后在各個頁面內，通過監聽storage事件即可收到通知。

window.addEventListener("storage", function (e) {
    if (e.key === "ctc-msg") {
        const data = JSON.parse(e.newValue);
        const text = "[receive] " + data.msg + " —— tab " + data.from;
        console.log("[Storage I] receive message:", text);
    }
});

在各個頁面添加如上的代碼，即可監聽到 LocalStorage 的變化。當某個頁面需要發送消息時，只需要使用我們熟悉的setItem方法即可：

mydata.st = +(new Date);
window.localStorage.setItem("ctc-msg", JSON.stringify(mydata));

注意，這里有一個細節：我們在mydata上添加了一個取當前毫秒時間戳的.st屬性。這是因為，storage事件只有在值真正改變時才會觸發。舉個例子：

window.localStorage.setItem("test", "123");
window.localStorage.setItem("test", "123");

由于第二次的值"123"與第一次的值相同，所以以上的代碼只會在第一次setItem時觸發storage事件。因此我們通過設置st來保證每次調用時一定會觸發storage事件。

上面我們看到了三種實現跨頁面通信的方式，不論是建立廣播頻道的 Broadcast Channel，還是使用 Service Worker 的消息中轉站，抑或是些 tricky 的storage事件，其都是“廣播模式”：一個頁面將消息通知給一個“中央站”，再由“中央站”通知給各個頁面。

在上面的例子中，這個“中央站”可以是一個 BroadCast Channel 實例、一個 Service Worker 或是 LocalStorage。

下面我們會看到另外兩種跨頁面通信方式，我把它稱為“共享存儲+輪詢模式”。

Shared Worker 是 Worker 家族的另一個成員。普通的 Worker 之間是獨立運行、數據互不相通；而多個 Tab 注冊的 Shared Worker 則可以實現數據共享。

Shared Worker 在實現跨頁面通信時的問題在于，它無法主動通知所有頁面，因此，我們會使用輪詢的方式，來拉取最新的數據。思路如下：

讓 Shared Worker 支持兩種消息。一種是 post，Shared Worker 收到后會將該數據保存下來；另一種是 get，Shared Worker 收到該消息后會將保存的數據通過postMessage傳給注冊它的頁面。也就是讓頁面通過 get 來主動獲取（同步）最新消息。具體實現如下：

首先，我們會在頁面中啟動一個 Shared Worker，啟動方式非常簡單：

// 構造函數的第二個參數是 Shared Worker 名稱，也可以留空
const sharedWorker = new SharedWorker("../util.shared.js", "ctc");

然后，在該 Shared Worker 中支持 get 與 post 形式的消息：

/* ../util.shared.js: Shared Worker 代碼 */
let data = null;
self.addEventListener("connect", function (e) {
    const port = e.ports[0];
    port.addEventListener("message", function (event) {
        // get 指令則返回存儲的消息數據
        if (event.data.get) {
            data && port.postMessage(data);
        }
        // 非 get 指令則存儲該消息數據
        else {
            data = event.data;
        }
    });
    port.start();
});

之后，頁面定時發送 get 指令的消息給 Shared Worker，輪詢最新的消息數據，并在頁面監聽返回信息：

// 定時輪詢，發送 get 指令的消息
setInterval(function () {
    sharedWorker.port.postMessage({get: true});
}, 1000);

// 監聽 get 消息的返回數據
sharedWorker.port.addEventListener("message", (e) => {
    const data = e.data;
    const text = "[receive] " + data.msg + " —— tab " + data.from;
    console.log("[Shared Worker] receive message:", text);
}, false);
sharedWorker.port.start();

最后，當要跨頁面通信時，只需給 Shared Worker postMessage即可：

sharedWorker.port.postMessage(mydata);

注意，如果使用addEventListener來添加 Shared Worker 的消息監聽，需要顯式調用MessagePort.start方法，即上文中的sharedWorker.port.start()；如果使用onmessage綁定監聽則不需要。

除了可以利用 Shared Worker 來共享存儲數據，還可以使用其他一些“全局性”（支持跨頁面）的存儲方案。例如 IndexedDB 或 cookie。

鑒于大家對 cookie 已經很熟悉，加之作為“互聯網最早期的存儲方案之一”，cookie 已經在實際應用中承受了遠多于其設計之初的責任，我們下面會使用 IndexedDB 來實現。

其思路很簡單：與 Shared Worker 方案類似，消息發送方將消息存至 IndexedDB 中；接收方（例如所有頁面）則通過輪詢去獲取最新的信息。在這之前，我們先簡單封裝幾個 IndexedDB 的工具方法。

打開數據庫連接：

function openStore() {
    const storeName = "ctc_aleinzhou";
    return new Promise(function (resolve, reject) {
        if (!("indexedDB" in window)) {
            return reject("don"t support indexedDB");
        }
        const request = indexedDB.open("CTC_DB", 1);
        request.onerror = reject;
        request.onsuccess =  e => resolve(e.target.result);
        request.onupgradeneeded = function (e) {
            const db = e.srcElement.result;
            if (e.oldVersion === 0 && !db.objectStoreNames.contains(storeName)) {
                const store = db.createObjectStore(storeName, {keyPath: "tag"});
                store.createIndex(storeName + "Index", "tag", {unique: false});
            }
        }
    });
}

存儲數據

function saveData(db, data) {
    return new Promise(function (resolve, reject) {
        const STORE_NAME = "ctc_aleinzhou";
        const tx = db.transaction(STORE_NAME, "readwrite");
        const store = tx.objectStore(STORE_NAME);
        const request = store.put({tag: "ctc_data", data});
        request.onsuccess = () => resolve(db);
        request.onerror = reject;
    });
}

查詢/讀取數據

function query(db) {
    const STORE_NAME = "ctc_aleinzhou";
    return new Promise(function (resolve, reject) {
        try {
            const tx = db.transaction(STORE_NAME, "readonly");
            const store = tx.objectStore(STORE_NAME);
            const dbRequest = store.get("ctc_data");
            dbRequest.onsuccess = e => resolve(e.target.result);
            dbRequest.onerror = reject;
        }
        catch (err) {
            reject(err);
        }
    });
}

剩下的工作就非常簡單了。首先打開數據連接，并初始化數據：

openStore().then(db => saveData(db, null))

對于消息讀取，可以在連接與初始化后輪詢：

openStore().then(db => saveData(db, null)).then(function (db) {
    setInterval(function () {
        query(db).then(function (res) {
            if (!res || !res.data) {
                return;
            }
            const data = res.data;
            const text = "[receive] " + data.msg + " —— tab " + data.from;
            console.log("[Storage I] receive message:", text);
        });
    }, 1000);
});

最后，要發送消息時，只需向 IndexedDB 存儲數據即可：

openStore().then(db => saveData(db, null)).then(function (db) {
    // …… 省略上面的輪詢代碼
    // 觸發 saveData 的方法可以放在用戶操作的事件監聽內
    saveData(db, mydata);
});

在“廣播模式”外，我們又了解了“共享存儲+長輪詢”這種模式。也許你會認為長輪詢沒有監聽模式優雅，但實際上，有些時候使用“共享存儲”的形式時，不一定要搭配長輪詢。

例如，在多 Tab 場景下，我們可能會離開 Tab A 到另一個 Tab B 中操作；過了一會我們從 Tab B 切換回 Tab A 時，希望將之前在 Tab B 中的操作的信息同步回來。這時候，其實只用在 Tab A 中監聽visibilitychange這樣的事件，來做一次信息同步即可。

下面，我會再介紹一種通信方式，我把它稱為“口口相傳”模式。

當我們使用window.open打開頁面時，方法會返回一個被打開頁面window的引用。而在未顯示指定noopener時，被打開的頁面可以通過window.opener獲取到打開它的頁面的引用 —— 通過這種方式我們就將這些頁面建立起了聯系（一種樹形結構）。

首先，我們把window.open打開的頁面的window對象收集起來：

let childWins = [];
document.getElementById("btn").addEventListener("click", function () {
    const win = window.open("./some/sample");
    childWins.push(win);
});

然后，當我們需要發送消息的時候，作為消息的發起方，一個頁面需要同時通知它打開的頁面與打開它的頁面：

// 過濾掉已經關閉的窗口
childWins = childWins.filter(w => !w.closed);
if (childWins.length > 0) {
    mydata.fromOpenner = false;
    childWins.forEach(w => w.postMessage(mydata));
}
if (window.opener && !window.opener.closed) {
    mydata.fromOpenner = true;
    window.opener.postMessage(mydata);
}

注意，我這里先用.closed屬性過濾掉已經被關閉的 Tab 窗口。這樣，作為消息發送方的任務就完成了。下面看看，作為消息接收方，它需要做什么。

此時，一個收到消息的頁面就不能那么自私了，除了展示收到的消息，它還需要將消息再傳遞給它所“知道的人”（打開與被它打開的頁面）:

需要注意的是，我這里通過判斷消息來源，避免將消息回傳給發送方，防止消息在兩者間死循環的傳遞。（該方案會有些其他小問題，實際中可以進一步優化）

window.addEventListener("message", function (e) {
    const data = e.data;
    const text = "[receive] " + data.msg + " —— tab " + data.from;
    console.log("[Cross-document Messaging] receive message:", text);
    // 避免消息回傳
    if (window.opener && !window.opener.closed && data.fromOpenner) {
        window.opener.postMessage(data);
    }
    // 過濾掉已經關閉的窗口
    childWins = childWins.filter(w => !w.closed);
    // 避免消息回傳
    if (childWins && !data.fromOpenner) {
        childWins.forEach(w => w.postMessage(data));
    }
});

這樣，每個節點（頁面）都肩負起了傳遞消息的責任，也就是我說的“口口相傳”，而消息就在這個樹狀結構中流轉了起來。

顯然，“口口相傳”的模式存在一個問題：如果頁面不是通過在另一個頁面內的window.open打開的（例如直接在地址欄輸入，或從其他網站鏈接過來），這個聯系就被打破了。

除了上面這六個常見方法，其實還有一種（第七種）做法是通過 WebSocket 這類的“服務器推”技術來進行同步。這好比將我們的“中央站”從前端移到了后端。

關于 WebSocket 與其他“服務器推”技術，不了解的同學可以閱讀這篇《各類“服務器推”技術原理與實例（Polling/COMET/SSE/WebSocket）》

此外，我還針對以上各種方式寫了一個 在線演示的 Demo >>

上面我們介紹了七種前端跨頁面通信的方法，但它們大都受到同源策略的限制。然而有時候，我們有兩個不同域名的產品線，也希望它們下面的所有頁面之間能無障礙地通信。那該怎么辦呢？

要實現該功能，可以使用一個用戶不可見的 iframe 作為“橋”。由于 iframe 與父頁面間可以通過指定origin來忽略同源限制，因此可以在每個頁面中嵌入一個 iframe （例如：http://sample.com/bridge.html），而這些 iframe 由于使用的是一個 url，因此屬于同源頁面，其通信方式可以復用上面第一部分提到的各種方式。

頁面與 iframe 通信非常簡單，首先需要在頁面中監聽 iframe 發來的消息，做相應的業務處理：

/* 業務頁面代碼 */
window.addEventListener("message", function (e) {
    // …… do something
});

然后，當頁面要與其他的同源或非同源頁面通信時，會先給 iframe 發送消息：

/* 業務頁面代碼 */
window.frames[0].window.postMessage(mydata, "*");

其中為了簡便此處將postMessage的第二個參數設為了"*"，你也可以設為 iframe 的 URL。iframe 收到消息后，會使用某種跨頁面消息通信技術在所有 iframe 間同步消息，例如下面使用的 Broadcast Channel：

/* iframe 內代碼 */
const bc = new BroadcastChannel("AlienZHOU");
// 收到來自頁面的消息后，在 iframe 間進行廣播
window.addEventListener("message", function (e) {
    bc.postMessage(e.data);
});    

其他 iframe 收到通知后，則會將該消息同步給所屬的頁面：

/* iframe 內代碼 */
// 對于收到的（iframe）廣播消息，通知給所屬的業務頁面
bc.onmessage = function (e) {
    window.parent.postMessage(e.data, "*");
};

下圖就是使用 iframe 作為“橋”的非同源頁面間通信模式圖。

其中“同源跨域通信方案”可以使用文章第一部分提到的某種技術。

今天和大家分享了一下跨頁面通信的各種方式。

對于同源頁面，常見的方式包括：

廣播模式：Broadcast Channe / Service Worker / LocalStorage + StorageEvent

共享存儲模式：Shared Worker / IndexedDB / cookie

口口相傳模式：window.open + window.opener

基于服務端：Websocket / Comet / SSE 等

而對于非同源頁面，則可以通過嵌入同源 iframe 作為“橋”，將非同源頁面通信轉換為同源頁面通信。

本文在分享的同時，也是為了拋轉引玉。如果你有什么其他想法，歡迎一起討論，提出你的見解和想法~

對文章感興趣的同學歡迎關注 我的博客 >> https://github.com/alienzhou/blog