HTML DOM Window opener 속성 완벽 정리

HTML DOM의 Window opener 속성은 open() 메서드를 사용해 자식 창을 연 부모 창에 대한 참조(reference)를 반환합니다. 즉, 새로 열린 팝업 창에서 자신을 실행한 원래 창에 접근해야 할 때 이 속성을 활용할 수 있습니다.

문법(Syntax)

opener 속성의 기본 문법은 다음과 같습니다.

window.opener

이 코드는 현재 자식 창을 생성한 부모 창 객체를 반환하며, 반환된 참조를 통해 부모 창의 DOM 요소나 함수에 자유롭게 접근할 수 있습니다.

예제(Example)

아래 예제는 Window opener 속성을 실제로 활용하는 방법을 보여줍니다. URL을 입력받아 새 창을 열고, 해당 창을 닫거나 복원하는 기능을 구현했습니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Window opener</title>
<style>
    * {
        padding: 2px;
        margin:5px;
    }
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    input[type="button"] {
        border-radius: 10px;
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-Window-opener</legend>
            <input id="urlSelect" type="url" placeholder="Type URL here..."><br>
            <input type="button" value="Go To" onclick="openWindow()">
            <input type="button" value="Close" onclick="closeWindow()">
            <input type="button" value="Restore" onclick="restoreWindow()">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
    <script>
        var urlSelect = document.getElementById("urlSelect");
        var winSource;
        function openWindow() {
            browseWindow = window.open(urlSelect.value, "browseWindow", "width=400, height=200");
            winSource = urlSelect.value;
            browseWindow.opener.document.getElementById("divDisplay").textContent = "Child
            Window Active";
        }
        function closeWindow(){
            if(browseWindow){
                browseWindow.close();
                browseWindow.opener.document.getElementById("divDisplay").textContent = "Child
                Window Closed";
            }
        }
        function restoreWindow(){
            if(browseWindow.closed){
                browseWindow = window.open(winSource, "browseWindow", "width=400, height=200");
                browseWindow.opener.document.getElementById("divDisplay").textContent = "Child
                Window Restored";
            }
        }
    </script>
</body>
</html>

코드 설명

openWindow(): 입력된 URL로 새 자식 창을 열고, browseWindow.opener를 통해 부모 창의 divDisplay 요소에 '자식 창 활성화' 상태를 표시합니다.
closeWindow(): 자식 창이 존재하면 닫고, opener 속성으로 부모 창에 '자식 창 종료' 상태를 전달합니다.
restoreWindow(): 자식 창이 이미 닫혀 있는지 closed 속성으로 확인한 뒤, 같은 URL로 창을 다시 열어 '자식 창 복원' 상태를 표시합니다.

실행 결과(Output)

URL 입력란에 주소를 입력한 상태에서 'Go To' 버튼을 클릭하면 새 자식 창이 열립니다.

HTML DOM Window opener 속성 완벽 정리 – 부모 창 참조하기

'Close' 버튼을 클릭하면 열려 있던 자식 창이 종료됩니다.

HTML DOM Window opener 속성 완벽 정리 – 부모 창 참조하기

'Restore' 버튼을 클릭하면 닫혔던 자식 창이 다시 복원됩니다.

HTML DOM Window opener 속성 완벽 정리 – 부모 창 참조하기

정리

Window opener 속성은 팝업 창과 부모 창 간의 양방향 통신을 가능하게 해주는 유용한 도구입니다. 다만 최신 브라우저에서는 보안 정책상 제한이 있을 수 있으므로, 실무에서는 동일 출처(Same-Origin) 환경에서 사용하는 것이 안전합니다.