Javascript를 이용하여 브라우저 새 창 띄우기

자바스크립트로 location.href 를 설정하여 다른 페이지로 이동하는 코드를 짜는 경우가 있는데, 이동 하는 페이지를 새 창(브라우저)으로 띄우고 싶은 경우가 있습니다.

 

이럴 때는 다음과 같은 방법을 사용합니다.

 

// 새 브라우저 창을 띄워 DAUM 페이지로 이동

window.open('http://www.daum.net ', '_blank'); 

 

첫번째 인자로는 이동할 페이지 URL 주소

두번째 인자로는 새 창을 띄울 윈도우의 이름입니다.

 

 

위의 코드를 호출하게 되면 새 브라우저 창의 뜨워 다음 페이지를 열어 줍니다. 계속해서 페이지에서 위의 코드를 호출해도 계속해서 새 창이 뜹니다.

(브라우저 마다 약간의 차이는 있는데, 익스플로러, 크롬, 파이어폭스 같은 경우는 동일한 브라우저에 새탭으로 새창을 띄우고, 사파리는 새 브라우저를 띄웁니다.)

 

한가지 재미있는 것은 위의 두번째 인자로 _blank로 하는 것과 그렇지 않은 것에 차이가 있습니다.

위의 코드를 조금 수정하여

 

window.open('http://www.daum.net ', 'newWindow');

 

같이 호출하게 되면 위의 코드를 호출하는 버튼 또는 링크를 클릭하면 처음 새 창이 뜬 페이지에 계속 해서 페이지를 띄우려고 합니다. 즉, 여러번 호출을 해동 실제 뜨는 새 창은 하나 뿐입니다.

 

처음 위의 코드가 호출 될 때, newWindow라는 이름을 가진 새창을 만들어서 페이지를 띄우고, 그 이후 다시 위의 코드가 호출되면 역시 newWindow라는 이름의 브라우저가 이미 띄워져 있는지 찾고, 있으면 해당 브라우저 창에 페이지를 불러오려하기 때문입니다.

 

그런데 '_blank' 는 특수 속성 값으로 이름이 없는 창이라는 의미를 가집니다. (이는 모든 브라우저에서 동일하게 적용됩니다.) 이름이 없는 창이므로 위의 코드가 계속 호출되더라도 계속 해서 새창을 띄웁니다.

 

 

위와 유사한 코드로 다음과 같이 짤 수도 있습니다.

 

var newWindow = window.open("about:blank");
newWindow.location.href = 'http://www.daum.net';

 

위의 코드 또한 처음 설명한 코드와 동일하게 동작합니다.

이름이 없고, 이동 페이지 또한 없는 window.open 객체를 만든 후에 href 값을 주어 페이지를 이동시키는 방법입니다. (처음 소개한 코드가 더 간단하긴 합니다.^^)

 

 

---------------------------------------------------------------------------------------------

위의 코드들이 정상 작동함은 다음의 브라우저에서 확인하였습니다.

 

인터넷 익스플로러(IE) (버전 11.0.9600)

구글 크롬 (버전 37.0.2062)

사파리 (버전 5.1.7)

파이어폭스 (버전 32.0.1)