Shared workers- 跨越不同 window、iframe 或 worker處理 script

分享:

要在兩個頁籤(視窗)共用一個 script,我們可以使用 Shared workers 來執行,記得一樣要在 Server 上才能執行,Vscode 的話使用 live server 即可,要使用的話如下面範例:

var worker = new SharedWorker('sw.js');
 //傳送資料到sharedworker中
worker.port.start();
//將資料傳給sw.js
worker.port.postMessage({ "key": "value" });

接收的話像這樣寫:

//接收sharedworker回傳的結果
worker.port.addEventListener("message", function (event) {
    $("#div1").text(event.data);
})

在 sw.js 則是這樣處理資料:

c=0;
self.addEventListener('connect',function(event){
    var port = event.ports[0];
    port.onmessage = function(event){
        c++
        //接收主程式傳過來的資料event.data {"key":"value1"}{"key":"value2"}
        var data = event.data.value + ", 累加的數字:" + c;
        
        //將資料傳回給主程式
        port.postMessage(data);

    }
})