Forked from romannurik/inline_worker_with_fallback.html
Last active
December 19, 2020 21:15
-
-
Save Fil/eeac85f83bbc682a4f2d to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 Blob or 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 Blob = window.Blob; | |
var URL = (window.URL || window.webkitURL); | |
var Worker = window.Worker; | |
if (URL && (Blob || BlobBuilder) && Worker) { | |
// Blo or BlobBuilder, Worker, and window.URL.createObjectURL are all available, | |
// so we can use inline workers. | |
if (Blob) { | |
var bb = new Blob([js]); | |
} else { | |
var bb = new BlobBuilder(); | |
bb.append(js); | |
bb = bb.getBlob(); | |
} | |
var worker = new Worker(URL.createObjectURL(bb)); | |
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment