<script>
function init() {
if (!Modernizr.webworkers) {alert('Lamento, seu navegador não suporta Web Workers')}
var campoMensagem,btnLimpar,btnIniciarWorker,campoResultado;
campoMensagem = document.getElementsByTagName('input')[0];
btnLimpar = document.getElementsByTagName('button')[0];
btnIniciarWorker = document.getElementsByTagName('button')[1];
campoResultado = document.getElementById('msg');
function comunicarWorker() {
if(campoMensagem.value == '') {
alert('Digite sua mensagem para o Worker');
return;
}
campoResultado.style.display = 'block';
var textoMensagem = campoMensagem.value;
var worker = new Worker('exemplo2.js');
worker.postMessage(textoMensagem);
worker.onmessage = function (e) {
campoResultado.innerHTML = e.data;
};
};
if(window.addEventListener) {
btnIniciarWorker.addEventListener('click', comunicarWorker, false);
btnLimpar.addEventListener('click', function() {
campoMensagem.value = '';
campoResultado.style.display = 'none';
}, false);
} else {
btnLimpar.attachEvent('onclick', function() {
campoMensagem.value = '';
campoResultado.style.display = 'none';
});
btnIniciarWorker.attachEvent('onclick', comunicarWorker);
};
}
window.onload = init;
</script>
// xxxxxxxxxxxxx Tarefa do Worker - arquivo exemplo2.js xxxxxxxxxxxxx
onmessage = function(e) {
var mensagemRecebida = e.data;
var mensagemRetornada = 'O Worker acusa o recebimento da seguinte mensagem:<br><span class="dest">'+ mensagemRecebida +'</span>';
postMessage(mensagemRetornada);
}
HTML
<section>
<h3>Comunicação da página com o Worker e vice-versa</h3>
<p><label>Entre uma mensagem:<br><input type=text></label>
<button type=button>Limpar</button></p>
<p><button type=button>Iniciar Worker</button>
<p id="msg"></p>
</section>