PostMessage 사용하기

부모창이 자식창을 띄우고, 서로 통신하고자 할 때 postmessage를 쓴다

 

사용법

(부모창에서 팝업을 띄웠을 경우를 가정)

window.open("http://www.sample.com","sample","width=500px")

 

부모창에서 이벤트리스너를 추가한다

function receiveMessage(event)
{
  if (event.origin !== "https://{자식창.com}") return
  // 특정 자식창만 허용
  console.log(event.data.log)
  }
}

window.addEventListener("message", receiveMessage, false);
// type :"message"
// listener : receiveMessage
// option : false

 

자식창에서 postmessage로 통신한다

let data = {log:"success"}
window.opener.postMessage(data,"https://부모창.com")
// data를 receiveMessage에서 event.data로 가져옴

 

Postmessage vs 부모창 직접 호출

브라우저 정책에 따라 자식창에서 일부 부모창을 직접 조작할 수 있는 함수가 존재하긴 합니다

(i.e. window.opener.location.href)

하지만 부모창에 정의된 함수를 직접 호출하는 것은 크로스 도메인 정책에 의해 차단됩니다