iframe으로 데이터를 전달하고 받는 방법을 찾다가 알게 되었다.
크로스 도큐먼트 메시징(Cross Document Messaging)을 사용하면
두개의 웹 페이지가 서로 메시지를 주고 받을 수 있다.
Cross Document Messaging의 장점은 서로 다른 도메인에 존재하는 페이지끼리도 메시징이 가능하다.
Same Origin Policy에 적용받지 않아 도메인을 넘나드는 연동 구조에 적합하다.
데이터 전송하기
window.postMessage(data, [ports], targetOrigin)
data : 전달할 메시지
ports : 메시지 포트(생략 가능)
targetOrigin : 메시지를 수신받는 도메인을 지정한다. 대상이 특정 도메인이 아니라면 *로 지정
데이터 수신하기
데이터 수신하는 측에서는 window객체의 message 이벤트를 구현하면 됩니다.
window.onmessage = function(e){
console.log(e.data, e.origin, e.source);
}
data : 송신한 데이터
origin : 메시지를 보내는 곳의 도메인 정보
source : 메시지를 보내는 윈도우 객체
처음에 iframe으로 데이터를 전달하고 받는 방법을 찾다가 Cross Document Messaging을 알게 되었다고 했는데
직접 예제를 보면
test1.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="sendMessage();">Send</button>
<iframe id="test1" src="test2.html" width="800" height="500"></iframe>
<script type="text/javascript">
function sendMessage(){
var dest = document.getElementById("test1");
dest.contentWindow.postMessage("iframe으로 보내는 메세지","*");
}
</script>
</body>
</html>
test2.html
<!DOCTYPE html>
<html>
<head></head>
<body>
test2.html
<script type="text/javascript">
window.onmessage = function(e){
alert(e.data);
}
</script>
</body>
</html>
test1.html에서 send버튼을 누르면 test2.html로 전송하여 메시지를 출력해 준다.
'hybrid app > HTML5' 카테고리의 다른 글
| [html5] Firefox mac에서 video mp4 재생 문제 (0) | 2014.08.22 |
|---|---|
| 모바일에서 숫자 자동전화걸기 자동 링크 방지 (0) | 2014.03.24 |
| [HTML5] 구글에서 제공하는 webgl sample (0) | 2013.12.23 |
| [HTML5] HTML5 Rocks 한글 페이지 (0) | 2013.10.28 |
| [HTML5] Safari on iOS 7 and HTML5: problems, changes and new APIs (0) | 2013.10.14 |