[解決済み] 文字列からWeb Workerを作成する方法

質問

文字列（POST リクエストで提供される）から Web ワーカーを作成するにはどうすればよいですか？

私が思いつく方法の1つは、サーバーの応答から data-URI を作成し、それを Worker コンストラクタに渡すことですが、一部のブラウザは同じ起源ポリシーのため、これを許可しないと聞いたことがあります。

MDN では、データ URI のオリジン ポリシーに関する不明確な点として :

注意: Worker コンストラクタのパラメータとして渡される URI は、same-origin ポリシーに従わなければなりません。Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0) 以降では、データ URI を Worker の有効なスクリプトとして許可しています。他のブラウザは同意しないかもしれません。

また、次のような投稿もあります。 で議論しています。 .

どのように解決するのですか？

概要

• blob: Chrome 8+、Firefox 6+、Safari 6.0+、Opera 15+ の場合。
• data:application/javascript Opera 10.60 - 12 用
• eval それ以外 (IE 10 以上)

URL.createObjectURL(<Blob blob>) は、文字列から Web Worker を作成するために使用できます。blob の作成には BlobBuilder API ^非推奨 または Blob コンストラクタ .

デモです。 http://jsfiddle.net/uqcFM/49/

// URL.createObjectURL
window.URL = window.URL || window.webkitURL;

// "Server response", used in all examples
var response = "self.onmessage=function(e){postMessage('Worker: '+e.data);}";

var blob;
try {
    blob = new Blob([response], {type: 'application/javascript'});
} catch (e) { // Backwards-compatibility
    window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
    blob = new BlobBuilder();
    blob.append(response);
    blob = blob.getBlob();
}
var worker = new Worker(URL.createObjectURL(blob));

// Test, used in all examples:
worker.onmessage = function(e) {
    alert('Response: ' + e.data);
};
worker.postMessage('Test');

互換性

ウェブ ワーカーは以下のブラウザでサポートされています。 ^ソース :

• クローム 3
• Firefox 3.5
• IE 10
• オペラ 10.60
• サファリ 4

このメソッドのサポートは Blob API と URL.createObjectUrl メソッドを使用します。 Blob 互換性 :

• Chrome 8+ ( WebKitBlobBuilder ), 20+ ( Blob コンストラクタ)
• Firefox 6+ ( MozBlobBuilder ), 13+ ( Blob コンストラクタ)
• Safari 6+ ( Blob コンストラクタ)

IE10では MSBlobBuilder と URL.createObjectURL . しかし、Web Worker の作成は blob: -URL から Web Worker を作成しようとすると、SecurityError がスローされます。

Opera 12 は URL APIを使用しています。一部のユーザーは、偽バージョンの URL オブジェクトの偽バージョンを持っている場合があります。 のこのハックは browser.js .

フォールバック 1: data-URI

Opera では、data-URI を Worker コンストラクタの引数としてサポートしています。注意: 忘れてはならないのは 特殊文字をエスケープする (例えば # と % ).

// response as defined in the first example
var worker = new Worker('data:application/javascript,' +
                        encodeURIComponent(response) );
// ... Test as defined in the first example

デモ http://jsfiddle.net/uqcFM/37/

フォールバック 2: 評価

eval は、Safari (<6) および IE 10 のフォールバックとして使用することができます。

// Worker-helper.js
self.onmessage = function(e) {
    self.onmessage = null; // Clean-up
    eval(e.data);
};
// Usage:
var worker = new Worker('Worker-helper.js');
// `response` as defined in the first example
worker.postMessage(response);
// .. Test as defined in the first example