Web Workerの埋め込み | wbdv [web dev]

　Web Worker APIをひとつのファイルに埋め込んだ．ローカルサーバー等，動いているサーバー上でお試しください．

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Demo - Worker</title>
  <script type="text/js-worker">
    const vl = 'Hello World!';
  </script>
  <script type="text/javascript">
    const lg = (ms) => {
      let ob = document.createDocumentFragment();
      ob.appendChild(document.createTextNode(ms));
      document.querySelector("#log").appendChild(ob);
    }
  </script>
  <script type="text/js-worker">
    onmessage = (ev) => {
      postMessage(vl);
    };
  </script>
  <script type="text/javascript">
  let bb = new Blob(
    Array.prototype.map.call(
      document.querySelectorAll("script[type=\"text\/js-worker\"]")
      , (sr) => { return sr.textContent; }
    )
    ,{ type: "text/javascript" }
  );

  document.worker = new Worker(
    window.URL.createObjectURL(bb)
  );

  document.worker.onmessage = (ev) => {
    lg(`${ev.data}`);
  };

  window.onload = () => {
    document.worker.postMessage("");
  };
</script>
</head>
<body>
  <div id="log"></div>
</body>
</html>