☰

別のJavascriptファイルなしでWebワーカーを使用するには？質問する

tag-icon • tag-icon javascript web-worker
別のJavascriptファイルなしでWebワーカーを使用するには？質問する

私の知る限り、Web ワーカーは別の JavaScript ファイルに記述し、次のように呼び出す必要があります。

new Worker('longrunning.js')

クロージャ コンパイラを使用してすべての JavaScript ソース コードを結合して縮小していますが、配布用にワーカーを別々のファイルに保持したくないと思っています。これを実現する方法はありますか?

new Worker(function() {
    //Long-running work here
});

ファーストクラス関数が JavaScript にとって非常に重要であることを考えると、バックグラウンド作業を実行する標準的な方法では、なぜ Web サーバーから別の JavaScript ファイル全体をロードする必要があるのでしょうか。

ベストアンサー1

http://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers

ワーカースクリプトをその場で作成したり、別のワーカーファイルを作成せずに自己完結型ページを作成したりしたい場合はどうすればよいでしょうか。Blob() を使用すると、ワーカーコードへの URL ハンドルを文字列として作成することで、メインロジックと同じ HTML ファイルにワーカーを「インライン」できます。


BLOB インライン ワーカーの完全な例:

<!DOCTYPE html>
<script id="worker1" type="javascript/worker">
  // This script won't be parsed by JS engines because its type is javascript/worker.
  self.onmessage = function(e) {
    self.postMessage('msg from worker');
  };
  // Rest of your worker code goes here.
</script>
<script>
  var blob = new Blob([
    document.querySelector('#worker1').textContent
  ], { type: "text/javascript" })

  // Note: window.webkitURL.createObjectURL() in Chrome 10+.
  var worker = new Worker(window.URL.createObjectURL(blob));
  worker.onmessage = function(e) {
    console.log("Received: " + e.data);
  }
  worker.postMessage("hello"); // Start the worker.
</script>

おすすめ記事