HTML5多线程之--同页面的 Web Worker

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章