[자바스크립트] window.open()으로 새 창 열기

 

자바스크립트로 새 창을 띄우는 방법에는 window.open() 메서드가 있다.

 

window.open(url, name, specs, replace)

 

이런 문법으로 쓰게 되는데, 구체적으로 예시를 들자면

 

let url = 'https://duknock.tistory.com';
let name = 'popup';
let specs = 'width=720, height=500, top=100, left=200';
let replace = false;
window.open(url, name, specs, replace);

 

이런식이다.

 

 

 

 

return

새로 열린 창 객체가 반환된다. 그래서 변수에 할당할 수 있다.

 

let newWindow = window.open(url, name, specs, replace);

 

이렇게 변수에 할당하면 자바스크립트에서 해당 창 객체를 제어할 수 있다. newWindow.close(); 이런식으로... (창 닫음)

 

 

---

URL

 

 

window.open(url, name, specs, replace);

 

 

 

url을 입력하면 해당 주소의 팝업이 뜬다. 선택적인 값으로, 비워두면 빈창(about:blank)이 뜬다.

 

 

 

name

 

window.open(url, name, specs, replace);

 

 

새로 열릴 참의 속성 또는 창의 이름을 지정한다.

 

입력 안 할 경우 기본값은 "_blank"  이다.

 

name이 "_blank"인 상태로 여러 번 open()을 하면 계속 또 다른 새 창이 열린다. 

 

name값을 임의로 입력하고, 동일한 이름에 다시 open() 을 하면 기존 열린창의 내용이 바뀐다.

 

다른 이름을 사용하면 또다른 새창이 열린다.

 

 

 

specs

 

window.open(url, name, specs, replace);

 

 

spec은 창의 너비, 높이, 화면상의 위치 등의 속성을 지정한다.

 

- width : 창의 너비 (px)

- height : 창의 높이 (px)

- left : 왼쪽 기준 새 창이 열릴 위치 (px) 

- top : 위쪽 기준 새 창이 열릴 위치 (px)

 

 

replace

 

window.open(url, name, specs, replace)

 

 

replace는 히스토리에 새 항목을 만들지, 기존 항목을 대체할지 여부를 결정한다. 불리언 값을 넣는다. (true, false)

 

- true : 현재 히스토리를 대체한다.

- false : 새 히스토리 항목을 만든다.

 

 

 

---

 

그리고 이렇게 window.open()으로 열린 창과 기존 창 간에는 계층구조가 생기게 되는데,

 

기존 창은 부모 창이 되고, 열린 창은 자식 창이 된다.

 

아까 window.open()을 변수에 할당해서 제어하는 방법이 부모창에서 자식창을 제어하는 방법이고,

 

자식창에서는 window.opener 속성을 이용하여 자식창에서 부모창을 제어할 수 있다.

(window는 생략하고 opener 만 써도 됨)

 

 

return

만약 A 창에서 B를 열었다면 B.opener 는 A를 반환한다.

현재 창이 window.open() 으로 열린 창이 아니라면, null을 반환한다.

 

---