[JS] window.open(), window.close(), window.opener(), 팝업(자식창)에서 팝업 호출한 페이지(부모창) 닫기

window.open('URL', 'name', 'specs', 'replace');

• 지정한 URL을 새 창 혹은 현재 창에 불러오고 해당 Window 객체를 반환한다.
  • ex) window.open('popup.html', 'pop01', 'top=10, left=10, width=500, height=600, status=no, menubar=no, toolbar=no, resizable=no');
• 부모 창에서 자식 창의 문서에 접근할 때는 window.open() 함수가 반환하는 객체를 이용한다.
  • 만약 부모 창과 데이터를 주고 받을 자식 창이 여러 페이지에서 공통으로 사용되는 경우(공통 팝업)라면, 자식 창에서 부모 창을 직접 조작하는 것보다 부모 창의 함수를 호출하여 파라미터로 던져주는 방식을 써야 한다.

 

 

4개의 선택적 인자

1. URL
   • 웹 문서 URL
   • 생략하거나 빈 문자열 → about:blank 라는 빈 페이지 URL
2. name
   • 창의 이름 가리키는 문자열
   • 생략 → _blank
   • _blank : 연결된 문서를 읽어 새로운 빈 윈도우에 표시한다. 윈도우 이름은 없다.
   • _media : 연결된 문서를 읽어 미디어 바의 HTML 내용 부분에 표시한다. IE6부터 적용된다.
   • _parent : 연결된 문서를 읽어 바로 상위 모체 창에 표시한다.
   • _search : 연결된 문서를 읽어 브라우저의 검색창에 표시한다. IE5부터 적용된다.
   • _self : 디폴트이며, 연결된 문서를 읽어 현재 창에 표시한다.
   • _top : 연결된 문서를 읽어 최상위 윈도우에 표시한다.
3. specs
   • 새로 열릴 창의 크기와 기능 속성의 목록을 콤마로 구분한 문자열
   • 생략 → 기본 크기, 메뉴 바, 상태표시줄, 도구 바 등등 모든 UI 구성요소 포함
4. replace
   • ture → 새 문서가 이전 문서와 교체
   • false 또는 지정되지 않으면 → 새 문서는 창의 브라우징 히스토리에 새 항목으로 추가

 

 

사용 방법 2가지

1. 직접 태그에 onclick 속성으로 사용
2. function 함수로 호출 사용

 

 

 

---

window.close()

윈도우 창을 닫는다.

 

 

 

---

window.opener()

window.open()으로 윈도우 객체가 생성될 때 자바스크립트는 window.opener 프로퍼티에 윈도우를 연 객체(부모)를 저장한다. 이를 이용하면 자식창에서 부모 창을 컨트롤하거나 서로 데이터를 주고받는 게 가능하다.

 

 

 

---

문제는 close() 함수다.

닫는 방법은 아래 3가지가 있고,

window.close();
self.close();
close();

 

팝업이나 열린 창에서 부모 창을 닫을 때에는 아래와 같은 방법을 쓴다.

window.opener.close();
opener.close();

 

 

이때, close() 함수를 호출하면 창을 닫을 것인지 다이얼로그 창으로 물어본다는 게 문제다.

물어보지 않고 조용히 닫는 방법

→ 닫는 곳의 opener를 (1)닫혀지는 자신 (2)null (3)"" 등의 값으로 설정하면 된다.

// 1. 자신을 닫을 때
self.opener = self; // 또는 null
self.close();

// 2. 팝업이나 열린 창에서 부모 창을 닫을 때
// 먼저 부모창에서
self.opener = self; // 또는 null
// 자식창에서
opener.close();

 

하지만 IE7부터 막혔다.

→ 자기 자신에 윈도우를 하나 열어서 자식 윈도우로 만든 다음에 바로 닫아버리거나 부모창에다 열고 닫아버리면 된다.

// 1. 자기 자신을 닫을 때
window.open('about:blank', '_self').close();

// 2. 팝업이나 열린 창에서 부모 창을 닫을 때
opener.open('about:blank', '_self').close();

 

 

 

 

 

---

출처

https://kcmschool.com/63

https://iamawebdeveloper.tistory.com/46

https://tyboss.tistory.com/entry/Javascript-windowopen-%ED%8C%9D%EC%97%85