'자바스크립트 window.open'에 해당되는 글 1건

안녕하세요. 제임스 입니다. 

이번에는 자바스크립트를 이용하여 새창 띄우는 방법에 대해 정리해 보겠습니다. 

■ window.open(url, windowName, [windowFeatures]);

새창 띄우기를 할때는 window.open 을 사용하면 됩니다. 

URL 

호출 할 웹페이지 주소 

windowName 

오픈 할 창 이름

windowFeatures

윈도우 기본 사이즈나, 포지션, 스크롤바 표기 여부등 오픈할 창의 설정값

- left: 새창의 위치를 현재 작업 환경의 좌측으로 부터 거리 지정

- top: 새창의 위치를 현재 작업 환경의 상단으로 부터 거리 지정

- height: 창 높이 

- width: 창 넓이

- menubar: 메뉴바 표시 여부 (yes / no)

- toolbar: 툴바 표시 여부 (yes / no)

- location: 주소입력 창 표시 여부 (yes / no)

- resizable: 창 사이즈 변경 가능 여부 (yes / no)

위와 같은 속성 들은 거의 모든 브라우저에서 지원 하고 있습니다. 

예전... 익스플로러가 대세였던 시절에는 fullscreen 이라는 속성도 사용했습니다. 이름 그대로 창을 최대 사이즈로 열어 주는 속성인데요. 안타깝게도 익스플로러에서만 지원 되는 속성으로 사용하지 않으시길 권장 합니다. 

function openNewWindow(){
    window.open("http://jamesdreaming.tistory.com/", // URL
            "제임스의티스토리", // windowName
            "width=1000, height=700, toolbar=no, menubar=yes, scrollbars=no, resizable=yes"  // windowFeatures
    );
}

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

위와 같은 경우 새창이 기존 브라우저 상단에 띄게 됩니다. 

파라미터 값이 세종류가 있지만 windowFeatures 는 입력하지 않아도 됩니다. 

만약 아래와 같이 windowFeatures 를 입력하지 않으면 어떻게 될까요? 

function openNewWindow(){
    window.open("http://jamesdreaming.tistory.com/", // URL
            "제임스의티스토리" // windowName
    );
}

위와 같이 세번째 파라미터를 전달하지 않을 경우 새창이 아니라 새 탭으로 창이 뜨게 됩니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D