JAVASCRIPT window message 전달

JAVASCRIPT window message 전달

자기 자신의 window 에도 메시지를 전달할 수 있고 iframe 과 부모 페이지 사이에도 메시지로 데이터 전송이 가능하다.

▶ 셀프 윈도우 메시지 처리

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {

alert('message : ' + event.data.msg);

}

window.postMessage({msg:'Hello world!'}, "http://" + window.location.hostname);

▶부모 자식간 메시지 처리

부모 -> 자식

// iframe

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {

alert('message : ' + event.data.msg);

}

// 부모

var w = document.getElementsByTagName('iframe')[0];

w.contentWindow.postMessage({msg:'Hello world!'}, "http://" + window.location.hostname);

자식 -> 부모

// 부모

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {

alert('message : ' + event.data.msg);

}

// 자식

parent.window.postMessage({msg:'Hello world!'}, "http://" + window.location.hostname);

부모 -> window.open 창

// 부모

var w = window.open();

w.postMessage({msg:'Hello world!'}, "http://" + window.location.hostname);

// window.open 창

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {

alert('message : ' + event.data.msg);

}