JavaScript / window.open / 새 창 띄우기, 부모 창과 자식 창 사이 값 전달하기
window.open으로 새 창을 띄우고, 부모 창에서 자식 창으로, 자식 창에서 부모 창으로 값을 전달하는 방법을 정리한다.
부모 창이 parent.html, 자식 창이 child.html이다.
목차
새 창 띄우기
문법은 다음과 같다.
window.open( url, windowName, windowFeatures );
- url : 새 창에 들어갈 문서 주소
- windowName : 윈도우 이름
- windowFeatures : 새 창의 특성
예를 들어 다음은...
window.open( "child.html", "Child", "width=400, height=300, top=50, left=50" );
child.html을 새 창으로 띄우고, 윈도우 이름은 Child, 가로 크기는 400px, 세로 크기는 300px, 위치는 화면의 위에서 50px, 왼쪽에서 50px라는 뜻이다.
새 창의 크기는 콘텐츠 영역으로, 창의 테두리, 주소 표시줄 등은 포함되지 않는다.
parent.html
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Parent</title> <style> * { font-family: Consolas, sans-serif; } </style> </head> <body> <h1>Parent</h1> <p><input type="button" value="New Window" onclick="new_window();"></p> <script> function new_window() { window.open( "child.html", "Child", "width=400, height=300, top=50, left=50" ); } </script> </body> </html>
child.html
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Child</title> <style> * { font-family: Consolas, sans-serif; } </style> </head> <body> <h1>Child</h1> </body> </html>
화면의 가운데에 새 창 띄우기
parent.html
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Parent</title> <style> * { font-family: Consolas, sans-serif; } </style> </head> <body> <h1>Parent</h1> <p><input type="button" value="New Window" onclick="new_window();"></p> <script> var new_window_width = 400; var new_window_height = 300; var positionX = ( window.screen.width / 2 ) - ( new_window_width / 2 ); var positionY = ( window.screen.height / 2 ) - ( new_window_height / 2 ); function new_window() { window.open( "child.html", "Child", "width=" + new_window_width + ", height=" + new_window_height + ", top=" + positionY + ", left=" + positionX ); } </script> </body> </html>
자식 창에서 부모 창으로 값 보내기
우편번호 조회하여 주소 입력하는 것처럼, 부모 창에서는 입력하지 못하고, 자식 창에서 조회 또는 입력한 값만 부모 창에서 사용하고 싶을 때 유용하다.
parent.html
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Parent</title> <style> * { font-family: Consolas, sans-serif; } </style> </head> <body> <h1>Parent</h1> <p> <input type="text" id="parentValue" readonly> <input type="button" value="New Window" onclick="new_window();"> </p> <script> function new_window() { window.open( "child.html", "Child", "width=400, height=300, top=50, left=50" ); } </script> </body> </html>
child.html
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Child</title> <style> * { font-family: Consolas, sans-serif; } </style> </head> <body> <h1>Child</h1> <p> <input type="text" id="childValue"> <input type="button" value="Send Value" onclick="sendValue();"> </p> <script> function sendValue() { window.opener.document.getElementById( "parentValue" ).value = document.getElementById( "childValue" ).value; window.close(); } </script> </body> </html>
자식 창에서 부모 창 값 가져오기
아이디 중복 검사하는 것처럼, 부모 창에서 입력한 값을 자식 창에서 검색 또는 검증할 때 유용하다.
parent.html
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Parent</title> <style> * { font-family: Consolas, sans-serif; } </style> </head> <body> <h1>Parent</h1> <p> <input type="text" id="parentValue"> <input type="button" value="Send Value" onclick="new_window();"> </p> <script> function new_window() { window.open( "child.html", "Child", "width=400, height=300, top=50, left=50" ); } </script> </body> </html>
child.html
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Child</title> <style> * { font-family: Consolas, sans-serif; } </style> </head> <body> <h1>Child</h1> <p> <input type="text" id="childValue"> </p> <script> document.getElementById( "childValue" ).value = window.opener.document.getElementById( "parentValue" ).value; </script> </body> </html>