본문 바로가기
Study/HTML5,CSS,JQuery

[HTML5/CSS3/JQUERY] cross message

힝쏘 2019. 5. 22. 13:58

각 프레임들끼리 데이터 주고 받기 하기

 

 

 

messageEvent2.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!-- 해당 프레임에서 데이터 주고받기 main --> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 

<script type="text/javascript"> 
    window.onload = function() { 
        document.getElementById("btnSend1").onclick = function() { 
            sendMessage("frame_1", "Main:Hello..안녕! 첫번째 프레임!"); 
        } 
         
        document.getElementById("btnSend2").onclick = function() { 
            sendMessage("frame_2", "Main:Hello..안녕! 두번째 프레임!"); 
        } 
    } 
     
    // send 
    function sendMessage(id, msg) { 
        // myLoc 대신 * 쓰면 현재 도메인으로 간다. 
        document.getElementById(id).contentWindow.postMessage(msg, "*"); 
    } 
     
    // receive 
    window.onmessage = function(e) { 
        document.getElementById("data").innerHTML += e.data + "<br/>"; 
    } 
     
     
</script> 
</head> 
<body> 
    <iframe id="frame_1" src="1.html" style="width:320px; height:240px;"></iframe> 
    <iframe id="frame_2" src="2.html" style="width:320px; height:240px;"></iframe> 
     
    <br/><br/> 
     
    <button id="btnSend1">프레임 1로 보내기</button> 
    <button id="btnSend2">프레임 2로 보내기</button> 
     
    <br/><br/> 
     
    <div id="data" style="border:1px solid black; width:300px; height:200px; overflow:auto;"></div> 
</body> 
</html>

 

 

1.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!-- 해당 프레임에서 데이터 주고받기 sub 1 --> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    window.onload = function() { 
        document.getElementById("btn1").onclick = function() { 
            sendMessage(true); 
        } 
         
        document.getElementById("btn2").onclick = function() { 
            sendMessage(false); 
        } 
    } 
     
    // send 
    function sendMessage(isParent) { 
        if (isParent) { 
            window.parent.postMessage("frame 1: 안녕! 부모 창!!", "*"); 
        } else { 
            window.parent.document.getElementById("frame_2")
            	.contentWindow.postMessage("frame 1: 안녕! 서브 2 창!!", "*"); 
        } 
    } 
     
    // receive 
    window.onmessage = function(e) { 
        document.getElementById("data").innerHTML += e.data+"<br/>"; 
    } 
</script> 
</head> 
<body> 
    <button id="btn1">부모 창으로 보내기</button>&nbsp;&nbsp; 
    <button id="btn2">frame 2로 보내기</button>&nbsp;&nbsp; 
     
    <br/><br/> 
     
    <div id="data" style="border:1px solid black; width:300px; height:200px; 
    	overflow:auto;"></div> 
</body> 
</html>

 

 

2.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!-- 해당 프레임에서 데이터 주고받기 sub 2 --> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    window.onload = function() { 
        document.getElementById("btn1").onclick = function() { 
            sendMessage(true); 
        } 
         
        document.getElementById("btn2").onclick = function() { 
            sendMessage(false); 
        } 
    } 
     
    // send 
    function sendMessage(isParent) { 
        if (isParent) { 
            window.parent.postMessage("frame 2: 안녕! 부모 창!!", "*"); 
        } else { 
            window.parent.document.getElementById("frame_1")
            	.contentWindow.postMessage("frame 2: 안녕! 서브 1 창!!", "*"); 
        } 
    } 
     
    // receive 
    window.onmessage = function(e) { 
        document.getElementById("data").innerHTML += e.data+"<br/>"; 
    } 
</script> 
</head> 
<body> 
    <button id="btn1">부모 창으로 보내기</button>&nbsp;&nbsp; 
    <button id="btn2">frame 1로 보내기</button>&nbsp;&nbsp; 
     
    <br/><br/> 
     
    <div id="data" style="border:1px solid black; width:300px; height:200px; 
    	overflow:auto;"></div> 
</body> 
</html>

 

저작자표시

'Study > HTML5,CSS,JQuery' 카테고리의 다른 글

[HTML5/CSS3/JQUERY] application cache  (0) 2019.05.22
[HTML5/CSS3/JQUERY] channel message  (0) 2019.05.22
[HTML5/CSS3/JQUERY] message event  (0) 2019.05.22
[HTML5/CSS3/JQUERY] 현재 시간을 가져와 이미지 시계 나타내기  (0) 2019.05.22
[HTML5/CSS3/JQUERY] drag & drop 예제  (0) 2019.05.22

'Study/HTML5,CSS,JQuery' Related Articles

티스토리툴바