参考:The Basics of Web Workers - HTML5 Rocks
こちらの参考で知ったので、そのまま試してみたという内容になります。よろしくお願いいたします。
index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Document</title>
<script id="worker1" type="javascript/worker">
self.addEventListener("message", e => {
self.postMessage(`${e.data} from worker!`);
});
</script>
<script>
const blob = new Blob([document.querySelector('#worker1').textContent]);
const worker = new Worker(window.URL.createObjectURL(blob));
worker.addEventListener("message", e => {
console.log("Received: " + e.data);
});
worker.postMessage("hello");
</script>
workerファイルを別ファイルにすることなく実行することができました
window.URL.createObjectURL(blob)
でBlobオブジェクトに保存されたデータを参照するためのURL文字列を作成できるので、それを別ファイル扱いにして読み込めるらしいです。
const blob = new Blob([document.querySelector('#worker1').textContent]);
console.log(window.URL.createObjectURL(blob)); // "blob:http://127.0.0.1:8000/a9a7fcfe-5952-49f1-a088-1835a6d0e872"
以上です。