HTML Code
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>postMessage round-trip</title><style>body{font-family:system-ui,sans-serif;margin:0;padding:1.5rem;background:#f8fafc;color:#334155;line-height:1.6}
h1{margin:0 0 .5rem;font-size:1.25rem;color:#0f172a}p{margin:0 0 1rem;max-width:420px}
button{padding:.55rem 1rem;font-size:.9375rem;background:#2563eb;color:#fff;border:none;border-radius:8px;cursor:pointer;margin-right:.5rem;margin-bottom:.5rem}
button:hover{background:#1d4ed8}button.secondary{background:#64748b}
#status,#result{margin-top:1rem;padding:.75rem 1rem;max-width:420px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;font-size:.875rem}
#status.ok{border-left:4px solid #22c55e}#status.err{border-left:4px solid #ef4444}
#tick{font-variant-numeric:tabular-nums;color:#0f172a;font-weight:700}</style></head>
<body>
  <h1>Send and receive messages</h1>
  <p>Click to send <b>5</b>. The worker doubles it and returns <b>10</b>.</p>
  <button type="button" id="runBtn">Send 5 to worker</button>
  <p id="status">Ready.</p>
  <script>
    var statusEl = document.getElementById('status');
    if (typeof Worker === 'undefined') {
      statusEl.textContent = 'Web Workers are not supported in this browser.';
      statusEl.className = 'err';
    } else {
      var code = 'self.onmessage=function(e){postMessage(e.data*2);};';
      var worker = new Worker(URL.createObjectURL(new Blob([code],{type:'application/javascript'})));
      worker.onmessage = function (e) {
        statusEl.textContent = 'Worker sent back: ' + e.data;
        statusEl.className = 'ok';
      };
      document.getElementById('runBtn').onclick = function () {
        statusEl.textContent = 'Waiting...';
        statusEl.className = '';
        worker.postMessage(5);
      };
    }
  </script>
</body></html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
Web Workers — postMessage Round-Trip
