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 / Object / document.URL / 문서의 URL을 반환하는 속성

JavaScript / Object / document.URL / 문서의 URL을 반환하는 속성

.URL .URL 속성으로 문서의 URL을 가져올 수 있습니다. 문법 document.URL 예제 문서의 URL을 출력합니다. <!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>document.URL : " + document.URL + "</p>" ); </script> </body> </html> JavaScript / Object / Location - URL 정보 가져오는 객체

JavaScript / Object / String.endsWith() / 특정 문자열로 끝나는지 확인하는 메서드

JavaScript / Object / String.endsWith() / 특정 문자열로 끝나는지 확인하는 메서드

.endsWith() .endsWith()는 문자열이 특정 문자열로 끝나는지 확인한다. IE는 Edge부터 지원한다. 문법 string.endsWith( searchString, length ) searchString : 검색할 문자열로 필수 요소이다. 대소문자를 구분한다. length : 문자열 중 어디까지 검색할지 정한다. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 한다. 예제 abcde가 e로 끝나는지 검사한다. e로 끝나므로 true를 반환한다. 'abcde'.endsWith( 'e' ) abc가 e로 끝나는지 검사한다. e로 끝나지 않으므로 false를 반환한다. 'abcde'.endsWith( ...

JavaScript / 대화상자 / Alert, Confirm, Prompt

JavaScript / 대화상자 / Alert, Confirm, Prompt

자바스크립트에서 대화상자는 세가지가 있습니다. Alert, Confirm, Prompt로, 새 창을 띄운다는 점은 같으나 역할이 다릅니다. Alert Alert는 단순히 메시지를 전달하는 역할만 합니다. 반환하는 값이 없습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | alert</title> <script> alert( 'Lorem ipsum dolor' ); ...

JavaScript / Object / String.charAt(), String.charCodeAt()

JavaScript / Object / String.charAt(), String.charCodeAt()

.charAt(), .charCodeAt() .charAt() : 특정 위치에 있는 문자를 반환합니다. .charCodeAt() : 특정 위치에 있는 문자의 유니코드 값을 반환합니다. 문법 - .charAt() string.charAt( n ) 인덱스의 값이 n인 문자를 반환합니다. 예를 들어 "12345".charAt( 2 ) 는 3입니다. 만약 인덱스 n에 문자가 없으면 빈 문자열을 반환합니다. 문법 - .charCodeAt() string.charCodeAt( n ) 인덱스의 값이 n인 문자의 유니코드 값을 반환합니다. 예를 들어 "12345".charCodeAt( 2 ) 는 3의 유니코드 ...

JavaScript / 함수 / 함수 선언하고 호출하기

JavaScript / 함수 / 함수 선언하고 호출하기

함수 선언하기 방법 1 function functionName( argument1, argument2, ... ) { // Do Something } 방법 2 var functionName = function( argument1, argument2, ... ) { // Do Something }; 함수 호출하기 functionName( value1, value2, ... ); 방법 1로 함수를 선언한 경우, 함수 호출은 함수 선언 전 또는 함수 선언 후에 할 수 있습니다. functionName( value1, value2, ... ...

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

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

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

JavaScript / 함수 / isFinite() / 매개변수가 유한한 수인지 검사하는 함수

JavaScript / 함수 / isFinite() / 매개변수가 유한한 수인지 검사하는 함수

isFinite() isFinite()은 매개변수가 유한값인지 검사하는 함수입니다. 문법 isFinite( value ) value : 검사할 값을 입력합니다. 유한한 숫자이면 true, 무한한 숫자 또는 숫자가 아니면 false를 반환합니다. 예제 123.123은 유한한 숫자이므로 true를 반환합니다. Infinity는 무한한 숫자이므로 false를 반환합니다. Not a Number는 문자이므로 false를 반환합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / Object / document.querySelector() / 특정 CSS 선택자를 가진 첫 번째 요소를 선택하는 메서드

JavaScript / Object / document.querySelector() / 특정 CSS 선택자를 가진 첫 번째 요소를 선택하는 메서드

.querySelector() .querySelector()는 CSS 선택자로 요소를 선택하게 해줍니다. 주의할 점은 선택자에 해당하는 첫번째 요소만 선택한다는 것입니다. 문법 document.querySelector( 'selector' ) 예를 들어 document.querySelector( '.xyz' ) 는 클래스 값이 xyz인 첫번째 요소에 접근합니다. 예제 1 클래스 값으로 abc를 갖는 요소 중 첫 번째 요소의 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...

JavaScript / Object / Array.length / 배열의 길이 반환하는 속성

JavaScript / Object / Array.length / 배열의 길이 반환하는 속성

.length .length는 배열의 길이를 반환하는 속성입니다. 마지막 원소의 인덱스 값보다 1 큰 수를 반환합니다. 배열에 속한 원소의 개수와는 의미가 다릅니다. 문법 array.length 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, sans-serif; font-style: italic; } </style> </head> <body> <script> var jbAry1 = ; document.write( '<p>jbAry1.length : ' ...

JavaScript / 함수 / Number() / 문자열을 숫자로 변환하는 함수

JavaScript / 함수 / Number() / 문자열을 숫자로 변환하는 함수

Number() Number()은 문자열을 숫자로 변환하는 함수입니다. 문법 Number( object ) object : 문자열 또는 문자열을 값으로 하는 변수 등을 입력합니다. 숫자로 변환할 수 없는 값인 경우 NaN을 반환합니다. 예제 변수 c의 값은 문자 1과 문자 2를 더한 12입니다. 변수 d의 값은 숫자 1과 숫자 2를 더한 3입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...