SCRIPT window.open 크기 정하기 - 새창 열기 스크립트 태그 (크기, 위치, 툴바 등 조정)
페이지 정보
조회 1,542회 작성일 22-05-15 01:01
본문
새창 열기 스크립트 태그
window.open 크기 정하기
브라우저 방식이 바뀌면서 이제는 새창 단순 링크라면 그냥 새탭으로 열려버리게 되었다.
그래서 대부분의 홈페이지가 새탭 열기를 하고 있지만...
굳이 새창으로 링크를 열어야 할 경우라면 window.open의 가로 세로 크기 속성을 이용하면 된다.
window.open 크기 정하기 - 새창 열기 스크립트 태그 (크기, 위치, 툴바 등 조정)
새창 열기 예제 코드
새창 스크립트를 쓰면서 가로와 세로를 지정해 주면 새탭이 아니라 새창으로 띄울 수 있다.
이것은 일반적인 <a> 태그의 target="_blank"과는 다른 방식이다.
먼저 아래 기본 코드를 보고 공부해 보자.
[code]
<a href="javascript:void(window.open('대상URL', '창 이름', '속성과 옵션들))">클릭</a>
[/code]
javascript:void까지는 그냥 링크에 적용되는 자바스크립트니까 잘 알고 있을 것이다.
그 다음에 오는 window.open( )가 새창 열기 태그의 핵심이다.
여기에는 각종 속성 옵션이 들어가는데, 종류별로 아래에서 설명하겠다.
window.open 새창 크기 등 기본 옵션
window.open에는 3가지의 외따옴표가 이어질 수 있다. 아래처럼...
window.open(' ', ' ', ' ') // 이렇게 말이다.
이 중에서 첫 번째(대상)와 두 번째(창 이름)는 당연한 것이니까 넘어가고, 세 번째 외따옴표에 들어갈 속성들을 알아 보자.
여기에는 아래 같은 속성들을 사용할 수 있다. 우선 기본 옵션을 보자.
top : 나타날 위치의 높이
left : 나타탈 위치의 왼쪽 간격
width : 가로 크기
height : 세로 크기
기본 옵션으로 예를 들자면 이렇다.
[code]
<a href="javascript:void(window.open('대상URL', '창 이름', 'top=20px, left=20px, width=600px, height=450px'))">클릭</a>
[/code]
이 많은 속성들이 마지막 하나의 외따옴표 안에 들어간다. 아래 속성까지 들어가면 매우 긴 속성이 하나의 외따옴표에 들어가게 되는 것이다.
단, 속성의 구분은 중간에 쉼표( , )를 사용한다.
새창 열기 스크립트 바와 줄 표시
브라우저는 기본적으로 위와 아래 등에 여러 기능 줄이 붙어 있다. 예르 들자면 주소표시줄, 툴바줄 같은 것이다.
심지어 따로 표시가 없어도 창을 끌면 크기를 조절할 수 있는 기능까지 들어 있다.
이런 것들이 다 필요없어서 막아야 할 때는 어떡할까?
toolbar : 툴바 표시줄
staus : 상태 표시줄
memubar : 메뉴 표시줄
location : 주소 표시줄
directoryies : 연결 표시줄
resizable : 크기 조절 가능/불가능
이것들을 다 막아버리려면 아래처럼 하면 된다.
[code]
<a href="javascript:void(window.open('대상URL', '창 이름', 'toolbar=no, staus=no, memubar=no, location=no, directoryies=no, resizable=no'))">클릭</a>
[/code]
물론 꼭 나타내야 한다면 no 대신 yes를 사용하면 된다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
그런데 여기서 주의할 것이 있다.
1. yes, no 대신 1, 0을 쓰는 사람들도 있다.
2. 따로 추가로 설명했던 toolbar, staus, memubar, location, directoryies, resizable는 명령이 먹히지 않는 브라우저도 있다는 것이다.