🌐 window.open (새창 열기/닫기) 사용법 💯 정리

...

window.open (새창 열기)

웹브라우저에서 새창(팝업창)을 열기 위해서 가장 간단히 사용할 수 있는 방법이 바로 자바스크립트 window 객체의 open() 함수를 사용하는 것이다.

var popup = window.open('팝업주소', '팝업창 이름', '팝업창 설정');

다음은 팝업 클릭시 네이버창 팝업 띄우는 예제이다.

See the Pen window.open by barzz12 (@inpaSkyrim) on CodePen.

window.open 인수 정리

var popup = window.open(url, name, option);

url

새창(팝업창)에 보여질 주소 다. 선택적인 값으로 비워두면 빈창(about:blank)이 보이게 된다.

name

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

다음 속성들을 지정해 넣으면 된다.

_blank : 새 창으로 연다. (기본값)
_parent : 부모 프레임에 열린다.
_self : 현재 페이지를 대체한다.
_top : 로드된 프레임셋을 대체한다.
name(임의의 이름) : 새 창이 열리고 창의 이름을 지정한다. 동일한 이름에 다시 open() 을 하면 기존의 열린창의 내용이 바뀐다. 다른 이름을 사용하면 또다른 새창이 열린다.

option

fullscreen : 팝업 전체화면 출력 여부 ( IE에서만 작동 )
toolbar : 상단 도구창 출력 여부 ( IE, FireFox 에서만 작동 )
location : 메뉴 아이콘 출력여부 ( Opera 에서만 작동 )
resizeable : 팝업창 리사이즈 가능여부 ( 크롬에서는 작동 안함)
scrollbars : 팝업 스크롤바 사용 여부
menubar : 메뉴 출력 여부
width : 팝업창의 가로 길이
height : 팝업창의 세로 길이
top : 창의 화면 위에서부터의 팝업 위치 지정
left : 창의 화면 왼쪽에서부터의 팝업 위치 지정

ex) 가로 500px, 세로 700px, 스크롤바 가능, 사이즈변경X

window.open('http://www.naver.com', '네이버팝업', 
           'width=500, height=700, scrollbars=yes, resizable=no')

//속성 지정하지 않은 기본창
window.open("http://eschyles.mireene.com/", "", "");  

//메뉴바 없는 팝업
window.open("http://eschyles.mireene.com/", "", "menubar=1");  

//풀스크린 방식
window.open("http://eschyles.mireene.com/", "", "fullscreen"); 

//채널모드
window.open("http://eschyles.mireene.com/", "", "channelmode"); 

// 상태표시바 있는 팝업
window.open("http://eschyles.mireene.com/", "", "width=400, height=300, status=1");

//크기 width400 height300 팝업창
window.open("http://eschyles.mireene.com/", "", "width=400, height=300");

//위치 left=500, top=400 에서 열리는 팝업창
window.open("http://eschyles.mireene.com/", "", "width=400, height=300, left=500, top=400");

//스크롤바 있는 팝업
window.open("http://eschyles.mireene.com/", "", "width=400, height=300,  scrollbars=1");

//주소표시줄 있는 팝업
window.open("http://eschyles.mireene.com/", "", "width=400, height=300, left=100, location=1");

// 창 컨트롤 모두 활성 화
window.open("/popup.html", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");

replace

true : 현재 히스토리를 대체.
false : 히스토리에 새 항목을 만든다

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

window.open 반환값

새로 만들어진 창 객체가 반환된다. 창의 생성에 실패하면 null을 반환한다.

이 객체를 통해서 새창을 제어할 수 있다. 예로 ~~popup.close()~~ 로 창을 닫을 수 있다.

var popup = window.open('팝업주소', '팝업창 이름', '팝업창 설정'); // 새로 만들어진 창 객체가 반환되서 popup변수에 저장
popup.close(); // 열었던 새창 닫기

window.open url 주소 유의사항

넘겨줄 url에 GET형식의 변수를 넘겨줄때 유의사항이 있다.

예를 들어 다음과 같이 key와 value를서 팝업 html에 넘겨서 사용하려고 하면, 저대로 open 파라메터로 줘버리면 에러가 뜬다. 왜냐하면 url은 [ 나 ] 같은 특수문자는 반드시 인코딩 해야되기 때문이다. 그래야 브라우저 측에서 디코딩하여 사용할 수 있다.

window.open("http://localhost:8080/viewer.html?key1=123123&key2=[1][2]");

해결방법으로는 url 문자열을 인코딩 해주면 된다.

var uri = 'http://localhost:8080/viewer.html?key1=123123&key2=[1][2]';
var res1 = encodeURI(uri); // url문자를 반드시 먼저 인코딩한다.
window.open(res1, '', 'width=900,height=800');

[JS] 📚 URL 인코딩 & 디코딩

URL 인코딩 인코딩은 데이터를 다른 포맷(형식)으로 변환한다는 뜻입니다. URL 인코딩은 URL에서 사용할 수 없는 문자를 변환하는 javascript 프로세스입니다. 예를 들어, URL에 한국어는 사용할 수 없

inpa.tistory.com

window.close (창 닫기)

자바스크립트를 통해 브라우저 창이나 탭을 닫는 방법은 간단하다.

window.open으로 새창을 열었다면 window.close로 스크립트로 닫을수 있다.

다만, 스크립트나 Link를 기준으로 열린 창만 닫힌다. window.open() 함수를 통해 열린 웹 페이지나 Link를 통해 열린 웹 페이지만 window.close() 함수가 동작한다는 이야기이다.

<div>
    <button onclick="newTabClick()">새창 열기</button>
    <button onclick="closeTabClick()">새창 닫기</button>
</div>

<script>
    let myWindow;
    
    function newTabClick() {
    	//open한 새창을 변수 저장
    	myWindow = window.open('http://www.naver.com', '네이버팝업', 'width=700px,height=800px,scrollbars=yes');
    }

    function closeTabClick() {
    	// 변수를 close해 새창을 닫음
    	myWindow.close();
    }
</script>

See the Pen window close by barzz12 (@inpaSkyrim) on CodePen.