No, thank you

Web Workers 를 공부하다 SharedWorker 는 각 스크립트들이 MessagePort 를 통해 데이터 전달을 한다는 것을 알게 되었고 관련하여 공부를 하게 됨

MessagePort 는 MessageChannel 간에 데이터를 전달하고 받을 수 있도록 하는 두 개의 ports 중 한 개를 나타냄.

MessageChannel 생성후 channel.port1 과 channel.port2 를 통해 데이터를 전달하고 받을 수 있음

// main.js
const channel = new MessageChannel();

iframe.addEventListener("load", onLoad);
function onLoad() {
  channel.port1.onmessage = function(e) { 
  }

  iframe.contentWindow.postMessage("Hello", "*", [channel.port2]);
}

// iframe.html
<script>
  window.addEventListener('message', onMessage);
  function onMessage(e) {
    e.ports[0].postMessage('Message Back');
  }
</script>

postMessage() 함수의 세번째 인자 transfer 를 사용하면 객체의 소유권을 수신측에 전달함. 송신 측에서는 더 이상 사용 불가능

function onLoad() { 
  channel.port1.onmessage = function(e) {  
  } 
  iframe.contentWindow.postMessage("Hello One", "*", [channel.port2]);
  iframe.contentWindow.postMessage("Hello Two", "*", [channel.port2]); // Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Port at index 0 is already neutered.
}