今日、私は別の挑戦に直面する機会がありました。 つまり、別のドメインのjsファイルからワーカーを作成するという問題があります。これは現在、仕様で禁止されています。
物語は、サードパーティのライブラリを使用するChess.com用の小さなGoogle Chrome拡張機能の作成から始まりました。 残念ながら、このライブラリはワーカーとしてのみ機能することが判明しました。
問題は、Chrome自体にページコンテキストからのファイルの取得に関する特定の制限があることです。 ページにサードパーティのJavaScriptコードを導入できますが、それ以上はできません。 そしてこれは、アドオンのコードが実行されたドメインからのみページにワーカーを取得できることを意味します。 つまり、私の場合はChess.comです。 もちろん、いつかChess.comバトルサーバーにアクセスできると期待されますが、今日は動作するようにしたいと思います。 私はそれをググる必要がありました。
幸いなことに、html5rocksの記事は、Blobを介したインラインワーカーの作成という解決策を見つけるのに役立ちました。 詳細はこちら 。 簡単に言えば、任意のテキスト行を作成して、いわゆるBlobに
たとえば、次のように(html5rocksから取得):
var blob = new Blob([ "onmessage = function(e) { postMessage('msg from worker'); }"]); // Obtain a blob URL reference to our worker 'file'. var blobURL = window.URL.createObjectURL(blob); var worker = new Worker(blobURL); worker.onmessage = function(e) { // e.data == 'msg from worker' }; worker.postMessage(); // Start the worker.
ここでは、ブラウザビューでは「like-to-file」であるBlobオブジェクトが作成されており、ソーステキストがそこに書き込まれていることがわかります。
しかし、任意のテキストからBlobを作成できる場合、別のサイトから任意のテキストをダウンロードして、それをBlobにプッシュできますか?
では、試してみましょう:
$.get("https://example.com/js/worker.js", {}, function (workerCode) { var blob = new Blob([workerCode], {type : 'javascript/worker'}); var worker = new Worker(window.URL.createObjectURL(blob)); } );
動作します。 つまり、実際には、ファイルが1つ以上のドメインに属しているかどうかに関係なく、外部ファイルをページにアップロードしてワーカーとして実行できます。 ええ、その日です。
結論として、タイトルのセンセーションにもかかわらず、原則として、このトリックは驚くことではありません。 同じことは、シングルスレッドのJavaScriptコードに対しても実行できます。テキストとしてロードし、evalを介して呼び出します。 この場合、Web WorkersでCORSをサポートするというゆるやかな決定だけが不明確なままです。