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>

같은 카테고리의 다른 글
JavaScript / Object / String.repeat() / 문자열을 반복한 값을 반환하는 메서드

JavaScript / Object / String.repeat() / 문자열을 반복한 값을 반환하는 메서드

.repeat() .repeat() – 문자열을 반복한 값을 반환하는 메서드입니다. IE는 Edge부터 지원합니다. 문법 string.repeat( count ) 예제 'abc'.repeat( 2 ) abc를 두 번 반복한 abcabc를 반환합니다.

JavaScript / Object / String.substr() / 문자열 추출하는 메서드

JavaScript / Object / String.substr() / 문자열 추출하는 메서드

.substr() .substr()은 문자열에서 특정 부분만 골라낼 때 사용하는 메서드입니다. 문법 string.substr( start, length ) start로 시작 위치를 정하고 length로 잘라낼 문자열의 길이를 정합니다. 예를 들어 var str = '123456789'; document.write( '<p>substring( 1, 5 ) : ' + str.substr( 1, 5 ) + '</p>' ); 는 23456을 출력합니다. start 값은 필수이고, length를 지정하지 않으면 문자열의 끝까지를 가져옵니다. 예제 <!doctype html> <html lang="ko"> ...

JavaScript / Object / String.includes() / 특정 문자열을 포함하는지 확인하는 메서드

JavaScript / Object / String.includes() / 특정 문자열을 포함하는지 확인하는 메서드

.includes() .includes()는 문자열이 특정 문자열을 포함하는지 확인하는 메서드이다. IE는 Edge부터 지원한다. 문법 string.includes( searchString, length ) searchString : 검색할 문자열로 필수 요소이다. 대소문자를 구분한다. length : 검색을 시작할 위치이다. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 한다. 예제 abzcd가 z를 포함하는지 검사한다. z를 포함하므로 true를 반환한다. 'abzcd'.includes( 'z' ) zcd가 z를 포함하는지 검사한다. z를 포함하므로 true를 반환한다. 'abzcd'.includes( 'z', 2 ...

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 / Library / Lozad.js / 이미지 Lazy Loading 구현해주는 라이브러리

JavaScript / Library / Lozad.js / 이미지 Lazy Loading 구현해주는 라이브러리

Lazy Loading 웹 페이지의 로딩 속도에 큰 영향을 미치는 것 중의 하나는 이미지입니다. 이를 해결해주는 방법 중의 하나가 Lazy Loading입니다. 웹브라우저에 보이는 영역 안에 있는 이미지는 로드하고, 보이지 않는 부분은 로드하지 않습니다. 밑으로 스크롤하여 이미지가 있는 영역에 도달하면 그 때 이미지를 로드합니다. 이렇게 하면 불필요한 이미지 로딩으로 인한 속도 저하를 방지할 수 있습니다. Lozad.js Lozad.js는 Lazy ...

JavaScript / Object / String.substring() / 문자열 추출하는 메서드

JavaScript / Object / String.substring() / 문자열 추출하는 메서드

.substring() .substring()은 문자열에서 특정 부분만 골라낼 때 사용하는 메서드입니다. 문법 string.substring( start, end ) start와 end로 문자열에서 골라낼 부분의 처음과 끝을 지정합니다. 예를 들어 var str = '123456789'; document.write( str.substring( 1, 4 ) ); 는 234를 출력합니다. start 값은 필수이며, end 값이 지정되지 않으면 문자열의 끝까지를 의미합니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

JavaScript / Object / Array.every() / 모든 원소가 조건에 맞는지 검사하는 메서드

JavaScript / Object / Array.every() / 모든 원소가 조건에 맞는지 검사하는 메서드

.every() .every()는 배열의 모든 원소가 조건에 맞는지 검사하는 메서드입니다. 모든 원소가 조건을 만족하면 true, 하나라도 만족하지 않으면 false를 반환합니다. 예제 배열의 원소를 오름차순으로 검사하고, 조건을 만족하지 않는 원소가 있으면 검사를 중지하고 false를 반환합니다. 모든 원소를 다 검사했는데 조건을 만족하지 않는 원소가 없으면 true를 반환합니다. 원소가 없는 빈 배열은, 조건은 만족하지 않는 원소가 없으므로 무조건 ...

JavaScript / Object / Date / 당월 말일 구하는 방법

JavaScript / Object / Date / 당월 말일 구하는 방법

다음은 2022년 3월 1일이다. Date( 2022, 2, 1 ) 날짜 자리에 0이 들어가면 전달 말일이다. 즉 다음은 2022년 2월 28일이다. Date( 2022, 2, 0 ) 이를 이용하여 현재 달의 말일을 구할 수 있다. 다음은 오늘 날짜를 출력하는 것이고... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...

JavaScript / 조건문 / switch

JavaScript / 조건문 / switch

가장 기본적인 조건문은 if입니다. 하지만 조건식에서 비교할 값이 많다면 코드가 길어지고 가독성이 떨어진다는 단점이 있습니다. 이럴 땐 switch를 사용하는 것이 좋습니다. 문법 switch ( condition ) { case value1: statement1; break; case value2: statement2; break; ... ...

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"> ...