Webworker From Function

This is a copy of the web worker example from https://github.com/mdn/simple-web-worker with the exception that it creates the worker from a locally defined function instead of a separate file.

by chaddotson

HTML

<body>
    <h1>Web<br>Workers<br>basic<br>example</h1>

    <div class="controls" tabindex="0">

    <form>
      <div>
        <label for="number1">Multiply number 1: </label>    
        <input type="text" id="number1" value="0">
      </div>
      <div>
        <label for="number2">Multiply number 2: </label>   
        <input type="text" id="number2" value="0">
      </div>
    </form>

    <p class="result">Result: 0</p>

    </div>
  </body>

CSS

html {
	background-color: #7D2663;
	font-family: sans-serif;
}

h1 {
	margin: 0;
	font-size: 15vw;
	letter-spacing: -0.2rem;
	position: absolute;
	top: 0;
	z-index: -1;
}

p {
	margin: 0;
}

.controls {
	padding: 4vw;
	width: 75%;
	margin: 10vw auto;
	background-color: rgba(255,255,255,0.7);
	border: 5px solid black;
	opacity: 0.3;
	transition: 1s all;
}

.controls:hover, .controls:focus {
  opacity: 1;
}

.controls label, .controls p, .controls input {
	font-size: 3vw;
}

.controls div {
  padding-bottom: 1rem;
}

JavaScript

// Modified from https://github.com/mdn/simple-web-worker

var first = document.querySelector('#number1');
var second = document.querySelector('#number2');

var result = document.querySelector('.result');

if (window.Worker) {
    
    var workerScript = function () {
        console.log("starting worker...");

    	this.onmessage = function(e) {
            console.log('Message received from main script');
      	    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
            console.log('Posting message back to main script');
      	    postMessage(workerResult);
    	}
    }
    
    var workerScriptIifeSource = workerScript.toSource() + "()";
    
    var workerScriptBlob = new Blob([workerScriptIifeSource], {type: 'application/javascript'});
  
    //check if Browser supports the Worker api.
	// Requires script name as input
	//var myWorker = new Worker("worker.js");

    // instead create the worker using a url blob created from a function in the local scope.
	// Get the source of the function we want to use and make the source where it will be interpreted as an iife.
	var workerScriptIifeSource = workerScript.toSource() + "()";

	// Create a blob of the script source, specify it as JavaScript.
	var workerScriptBlob = new Blob([workerScriptIifeSource], {type: 'application/javascript'});

	// Create a worker by creating a url from the blob.
	var myWorker = new Worker(window.URL.createObjectURL(workerScriptBlob));

	second.onchange = function() {
	  myWorker.postMessage([first.value,second.value]);
	  console.log('Message posted to worker');
	};

	myWorker.onmessage = function(e) {
		result.textContent = e.data;
		console.log('Message received from worker');
	};
}












/*



function say() {
    console.log("Hello");
}

var workerScript = function () {
    console.log("executing");

    this.onmessage = function(e) {
      console.log('Message received from main script');
      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
     ...