Postmessage 를 이용한 데이타 통신

postmessage 부모창에서 자식창(팝업창)으로 데이타를 보낼 수 있는 유용한 방식입니다.
부모창에서는 Postmessage를 이용하여 데이타를 보내고 자식창에서는 addEventListener를 이용하여 데이타를 수신하는 방식인데 Angular에서의 Subject 등을 활용한 데이타 통신과 유사합니다.

• 부모창

부모창에서는 팝업창을 열고 그 자식창에 postMessage 를 이용하여 데이타를 전송

<button onclick="openWindow()">Open</button>
<button onclick="add()">Add</button>
<button onclick="subtract()">Subtract</button>

<script>
  let target
  function openWindow() {
    target = open('./child.html', 'Display', 'popup')
  }

  function add() {
    target.postMessage({type: 'add', 'message': 'OK'})
  }

  function subtract() {
    target.postMessage({type: 'subtract', 'message': 'Fail'})
  }
</script>

• 자식창

자식창에서는 addEventListener를 이용하여 데이타를 수신

<h1>0</h1>

<script>
  const viewEl = document.querySelector('h1')
  let count = 0
  function updateCount(count) {
    viewEl.textContent = count
  }

  window.addEventListener('message', (message) => {
    console.log(message.data);
    if (message.data.type === 'add') {
      updateCount(++count)
    } else {
      updateCount(--count)
    }
    console.log(message.data.message )
  })
</script>