通常情况下,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 的代码都在同一个网页上面。