새창 띄우기 window.open

[ javascript ] 새창 띄우기 ( window.open 함수 )

 

window.open()함수

 

Javascript의 함수를 이용해서 새로운 팝업창을 만듭니다.

URL영역은 과거에는 숨길 수 있었지만,

요즘의 사용하는 Browser에서는 숨길 수 없습니다.

(참고) 파라미터 중에 WindowName이 같으면, 같은 창으로 띄워줍니다.

 

 

1. window.open(URL, WindowName [, WindowFeatures]);

 

1) URL

- 웹 문서 URL

 

 

2) WindowName

- open 창 이름 (target 이름)

 

 

3) WindowFeatures

- fullscreen = 전체 창. (yes/no)(default : no)

- location = 주소창이 활성화. (yes/no)(default : yes)

- menubar = 메뉴바 visible. (yes/no)(default : yes)

- titlebar = 타이틀바. (yes/no)(default : yes)

- toolbar = 툴바. (yes/no)(default : yes)

- resizable = 창 사이즈 변경. (yes/no)(default : yes)

- scrollbars = 스크롤바. (yes/no)(default : yes)

- width = 창 가로 크기

- height = 창 세로 크기

<script language="javascript" type="text/javascript">  
<!--  
function openWin(){  
    window.open("http://www.naver.net", "네이버새창", "width=800, height=700, toolbar=no, menubar=no, scrollbars=no, resizable=yes" );  
}  
//-->  
</script>  

<input type=button value="새창띄우기" onclick="javascript:openWin();">

 

 

2. 새창 띄우는 방법

<script language="javascript">  
<!--  
function openWin(){  
    window.open("http://www.naver.net", "네이버새창", "width=800, height=700, toolbar=no, menubar=no, scrollbars=no, resizable=yes" );  
}  
//-->  
</script>  
  
<!-- onclick 이벤트에 직접 입력 -->  
<a href="#" onClick="window.open('http://www.naver.com','네이버','width=800, height=700, toolbar=no, menubar=no, scrollbars=no, resizable=yes');return false;">네이버 새창 열기</a>   
  
<!-- onclick 이벤트에 javascript 함수 호출-->  
<a href="#" onClick="javascript:openWin();">네이버 새창 열기</a>

 

 

3. 새창 닫기

<script language="javascript">  
<!--  
    function closeWindow() {  
            setTimeout(function() {  
        window.close();  
            }, 3000);  
        }  
  
    // 창이 열린 후 3초후에 닫기  
    window.onload = closeWindow();  
//-->  
</script>  
  
<!-- onclick 이벤트에 직접 입력 -->  
<a href="#" onClick="self.close();">새창 닫기</a>   
<a href="#" onClick="javascript:closeWindow();">3초후에 닫기</a>

 

 

출처: http://rocabilly.tistory.com/84

 

window.open()
참고: https://developer.mozilla.org/en-US/docs/Web/API/Window/open