[Window] JS - opener 속성 ★ - 팝업창의 부모창 제어 (= opener속성 = 오프너속성) ※ 클릭 시, 부모창 새로고침

1. opener 예제 - 부모창에 텍스트 넣기
2. opener 정의
3. opener 구문
4. opener 예제 - 부모창 새로고침 방법 3가지
5. opener 예제 - 부모창 새로고침 후, 자식창 닫기
6. opener 예제 - 부모창 URL 이동 후, 자식창 닫기

opener 예제 - 부모창에 텍스트 넣기 

※ 부모창에 아래 코드 입력

 

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  var hz = window.open("", "hz", "width=200,height=100");

  hz.document.write("<p>홈짱닷컴 Homzzang.com</p>");

  hz.opener.document.write("<p>opener창</p>");

}

</script>

 

결과보기

※ 부모창: 대상창(=자식창)을 띄우는 소스가 있는 창.

opener 정의

 

윈도우창(=자식창)을 오픈한 부모창에 대한 참조.

 

---

 

1.

window.open() 메서드로 윈도우창 열 때, 자식창 (=팝업 창)에서 operner 속성 사용해 부모창 (= 기존 창)의 세부 정보 반환.

 

2.

부모창 닫기 : window.opener.close()

 

3.

모든 브라우저 지원.

 

opener 구문

 

window.opener

 

---

[반환값]

 

부모창에 대한 참조.

 

opener 예제 - 부모창 새로고침 방법 3가지

[목차]

• 방법1 - 부모창 단순 새로고침
• 방법2 - 부모창 GET방식으로 새로고침
• 방법3 - 부모창 이동주소 직접 지정

---

방법1 - 부모창 단순 새로고침

<script>

function openerReload(){

    opener.location.reload();

    window.close();

}

</script>

---

방법2 - 부모창 GET방식으로 새로고침

주의: POST 방식 경우 에러 발생.

<script>

function openerReload() { 

   window.opener.document.location.href=window.opener.document.URL;

   window.close();

}

</script>

 

---

방법3 - 부모창 이동주소 직접 지정

 

<script>

function openerReload(){

    opener.location.replace("URL주소");

    window.close();

}

</script>

 

opener 예제 - 부모창 새로고침 후, 자식창 닫기

※ 팝업창(=자식창)에 아래 코드 입력

 

<script>

// 부모창 새로고침 후, 자식창 닫기.

opener.document.location.reload();

self.close();

</script>

opener 예제 - 부모창 URL 이동 후, 자식창 닫기

※ 팝업창(=자식창)에 아래 코드 입력

 

<script>

// 부모창 URL 이동 후, 자식창 닫기

opener.document.location.href="이동할 URL 주소";

self.close();

</script>