message event
메인 html에서 새창을 띄워도 해당 결과값이 출력되게 하기
messageEvent.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <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">
var disp;
var myLoc;
var iframe;
var newWindow;
window.onload = function() {
// location.protocol = http
// location.host = localhost:8080
myLoc = location.protocol+"//"+location.host;
// id가 없으면 tag name 얻어서 0으로 준다.
iframe = document.getElementsByTagName("iframe")[0];
disp = document.getElementById("disp");
disp.innerHTML = "시작합니다.";
btnStart = document.getElementById("btnStart");
btnStart.onclick = function() {
funcStart();
}
btnNew = document.getElementById("btnNew");
btnNew.onclick = function() {
funcNew();
}
}
function funcStart() {
setInterval(funcTimer, 1000); // 1초마다 funcTimer 호출
// clearInterval(funcTimer); // 타이머를 중지
}
function funcNew() {
// window.open(새창을 열 html); = 윈도우가 새로 열린다.
newWindow = window.open("messageSub.html");
}
function funcTimer() {
// Math.floor = 소수 자리를 없앤다.
var data = "랜덤한 값:"+Math.floor(Math.random()*100);
// postMessage(보낼 데이터, 받을 도메인);
iframe.contentWindow.postMessage(data, myLoc);
if (newWindow) {
// 새로 열린 윈도우에 메시지 보내기
newWindow.postMessage(data, myLoc);
}
disp.innerHTML = "결과:"+data;
}
</script>
</head>
<body>
<p id="disp" style="width:500px; height:200px; border:1px dashed #ff0000;"></p>
<input type="button" value="시작" id="btnStart"/>
<br/>
<input type="button" value="새창" id="btnNew"/>
<br/>
<iframe src="messageSub.html" style="width:500px; height:200px;"></iframe>
</body>
</html>
messageSub.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- messageEvent.html 데이터 받는 곳 -->
<!-- <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">
var show;
var myLoc;
window.onload = function() {
show = document.getElementById("show"); // p tag
window.addEventListener("message", func, false); // 또는 onMessage
}
function func(e) {
show.innerHTML = "전달된 값은:"+e.data+"<br/>";
}
</script>
</head>
<body>
<p id="show" style="width:200px; height:150px; border:1px solid blue;"></p>
</body>
</html>
'Study > HTML5,CSS,JQuery' 카테고리의 다른 글
| [HTML5/CSS3/JQUERY] channel message (0) | 2019.05.22 |
|---|---|
| [HTML5/CSS3/JQUERY] cross message (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] 현재 시간을 가져와 이미지 시계 나타내기 (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] drag & drop 예제 (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] audio와 video 예제 (0) | 2019.05.21 |
