romannurik · May 24, 2011 19:16 · joemccann · Nov 12, 2011 · nigilan · Jun 13, 2012
diff --git a/inline_worker_with_fallback.html b/inline_worker_with_fallback.html
 <!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>
	<!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>