🐸iframe에서 부모창 함수 호출

 

iframe 에서 부모창의 함수를 호출해 전체 페이지를 이동시켜야 했다.

 

코드는 다음과 같다.

 

iframe

창으로 이동하겠냐는 confirm 창을 띄우고, 값이 true 라면 부모창의 함수를 호출한다.

const ans = confirm('[] ~~~~창으로 이동하시겠습니까?');
if(ans) {
    window.parent.postMessage(
        // 전달할 data (부모창에서 호출할 로직명 etc)
        { functionName : 'moveTo~~~~Page',
          deviceCode   : '값1',
          searchDate   : '값2'
        }
        // 부모창의 주소(복수 개로 쓸 수 없음)
        , 'http://localhost/~~~~~~'
        // 모든 도메인에 대하여 허용 (보안상 주의 필요)
        //, '*' 
    );
}

 

 

 

부모창

eventLinstener를 추가해서 iframe에서 넘어온 값을 기준으로 페이지를 이동시키면 된다.

// iframe에서 클릭 event 발생 시, 페이지(->~~~~.html) 이동
window.addEventListener( 'message', (e) => {

    // 페이지 이동
    if(e.data.functionName === 'moveTo~~~~Page') {

        const searchDate = e.data.searchDate; 
        const deviceCode = e.data.deviceCode; 

        window.location.href = `/~~~~?date=${searchDate}&code=${deviceCode}`;
    }
});