[HTML/CSS/JavaScript] window.open() 을 이용해서 특정 웹페이지를 여는 버튼 만들기

html 파일에서 버튼을 만들고 Javascript를 이용해서

특정 웹페이지를 띄우는 코드를 설명하겠다. 

---

naverButton.html

1행 - Webpage 라는 이름의 버튼을 만들고, 버튼을 누를 경우 openWeb() 함수 실행

4~6행 - openWeb() 함수 정의

 

window.open() 은 

window.open("열고자 하는 URL", "사용자 지정 URL명", "옵션")

으로 구성된다. 

 

옵션에는

top : 모니터 상단으로부터 떨어진 거리 

ex) top=100 : 모니터 상단으로부터 100px 떨어진 거리에서 새 창 열기  

left : 모니터 좌측으로부터 떨어진 거리 

ex) left=100 : 모니터 좌측으로부터 100px 떨어진 거리에서 새 창 열기

width : 새 창의 폭

ex) width=500 : 폭 500px 의 새 창 열기

height : 새 창의 높이 

ex) height=600 : 높이 600px 의 새 창 열기

 

menubar : 메뉴 출력 O/X

ex) menubar=yes : 메뉴 출력 O

toolbar : 상단 도구 O/X

ex) toolbar=no : 상단 도구 출력 X

scrollbars : 스크롤바 O/X

ex) scrollbars=yes : 스크롤바 O

resizeable : 팝업창 사이즈 조절 O/X

ex) resizeable = yes : 사이즈 조절 O

등이 있다.

 

예시로 

window.open('http://naver.com', 'naver', "top=100, left=100, width=500, height=600, menubar=yes, toolbar=no, scrollbars=yes, resizable=yes");

이면 모니터 상단으로부터 100px, 좌측으로부터 100px 떨어져 있는 곳에

크기 500px*600px  / 메뉴바, 스크롤바 O, 크기 조절 가능한

네이버 팝업창을 띄울 것이다.

아래는 위 코드를 통해 제작한 버튼이다. 

 

 

위 버튼을 누르면 입력해둔 http://naver.com 링크로 새 창이 뜨는 것을 확인할 수 있다.