HTML DOM Window parent 속성 – 자식 창에서 부모 창에 접근하는 방법

HTML DOM의 Window parent 속성은 자식 창(child window)에서 부모 창(parent window)에 대한 참조를 반환합니다. 즉, 새로 열린 팝업 창이나 iframe 내부의 문서에서 자신을 연 상위 창 객체에 직접 접근할 수 있게 해주는 속성입니다.

문법(Syntax)

부모 창의 참조를 반환하는 기본 문법은 다음과 같습니다.

window.parent

반환되는 값은 현재 창(자식)을 연 부모 Window 객체입니다. 만약 해당 창이 최상위 창이라면 window.parent는 자기 자신을 반환합니다.

예제(Example)

아래 예제는 URL을 입력받아 새로운 자식 창을 열고, window.parent 속성을 사용해 부모 창의 요소에 상태 메시지를 표시하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Window parent</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-parent</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;
         parent.document.getElementById("divDisplay").textContent = "Child Window Active";
      }
      function closeWindow(){
         if(browseWindow){
            browseWindow.close();
            parent.document.getElementById("divDisplay").textContent = "Child Window Closed";
         }
      }
      function restoreWindow(){
         if(browseWindow.closed){
            browseWindow = window.open(winSource, "browseWindow", "width=400, height=200");
            parent.document.getElementById("divDisplay").textContent = "Child Window Restored";
         }
      }
   </script>
</body>
</html>

코드 설명

openWindow(): 입력된 URL로 크기 400×200의 새 자식 창을 열고, parent.document를 통해 부모 창의 divDisplay 영역에 "Child Window Active"라는 메시지를 출력합니다.
closeWindow(): 자식 창이 존재하면 닫고, 부모 창에 "Child Window Closed" 메시지를 표시합니다.
restoreWindow(): 자식 창이 이미 닫혀 있는 경우 같은 URL로 다시 열며, 부모 창에 "Child Window Restored" 메시지를 표시합니다.

실행 결과(Output)

URL 필드에 주소를 입력한 상태에서 'Go To' 버튼을 클릭하면 자식 창이 열리고 부모 창에 상태가 표시됩니다.

HTML DOM Window parent 속성 – 자식 창에서 부모 창에 접근하는 방법

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

HTML DOM Window parent 속성 – 자식 창에서 부모 창에 접근하는 방법

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

HTML DOM Window parent 속성 – 자식 창에서 부모 창에 접근하는 방법

참고 사항

window.parent 속성은 팝업 창뿐만 아니라 iframe 환경에서도 널리 활용됩니다. iframe 내부의 스크립트에서 window.parent를 사용하면 상위 페이지의 DOM에 접근할 수 있습니다. 단, 서로 다른 도메인 간에는 보안 정책(동일 출처 정책, Same-Origin Policy)으로 인해 부모 창의 내부 콘텐츠에 접근할 수 없으므로 주의해야 합니다.