Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
An example of using simple inline Web Workers with a fallback for browsers that can't support this technique.
<!DOCTYPE html>
<html>
<!--
Copyright 2011 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<body>
<script type="javascript/worker">
self['onmessage'] = function(event) {
postMessage('Hello, ' + event.data.name + '!');
};
</script>
<script>
/**
* Helper method for running inline Web Workers, if the browser can support
* them. If the browser doesn't support inline Web Workers, run the script
* on the main thread, with this function body's scope, using eval. Browsers
* must provide BlobBuilder, URL.createObjectURL, and Worker support to use
* inline Web Workers. Most features such as importScripts() are not
* currently supported, so this only works for basic workers.
* @param {String} js The inline Web Worker Javascript code to run. This code
* must use 'self' and not 'this' as the global context variable.
* @param {Object} params The parameters object to pass to the worker.
* Equivalent to calling Worker.postMessage(params);
* @param {Function} callback The callback to run when the worker calls
* postMessage. Equivalent to adding a 'message' event listener on a
* Worker object and running callback(event.data);
*/
function runWorkerJs(js, params, callback) {
var BlobBuilder = (window.BlobBuilder || window.WebKitBlobBuilder);
var URL = (window.URL || window.webkitURL);
var Worker = window.Worker;
if (URL && BlobBuilder && Worker) {
// BlobBuilder, Worker, and window.URL.createObjectURL are all available,
// so we can use inline workers.
var bb = new BlobBuilder();
bb.append(js);
var worker = new Worker(URL.createObjectURL(bb.getBlob()));
worker.onmessage = function(event) {
callback(event.data);
};
worker.postMessage(params);
} else {
// We can't use inline workers, so run the worker JS on the main thread.
(function() {
var __DUMMY_OBJECT__ = {};
// Proxy to Worker.onmessage
var postMessage = function(result) {
callback(result);
};
// Bind the worker to this dummy object. The worker will run
// in this scope.
eval('var self=__DUMMY_OBJECT__;\n' + js);
// Proxy to Worker.postMessage
__DUMMY_OBJECT__.onmessage({
data: params
});
})();
}
}
runWorkerJs(
document.querySelector('[type="javascript/worker"]').textContent,
{ name: 'Bob' },
function(result) {
document.body.innerHTML = result;
});
</script>
</body>
</html>
@joemccann
Copy link

joemccann commented Nov 12, 2011

Brilliant. Was just what I was looking for.

@nigilan
Copy link

nigilan commented Jun 13, 2012

nice one .. tnx

@Fil
Copy link

Fil commented Apr 11, 2015

Thanks. I forked it to use Blob instead of BlobBuilder: https://gist.github.com/Fil/eeac85f83bbc682a4f2d

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment