본문 바로가기
Dev. Cookbook/Javascript

[JavaScript] window.open(), window.opener() 부모창 자식창 간의 제어 방법

by breezyday 2022. 5. 26.

브라우저에서 새로운 팝업창을 열었을 때, 팝업창은 자식창, 팝업을 띄운 창은 부모창입니다. 자주는 아니지만 UI 설계 과정에서 팝업창을 사용하기도 합니다. 그리고 많은 데이터는 아니지만 간간히 부모창과 자식창 간에 데이터 전달이 필요합니다. 이때 Javascript로 부모창과 자식창을 서로 제어하기 위한 주요 함수와 속성이 window.open(), window.opener 입니다.

 

1. window.open()

Javascript로 새로운 팝업창을 열기 위해서 사용하는 것이 window.open() 메서드입니다.

window.open() 메서드의 기본 사용 방법은 아래와 같습니다.

 

// 기본 구문
window.open(URL, [target, [windowFeatures]]);

// 예제
window.open("www.daum.net", "_blank");

 

가장 간단한 팝업창으로 페이지에서 새로운 사이트나 외부 링크를 열 때 별도의 option 없이 target만 새로운 창으로 지정하여 오픈한 예제입니다.

 

1.1 window.open : target 

target 설명
_self 현재창(현재 브라우징 컨텍스트)에 열기
기본값으로 생략 가능
_blank 기본으로 새 탭(tab)에 열기
사용자 설정에 따라 새창으로 열릴 수 있음.
_parent 부모 브라우징 컨텍스(현제 프레임의 부모 프레임)에 열기
상위 항목이 없다면 _self와 동일
_top 최상위 브라우징 컨텍스트(현재 원도우 전체) 열기
상위 항목이 없다면 _self와 동일
창이름(프레임 이름) 입력한 창이름(프레임 이름)에 열기

 

예전에는 FRAMESET 과 FRAME 태그가 있어서 브라우저 창을 나누어서 사용할 때 _parent나 _top, 창 이름이 사용됩니다. 그러나 이 태그는 이제 사용하고 있지 않아서 _parent, _top을 지정해도 _self와 동일한 결과를 보여줍니다.

 

창 이름을 직접 지정하는 경우는 FRAMESET의 FRAME에 지정한 이름을 target으로 설정할 수 있습니다. 또한 한 화면에서 다수의 팝업창을 사용할 경우 각각의 창을 컨트롤하려 할 때 사용할 수 있습니다. 

 

window.open의 반환값은 windowProxy 객체로 javascript를 사용해 컨트롤할 수 있습니다.

 

1.2 window.open : windowFeatures

features 설명 값 기본값
width 창의 가로 크기, 최소값 100 픽셀단위 숫자  
height 창의 세로 크기, 최소값 100 픽셀단위 숫자  
top 창의 위치 : 위로 부터 간격 픽셀단위 숫자  
left 창의 위치 : 왼쪽으로 부터 간격 픽셀단위 숫자  
popup 팝업창 실행 여부 설정 yes / no   
noopener 원래(부모)창을 접근할 수 없도록 만듬    
noreferrer Referer헤더를 생략하고 noopener를 true로 설정    
IE Only
fullscreen 전체 창 여부 (IE only) yes / no no
title 타이틀바 활성화 여부 (IE only) yes / no yes
location 주소창 활성화 여부 (IE only) yes / no yes
menubar 메뉴바 활성화 여부 (IE only) yes / no yes
toolbar 툴바 활성화 여부 (IE only) yes / no yes
scrollbars 스크롤바 활성화 여부 (IE only) yes / no yes
resizable 창 크기 변경 활성화 여부 (IE only) yes / no yes

 

windowsFeature는 다양한 속성을 기재하고 활성화 유무를 표기합니다.

각 항목은 콤마로 구분하여 입력합니다.

 

예전에 많이 사용했던 Feature들은 IE에서만 사용했던 것들이어서 이제는 사용하지 않는다고 보면 됩니다. 

 

window.open(URL, "_blank", "width=450, height=200, top=100, left=100, popup=yes)

// 새로운 창에
// 폭 450, 높이 200, 위에서 100, 왼쪽에서 100 띄워서 
// 팝업형태로 띄움

 

windowsfeature : popup

yes로 설정하면 최소한의 팝업 창을 사용합니다. 팝업창에 포함된 UI 기능은 일반적으로 주소 줄만 포함하여 브라우저에서 자동으로 결정됩니다.  popup이 설정되지 않고, 다른 windows feature도 설정되지 않으면 탭(tab)으로 창이 열리게 됩니다. 

 

이 기능을 사용하려면 popup만 설정하거나 'yes', '1', or 'true'로 설정하면 됩니다. 

 

// 모두 같은 기능으로 동작
window.open("www.daum.net", "_blank", "popup");
window.open("www.daum.net", "_blank", "popup=yes");
window.open("www.daum.net", "_blank", "popup=1");

// true는 2022년 3월에 새롭게 추가된 값으로 
// 호환성을 위해서 위의 값으로 설정하는 것 좋습니다.
window.open("www.daum.net", "_blank", "popup=true");

 

windowsfeature : noopener

이 기능이 설정되면 팝업창에서 원래(부모) 창에 접근할 수 없습니다. 

noopener를 설정하면, target이 _top, _self, _parent, _blank가 아닌 다른 이름을 가지고 있을 경우, 새로운 컨텍스를 열지 결정할 때 _blank와 동일하게 동작합니다.

 

windowsfeature : noreferrer

이 기능이 설정되면 브라우저는 Referer 헤더를 생략하고 noopener가 설정된 것처럼 동작합니다. 

2 window.opener

window.opener는 쉽게 설명하면 A 창에서 B 창을 열었을 경우 B.opener는 A창을 반환합니다.

즉 자식 창에서 부모 창을 접근할 수 있는 인터페이스를 제공합니다. 

 

window.open()은 함수이며 window.opener는 속성입니다. 

 

2.1 A.html (부모 창)

<!-- A.html -->

<!DOCTYPE html>
<html>
<head>
    <title>A Window</title>
    <meta charset="UTF-8">
    <script type="text/javascript">
    // 자식창을 저장하기 위한 변수
    var childWindow;
    
    function openChild() {
        var windowFeatures = "width=500, height=300, top=200, left=200, popup";
        // 생성한 자식창을 변수에 저장
        childWindow = window.open("Child.html", "myPopup", windowFeatures);
    }
    
    function setChildText() {
        var aValue = document.getElementById("aName").value;
        // 저장된 변수로 자식창에 접근
        childWindow.document.getElementById("childName").value = aValue;
    }
    </script>
</head>
<body>
<form name="aFrmName">
    <input type="text" name="aName" id="aName" value="홍길동"><br><br>
    <input type="button" value="팝업창 열기" onclick="openChild()">&nbsp;
    <input type="button" value="자식창 값 설정" onclick="setChildText()">
</form>
<body>
</html>

 

window.open에서 받은 값을 변수인 childWindow에 저장하고 javascript를 사용하여 자식창에 접근할 수 있습니다.

 

var childWindow;

// window.open 값 저장
childWindow = window.open("Child.html", "myPopup", windowFeatures);

// 자식창 접근 방법 #1
childWindow.document.getElementById("childName").value = aValue;

// 자식창 접근 방법 #2
childWindow.document.childFrmName.childName.value = aValue;

 

2.2 Child.html (자식 창 : 팝업)

 

<!-- Child.html -->

<!DOCTYPE html>
<html>
<head>
    <title>Child</title>
    <meta charset="UTF-8">
    <script type="text/javascript">
    function readParentText() {
        // 부모창 접근 : opener
        var aValue = opener.document.getElementById("aName").value;
        alert("부모의 aName의 값은:" + aValue);
    }
    </script>
</head>
<body>
<form name="childFrmName">
    <input type="text" id="childName" name="chlidName"><br><br>
    <input type="button" value="부모창 값 확인" onclick="readParentText()">&nbsp;
    <input type="button" value="창닫기" onclick="window.close()">
</form>    
</body>
</html>

 

자식 창에서도 (window.) opener 속성을 사용해서 부모창을 접근할 수 있습니다.

 

// opener 속성 사용 방법 #1
var aValue = opener.document.getElementById("aName").value;

// opener 속성 사용 방법 #2
var aValue = opener.document.aFrmName.aName.value;

1절의 내용은 MDN web 문서를 보면서 작성했지만 기본적으로 깊이 있는 이해를 필요로 하는 부분들이 있습니다.

보다 상세한 설명과 이해는 아래 링크를 탐구해보시면 좋을 것 같습니다.

 

 

 

참고

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

https://developer.mozilla.org/en-US/docs/Web/API/Window/opener

 

https://iamawebdeveloper.tistory.com/46

 

 

 

 

 

'Dev. Cookbook > Javascript' 카테고리의 다른 글

[Node, NPM] SQL Bricks, JavaScript로 SQL 구문을 생성하는 패키지  (0) 2023.11.26
[JavaScript] JS에서 객체 이름 확인하는 방법  (0) 2023.11.20
[JavaScript] this 제대로 이해하고 사용하기  (0) 2023.11.19
[JSON] JSON 이해하기 - 2. JSON 기본 : JSON에서 사용하는 데이터 타입  (0) 2023.11.06
[JavaScript] 모니터, 듀얼 모니터 및 브라우저 기준으로 팝업창 가운데 띄우기  (2) 2022.05.30

관련글

댓글

티스토리툴바