如何从字符串创建Web Worker [英] How to create a Web Worker from a string

问题描述

如何使用字符串创建Web worker（通过POST请求提供）？

How can I use create a Web worker from a string (which is supplied via a POST request)?

我能想到的一种方式，但我是不确定如何实现它，是通过从服务器响应创建一个数据URI，并将其传递给Worker构造函数，但我听说有些浏览器不允许这样做，因为相同的源策略。

One way I can think of, but I'm not sure how to implement it, is by creating a data-URI from the server response, and passing that to the Worker constructor, but I've heard that some browsers don't allow this, because of the same origin policy.

MDN说明围绕数据URI的原始政策的不确定性： / p>

MDN states the uncertainty about the origin policy around data URI's:

注意：作为Worker构造函数的参数传递的URI必须遵循同源策略。目前，浏览器供应商对数据URI是否来源不一致存在分歧; Gecko 10.0（Firefox 10.0 / Thunderbird 10.0）及更高版本确实允许数据URI作为工作人员的有效脚本。其他浏览器可能不同意。

Note: The URI passed as parameter of the Worker constructor must obey the same-origin policy. There is currently disagreement among browsers vendors on whether data URIs are of the same-origin or not; Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0) and later do allow data URIs as a valid script for workers. Other browsers may disagree.

这里还有一篇文章在whatwg上讨论它。

推荐答案

摘要

• blob：适用于Chrome 8 +，Firefox 6 +，Safari 6.0 +，Opera 15 +


• 数据：application / javascript for Opera 10.60 - 12


• eval 否则（IE 10 +）

Summary

• blob: for Chrome 8+, Firefox 6+, Safari 6.0+, Opera 15+
• data:application/javascript for Opera 10.60 - 12
• eval otherwise (IE 10+)

URL.createObjectURL（< Blob blob>） 可用于从字符串创建Web worker。可以使用 BlobBuilder API ^已弃用或 Blob 构造函数。

URL.createObjectURL(<Blob blob>) can be used to create a Web worker from a string. The blob can be created using the BlobBuilder API ^deprecated or the Blob constructor.

演示： 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');

兼容性

支持网络工作者以下浏览器 ^来源 ：

• Chrome 3


• Firefox 3.5


• IE 10


• Opera 10.60


• Safari 4

• Chrome 3
• Firefox 3.5
• IE 10
• Opera 10.60
• Safari 4

此方法的支持基于支持 Blob API和 URL.createObjectUrl 方法。 Blob 兼容性：

This method's support is based on the support of the Blob API and the URL.createObjectUrl method. Blob compatibility:

• Chrome 8+（ WebKitBlobBuilder ），20 +（ Blob 构造函数）


• Firefox 6+（ MozBlobBuilder ），13 +（ Blob 构造函数）


• Safari 6+（ Blob 构造函数）

• Chrome 8+ (WebKitBlobBuilder), 20+ (Blob constructor)
• Firefox 6+ (MozBlobBuilder), 13+ (Blob constructor)
• Safari 6+ (Blob constructor)

IE10支持 MSBlobBuilder 和 URL.createObjectURL 。但是，尝试从 blob： -URL创建Web Worker会引发SecurityError。

IE10 supports MSBlobBuilder and URL.createObjectURL. However, trying to create a Web Worker from a blob:-URL throws a SecurityError.

Opera 12不会支持 URL API。由于 URL 对象版本？ id = 1589432& t = 1367917090& page = 1＃comment13564572rel =noreferrer>此hack in browser.js 。

Opera 12 does not support URL API. Some users may have a fake version of the URL object, thanks to this hack in browser.js.

Opera支持将数据URI作为 Worker的参数构造函数。注意：不要忘记转义特殊字符（例如＃和％）。

Opera supports data-URIs as an argument to the Worker constructor. Note: Do not forget to escape special characters (Such as # and %).

// 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/

eval 可用作Safari（< 6）和IE的后备10。

eval can be used as a fallback for Safari (<6) and 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

这篇关于如何从字符串创建Web Worker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！