Sangil Jung - humbroll's twitter

예를 들어, 문서 A가 문서 B를 포함하는  object 엘러먼트를 포함하고 있고, 문서 A에 있는 스크립트는 문서 B에 postMessage() 를 호출하면, 엘러먼트에서 메시지 이벤트가 발생한다. 문서 A의 스크립트 코드는 다음과 같을 것이다.

var o = document.getElementsByTagName('object')[0];
o.contentWindow.postMessage('Hello world', 'http://b.example.org/');

들어오는 이벤트들을 위한 이벤트 핸들러를 구현하기 위해, 스크립트는 addEventListener()(혹은 비슷한 메커니즘으로..)을 사용한다. 예를들어 문서 B에 잇는 스크립트는 다음과 같을 것이다.

document.addEventListener('message', receiver, false);
function receiver(e) {
  if (e.origin == 'http://example.com') {
    if (e.data == 'Hello world') {
      e.source.postMessage('Hello', e.origin);
    } else {
      alert(e.data);
    }
  }
}

이 스크립트는 도메인이 받아들이고자 하는 게 맞는지 먼저 검사하고, 메시지를 보고, 사용자에게 보여주거나, 처음 메시지를 보낸 곳으로 다시 메시지를 되돌려 보낸다.