카테고리 없음

window.postMessage()

deo2kim 2021. 7. 2. 08:30
반응형

다른 윈도우와 통신하는 방법.

  • otherWindow.postMessage(message, targetOrigin, [transfer])
  • message: 보낼 데이터, 데이터는 스트링 형태, JSON.stringfy로 보내고 JSON.parse 로 받자 (x)
    JSON 형태도 가능하다. 
  • targetOrigin: 예를 들어, http://example.com/abc/def 라는 곳에 보낸다.
  • 그렇다면 targetOrigin을 http://example.com로 설정해야 한다.
  • 만약 * 로 설정하게 된다면 targetOrigin을 확인하지 않고 보내지만 보안에 좋지 않다.

 

보낼 때

window.parent.postMessage(my_data, '*')

 

받을 때

window.addeventListener("message", function(e) {
    data = e.data
    /*
    e의 내부 프로퍼티는 다음과 같다.
    data: [String, JSON], 전송된 메시지,
    origin: [String], 메시지를 보낸 도메인 - 도메인 검증,
    source: [Object], 메시지를 보낸 타겟 - 답장 보내기
    */
})
반응형