通常情況下,Worker 載入的是一個單獨的 JavaScript 腳本檔案,但是也可以載入與主線程在同一個網頁的代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同頁面的 Web Worker</title>
</head>
<body>
<script type="app/worker" id="worker">
//注意必須指定<script>标簽的type屬性是一個浏覽器不認識的值
onmessage = function(event) {
console.log("收到主線程的資料:", event);
postMessage("done!");
}
</script>
<script>
var blob = new Blob([document.querySelector("#worker").textContent]);
var url = window.URL.createObjectURL(blob);
var worker = new Worker(url);
worker.onmessage = function(event) {
console.log("收到worker的資料:", event);
worker.terminate();
};
worker.postMessage("start");
</script>
</body>
</html>
上面代碼中,先将嵌入網頁的腳本代碼,轉成一個二進制對象,然後為這個二進制對象生成 URL,再讓 Worker 加載這個 URL。這樣就做到了,主線程和 Worker 的代碼都在同一個網頁上面。