javascript 페이지 이동하기, 새 창 띄우기 location.href, replace, window.open

 

 

location.href와 location.replace를 이용해서 페이지를 이동시키는 것이 가능하다.

​

새 창으로 팝업을 띄우는건 window.open()!

​

* href와 replace의 다른점은 href는 페이지 이동을 의미하지만,

replace는 현재 페이지에 덮어씌운다. 그래서 이전 페이지 back이 안된다고 한다.

​

 

<script>
    ...
    var link = 'http://www.naver.com';
    window.location.href = link;       //웹개발할때 숨쉬듯이 작성할 코드
    window.location.replace(link);     // 이전 페이지로 못돌아감
    window.open(link);                 //window.open은 옵션이 여러가지 있음
</script>

 

 

​

window.open을 조금 더 살펴보자.

​

​

문법 : var ret = window.open(url, name, specs, replace);

url : 새창에 보여질 주소, 비워두면 빈창(about:blank)로 나옴

name: 새로 열릴 창의 속성 또는 이름을 지정. 기본값은 _blank

- _blank : 새 창이 열림. 기본값

- _parent : 부모 프레임에 열림

- _self : 현재 페이지를 대체

- _top : 로드된 프레임셋을 대체

- name(임의의 이름) : 새창이 열리고 창의 이름을 지정함. 동일한 이름에 다시 open()을하면 기존의 열린창의

내용이 바뀜. 다른 이름 사용시 또 다른 새창이 열림

​

specs : 선택적인 값. 창 크기, 스크롤여부, 리사이즈 가능 등 속성 정의

- channelmode=yes|no|1|0 : 전체화면으로 창이 열림. IE만 동작한다고 함

- fullscreen=yes|no|1|0 : 전체 화면 모드. IE에서만 동작

- height=pixels : 창의 높이를 지정

- width=pixels : 창의 너비를 지정

- left=pixels : 창의 화면 왼쪽에서 위치를 지정. 음수 불가능

- top=pixels : 창의 화면 위쪽에서 위치를 지정. 음수 불가능

- location=yes|no|1|0 : 주소 표시줄 사용여부를 지정

- menubar=yes|no|1|0 : 메뉴바 사용여부를 지정

- resizable=yes|no|1|0 : 창의 리사이즈 가능 여부 지정. IE만 동작

- scrollbars=yes|no|1|0 : 스크롤바 사용여부 지정. IE, 파폭, 오페라만 동작한다고..

- status=yes|no|1|0 : 상태바 보여줄지 지정

- titlebar=yes|no|1|0 : 타이틀바 보여줄지 지정. 호출 응용프로그램이 HTML 응용 프로그램이거나 신뢰할 수

있는 대화 상자가 아니면 무시된다고 함

- toolbar=yes|no|1|0 : 툴바를 보여줄지 지정. IE, 파폭에서만 동작한다고..

​

​

​

자꾸 쓰다보니 트와이스 Yes or Yes?노래가 계속 생각나네..암튼..

​

​

​

replace : 히스토리 목록에 새 항목을 만들지 현재 항목을 대체할지 지정한다.

- true : 현재 히스토리를 대체

- false : 히스토리에 새 항목을 만듬

​

​

​

window.open의 예)

 

<script>
//팝업 주소, 팝업창 이름, 팝업창 설정
window.open("popup.html", "PopupNew", "width=500,height=600");

window.open("popup.html", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");

window.open('popup.html', 'pop01', 'top=10, left=10, width=500, height=600, status=no, menubar=no, toolbar=no, resizable=no');


function windowPopup() {
    var popUrl = "popup.html";
    var popOption = "top=10, left=10, width=500, height=600, status=no, menubar=no, toolbar=no, resizable=no";
    window.open(popUrl, popOption);
}
</script>