자식창에서 부모창에 정보 전달하기
in Programming on JavaScript
◇ JS 실습 포스팅 시리즈 ◇
- 입력 데이터 출력 실습
- n초 마다 사진 바꾸기
- 버튼위에 마우스 올려 사진 바꾸기
- 버튼위에 마우스 올려 사진 바꾸기2
- 자식창에서 부모창 정보 수정 하기 - 현재 글
- 야식 주문 프로그램 만들기
오늘은 자식창에서 입력된 데이터를 부모창에 표시하는 실습을 할 것이다. 체험은 다음 링크를 클릭해서…
부모창에서 자식창 열기 (js)
1. window.open() 함수 이용
다음과 같은 문법으로 사용된다. 근데 params를 다 넣지 않아도 된다. w3school에 params에 대해 자세한 설명이 나와있다.W3School window open 설명 보기
window.open(URL, name, specs, replace)
- URL : 내가 열고싶은 페이지 URL
- name : 어디에 열지 정해줄 수 있다. (_blank : 새창에서, _self : 현재 페이지에, _parent : 부모페이지에 등등..)
- specs : 열 창의 너비와 높이 등 다른 정보
- replace : true, false값, history와 연관있다.
이 실습에서는 아래와 같이 쓰였다.
window.open("child.html","","width=600px,height=400px,top=200px;");
2. onclick 함수와 연결
이 실습에서는 버튼이 클릭될 때 window.open이 실행되게 했다. 그래서 아래와 같은 코드를 사용했다.
window.onload = function(){
//newwin은 "새창열기" 버튼의 id이다.
document.getElementById("newwin").onclick = function(){
window.open("child.html","","width=600px,height=400px,top=200px;");
}
};
- window.onload를 사용해 js가 html 요소가 다 로드 된 후에 element에 접근하도록 하고 (기초 중 기초다. 다음번 포스트 쓸 때는 설명 생략할 예정.)
- button 에 newwin이라는 id를 줬다. 그걸 찾아서 onclick 함수를 걸어준다.
자식창에서 부모창에 data 전달하기(js)
이 글의 key 포인트 되겠다.
1. window.opener 함수 이용
window opener는 자식 창에서 사용된다. 자식 창에서 window.opener이라고 쓰면, 자식창을 열어준 부모를 의미한다. 그래서 부모 창에 어떠한 작업을 할 수 있게 해준다. w3school에서 보기
부모창 (index.html)에서의 js 코드
var myWindow = window.open("new.html", "myWindow", "width=200, height=100");
자식창(new.html)에서의 js 코드
//new.html에서 index.html에 write할 수 있다.
myWindow.opener.document.write("<p>This is the source window!</p>");
2. onclick 함수와 연결
- “닫기” 버튼의 id는 click me이다.
- 닫기 버튼이 눌리면, input태그에서 정보를 읽어 userid, username 변수에 저장하고, window.opener로 부모창에 접근해 값을 쓴다.
window.onload = function(event){
//clickme는 "닫기" 버튼의 id이다.
document.getElementById("clickme").onclick = function(){
var userid = document.getElementById("userid").value;
var username = document.getElementById("username").value;
window.opener.document.getElementById("userid").value = userid;
window.opener.document.getElementById("username").value = username;
window.close();
}
}
끝!
전체 코드는 다음과 같다.
부모창 (parent.html)
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
div.wrapper {
width : 800px;
height : 600px;
margin : 0 auto;
text-align: center;
}
input[type=text]{
background-color : pink
}
table{
margin : 0 auto;
}
</style>
<script>
window.onload = function(){
document.getElementById("newwin").onclick = function(){
window.open("child.html","","width=600px,height=400px,top=200px;");
}
};
</script>
</head>
<body>
<div class="wrapper">
<div id="target"><br>
<h1>부모창</h1>
<table>
<tr>
<td><label>아이디: </td>
<td><input type="text" id="userid" name="" value="" readonly></label></td>
</tr>
<tr>
<td><label>이름 : </td>
<td><input type="text" id="username" name="" value="" readonly></label></td>
</tr>
</table><br>
<input id="newwin" type="button" name="" value="새창열기">
<input type="button" name="" value="인쇄" onclick="window.print();">
</div>
</div>
</body>
</html>
자식창 (child.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div#wrapper {
width : 800px;
height : 600px;
margin : 0 auto;
text-align: center;
}
</style>
<script>
window.onload = function(event){
document.getElementById("clickme").onclick = function(){
var userid = document.getElementById("userid").value;
var username = document.getElementById("username").value;
window.opener.document.getElementById("userid").value = userid;
window.opener.document.getElementById("username").value = username;
window.close();
}
}
</script>
</head>
<body>
<div id="wrapper">
<h2>[ 새창으로 입력 ]</h2>
<div id="target">
<label for="userid">아이디 : </label><input type="text" id="userid"><br>
<label for="username">이 름 : </label><input type="text" id="username"><br><br>
<input type="button" id="clickme" value="닫기">
<input type="button" value="인쇄" onclick="window.print();">
</div>
</div>
</body>
</html>
