• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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 - 부모창 단순 새로고침


<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>



방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Window JS - Window 객체 - 윈도우객체 (속성/메서드) 종류
Window JS - closed 속성 - 윈도우창 닫힘 체크
Window JS - console 속성 - 콘솔 윈도우객체속성
Window JS - defaultStatus 속성 - 상태표시줄 기본텍스트 (지원X)
Window JS - document 속성 - 웹문서 윈도우객체속성
Window JS - frameElement 속성 - 현재창이 삽입된 <iframe> 요소 반환
Window JS - window.frames 속성 - 프레임 윈도우객체속성 (= window.frames속성 = 윈도우…
Window JS - history 속성 - 히스토리 윈도우객체속성
Window JS - innerHeight 속성 ★ - 윈도우창 순수 내용영역 높이 반환 (= 내용높이 = 내부높이 = …
Window JS - innerWidth 속성 ★ - 윈도우 내용영역 너비(= 내용너비 = 내부너비 = innerWidt…
Window JS - length 속성 - iframe 개수 반환 (= length속성 = 렝스속성) ※ 아이프레임 요소…
Window JS - location 속성 - 위치객체 (= window객체소속, 현재URL정보 갖음)
Window JS - name 속성 ★ - 윈도우창이름 설정/반환 (= 자식창제어)
Window JS - navigator 속성 - 웹브라우저객체 (※ window객체소속)
Window JS - opener 속성 ★ - 팝업창의 부모창 제어 (= opener속성 = 오프너속성) ※ 클릭 시, …
Window JS - outerHeight 속성 ★ -창높이 (=본문창 + 상단도구모음창 + 하단스크롤바) ※ 작업표시줄…
Window JS - outerWidth 속성 ★ - 창너비 (=본문창 +우측세로스크롤바) (IE9 이상)
Window JS - pageXOffset 속성 - 오프셋부터 계산한 스크롤가로길이 (IE9 이상)
Window JS - pageYOffset 속성 - 오프셋부터 계산한 스크롤세로길이 (IE9 이상)
Window JS - parent 속성 ★ - 부모창 (= iframe 태그 있는 창)
1/3
목록
찾아주셔서 감사합니다. Since 2012