SharedWorker
SharedWorker 介面代表一種特殊的 worker，可以被多個瀏覽上下文（例如多個視窗、iframe 甚至 worker）訪問。它們實現的介面與專用 worker 不同，並且擁有不同的全域性作用域：SharedWorkerGlobalScope。
注意： 如果 SharedWorker 可以被多個瀏覽上下文訪問，那麼所有這些瀏覽上下文必須共享完全相同的源（相同的協議、主機和埠）。
建構函式
-
建立一個共享 Web Worker，它會執行指定 URL 的指令碼。
例項屬性
繼承其父級 EventTarget 的屬性。
-
返回一個
MessagePort物件，用於與共享 worker 通訊和控制它。
事件
error-
當共享 worker 中發生錯誤時觸發。
例項方法
繼承其父級 EventTarget 的方法。
示例
在我們 簡單的共享 worker 示例（執行共享 worker）中，我們有兩個 HTML 頁面，每個頁面都使用一些 JavaScript 來執行簡單的計算。不同的指令碼使用相同的 worker 檔案來執行計算——即使它們的頁面執行在不同的視窗中，它們都可以訪問它。
下面的程式碼片段展示了使用 SharedWorker() 建構函式建立 SharedWorker 物件。兩個指令碼都包含這個
const myWorker = new SharedWorker("worker.js");
注意： 一旦建立了共享 worker，同一源中的任何指令碼都可以獲得對該 worker 的引用並與之通訊。只要共享 worker 的全域性作用域所有者集合（一組 Document 和 WorkerGlobalScope 物件）不為空（例如，如果存在任何持有對其引用的活動頁面，可能是透過 new SharedWorker()），該共享 worker 就會一直存在。有關共享 worker 生命週期的更多資訊，請參閱 HTML 規範的 worker 的生命週期部分。
然後，兩個指令碼都透過使用 SharedWorker.port 屬性建立的 MessagePort 物件來訪問 worker。如果使用 addEventListener 附加了 onmessage 事件，則透過其 start() 方法手動啟動 port。
myWorker.port.start();
當 port 啟動後，兩個指令碼分別使用 port.postMessage() 和 port.onmessage 向 worker 傳送訊息並處理從 worker 傳送來的訊息。
注意： 您可以使用瀏覽器開發者工具來除錯您的 SharedWorker，方法是在瀏覽器的位址列輸入 URL 來訪問開發者工具的 worker 檢查器；例如，在 Chrome 中，URL 是 chrome://inspect/#workers，在 Firefox 中，URL 是 about:debugging#workers。
[first, second].forEach((input) => {
input.onchange = () => {
myWorker.port.postMessage([first.value, second.value]);
console.log("Message posted to worker");
};
});
myWorker.port.onmessage = (e) => {
result1.textContent = e.data;
console.log("Message received from worker");
};
在 worker 內部，我們使用 onconnect 處理程式來連線到上面討論的同一個 port。與該 worker 關聯的 port 在 connect 事件的 ports 屬性中可用——然後我們使用 MessagePort 的 start() 方法來啟動 port，並使用 onmessage 處理程式來處理從主執行緒傳送的訊息。
onconnect = (e) => {
const port = e.ports[0];
port.addEventListener("message", (e) => {
const workerResult = `Result: ${e.data[0] * e.data[1]}`;
port.postMessage(workerResult);
});
port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};
規範
| 規範 |
|---|
| HTML # shared-workers-and-the-sharedworker-interface |
瀏覽器相容性
載入中…