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>

Related Posts

JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트

JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트

JavaScript의 onsubmit 이벤트를 이용하면 폼의 값을 전송하기 전에 어떤 작업을 하게 할 수 있습니다. 간단한 예제로 어떻게 작동하는지 알아보겠습니다. 예제 1 간단한 회원 가입 페이지를 만듭니다. 전송 버튼은 input 태그로 만듭니다. Register를 클릭하면 ok.html로 이동합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / 함수 / isNaN() / 매개변수가 숫자인지 검사하는 함수

JavaScript / 함수 / isNaN() / 매개변수가 숫자인지 검사하는 함수

isNaN() isNaN() - 매개변수가 숫자인지 검사하는 함수입니다.(NaN은 Not a Number입니다.) 문법 isNaN( value ) value : 검사할 값을 입력합니다. 매개변수가 숫자가 아니면 true, 숫자이면 false를 반환합니다. 예제 123.123은 숫자이므로 false를 반환합니다. '123.123'은 따옴표로 감쌌지만, 숫자로 취급하여 false를 반환합니다. 'Not a Number'는 숫자가 아니므로 true를 반환합니다. 123*123은 숫자이므로 false를 반환합니다. '123*123'은 따옴표 안에 문자가 있으므로 숫자가 아닌 것으로 취급하여 true를 반환합니다. <!doctype html> <html ...

JavaScript / Object / Element.getAttribute() / 요소의 속성 값을 가져오는 메서드

JavaScript / Object / Element.getAttribute() / 요소의 속성 값을 가져오는 메서드

.getAttribute() .getAttribute()는 선택한 요소(element)의 특정 속성(attribute)의 값을 가져옵니다. 문법 element.getAttribute( 'attributename' ) 예를 들어 var jb = document.getElementById( 'xyz' ).getAttribute( 'title' ); 는 id의 값이 xyz인 요소의 title 속성 값을 변수 jb에 저장합니다. 예제 id의 값이 abc인 a 요소의 href 속성의 값을 가져와서 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...

JavaScript / window.matchMedia() / CSS 미디어쿼리를 자바스크립트에 사용하는 메소드

JavaScript / window.matchMedia() / CSS 미디어쿼리를 자바스크립트에 사용하는 메소드

window.matchMedia() CSS는 미디어쿼리를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 설정을 할 수 있습니다. 자바스크립트에서도 window.matchMedia()를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 작업을 할 수 있습니다. 반응형 웹디자인을 할 때 유용한 메소드입니다. 문법 window.matchMedia( mediaQueryString ) mediaQueryString : CSS 미디어쿼리를 입력합니다. window는 생략할 수 있습니다. 예를 들어 window.matchMedia( '( min-width: 500px )' ) 는 500px 이상을 뜻합니다. 속성 .media : mediaQueryString을 ...

JavaScript / Object / document.title / 문서의 제목을 가져오거나 변경하는 속성

JavaScript / Object / document.title / 문서의 제목을 가져오거나 변경하는 속성

.title .title 속성으로 문서의 제목을 가져오거나 변경할 수 있습니다. 문법 1 document.title 문서의 <title> 태그의 내용을 반환합니다. 문법 2 document.title = 'ABC' 문서의 <title> 태그의 내용을 ABC로 바꿉니다. 예제 문서의 제목 JavaScript를 출력하고, 제목을 CODING FACTORY로 바꿉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write ( '<p>' ...

CKEditor 5 / 설정하고 사용하는 방법

CKEditor 5 / 설정하고 사용하는 방법

CKEditor는 JavaScript 기반의 WYSIWYG 에디터이다. 어떻게 설정하고 사용하는지 간략하게 알아본다. Modern JavaScript rich text editor with a modular architecture. Its clean UI and features provide the perfect WYSIWYG UX for creating semantic content. CKEditor에는 Classic editor, Inline editor, Balloon editor, Balloon block editor, Document editor 다섯 가지의 타입이 있는데, 아래의 예는 모두 ...

JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드

JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드

.setAttribute() .setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정합니다. 문법 element.setAttribute( 'attributename', 'attributevalue' ) attributename에는 속성 이름을, attributevalue에는 속성값을 넣습니다. 예를 들어 document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' ) id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다. 예제 id 값이 abc인 요소의 href 속성값을 변경하는 예제입니다. <!doctype html> <html lang="ko"> ...

JavaScript / Object / String.concat() / 문자열을 이어 붙이는 메서드

JavaScript / Object / String.concat() / 문자열을 이어 붙이는 메서드

.concat()  .concat()은 문자열을 이어 붙이는 메서드입니다. 문법 string1.concat( ) string1은 필수 요소, string2 등은 선택 요소입니다. 인수가 문자열이 아닌 경우 먼저 문자열로 변환한 다음 string1에 연결합니다. 예를 들어 'ab'.concat( 'cd', 'ef' ) 는 abcdef입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> ...

JavaScript / Object / Array.slice() / 배열의 일부분을 선택하여 새로운 배열을 만드는 속성

JavaScript / Object / Array.slice() / 배열의 일부분을 선택하여 새로운 배열을 만드는 속성

.slice() .slice()는 배열의 일부분을 선택하여 새로운 배열을 만듭니다. 문법 array.slice( start, end ) start와 end에는 숫자가 들어갑니다. 배열의 start에 해당하는 요소부터 end 바로 전의 요소까지를 선택하여 새로운 배열을 만듭니다. 예를 들어 jbAry.slice( 2, 5 ); 는 jbAry 배열의 3번째 요소부터 5번째 요소까지 선택합니다. end에 값이 없으면 해당 배열의 마지막 요소까지 선택합니다. 값이 음수면 마지막 요소를 기준으로 선택합니다. 예제 <!doctype html> <html ...

JavaScript / Object / Array.reverse() / 원소의 순서를 반대로 만드는 메서드

JavaScript / Object / Array.reverse() / 원소의 순서를 반대로 만드는 메서드

.reverse() .reverse()는 배열의 원소의 순서를 반대로 만드는 메서드입니다. 순서가 바뀐 배열을 새로 만드는 것이 아니라, 기존 배열의 순서를 바꿉니다. 예제 4개의 원소를 가진 배열을 만들고 출력합니다.. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, sans-serif; } </style> </head> <body> <script> var jbAry = [ 1, 2, 3, 4 ...