postMessage

1. PostMessage

---

여러 도메인 페이지를 하나의 도메인에서 처리하고자 할때 이들간의 통신을 위한 방식, 도메인끼리 메세지를 주고 받아 함수를 실행시키기 위함

• Cross-Origin Resource Sharing, CORS의 해결을 위함
• iframe으로 페이지를 호출했을 때
• open('') 으로 팝업창을 띄운 경우

(1) message를 받을 Listener 등록

-- 메세지를 수신해야 처리할 수 있다...

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

(2) message 보내기

-- params 는 stringType으로 변환하여 보낸다.
-- message는 string type으로 보내고 받기때문에 string message처리 후 변환하여 사용.
-- param값에 따라 도메인간 정의하여 필요한 함수들을 정의할 수 있음

    var params = {
        func_name   : "loginCheck",
        param : {"customer_id" : customerId}
    };
    var data = JSON.stringify(params);
  
    if(opener)
    {
        window.opener.postMessage(data, '*'); // 팝업인 경우 
    }        
    else
    {
        top.postMessage(data, '*');  //iframe인 경우
    }

(3) 메세지 받아 처리하는 함수 postMessageCheck

-- 메세지 내용에따라 함수 실행 및 답장
-- message를 받으면 바로 callback 할 수 있는 함수를 등록할 수 있다.
-- event.source로 발신자에게 바로 답장? 할 수 있다.

    function postMessageCheck(event){
    var json = JSON.parse(event.data)
    switch(json.func_name) {
        case 'loginCheck':
        event.source.postMessage(true, event.origin) //응답
    }
    console.log(event)
    }