iframe사이트와 parent사이트간 메세지 전송 방법 (서로 도메인이 다른 경우)

부모 페이지와 iframe의 도메인이 서로 다르다면 보안상의 이유로 통신을 할 수 없다.

통신을 할 수 없다는 의미는 window.parent와 같이 부모창의 DOM에 접근할 수 없다는 것이다.

however, for security reasons, the parent page could not communicate with the child Iframe, nor could the child communicate with the parent.

허나, postMessage를 이용하면 parent -> child 또는 child -> parent로의 메세지 전송을 할 수 있다.

child -> parent 로의 메세지 전송 방법에 대해서 알아보면 다음과 같다.

1. parent 페이지가 로딩된다.

2. parent 페이지의 DOM 생성이 완료되면 이벤트 리스너를 등록한다.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

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

});

function processFn(event) {

var bla = event.data;

alert(bla);

}

function sendChildMessage() {

document.getElementById("ifr").contentWindow.postMessage('sent message from parent.html', '*');

}

</script>

<iframe name="ifr" id="ifr" width="50" height="50" frameborder="0" scrolling="no" src="child.html"></iframe>

<input type="button" value="send child message" onclick="sendChildMessage();">

3. child 페이지의 DOM 생성이 완료되면 parent로 메세지를 전송한다.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

            window.parent.postMessage("sent message from child.html", "*");   // '*' on any domain        

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

});

    

    function receiveParentMessage(e) {

        alert(e.data);

    }

</script>