자바스크립트로 웹페이지 이동을 제어하는 location 객체 사용 방법

자바스크립트에서 접근할 수 있는 웹 페이지의 URL과 관련된 객체는 "window.location" 객체입니다.

자바스크립트의 URL 관련 제어, 또는 페이지 이동은 모두 이 객체에의 메서드, 또는 속성을 통해 이루어집니다.

메서드로 페이지 제어

"window.location" 객체에는 페이지 이동과 관련된 메서드가 3개 있습니다.

"window"는 전역 객체이므로 "location"만 사용해서 "location.assign()"과 같이 표현할 수도 있습니다.

1. assign() -- 새 페이지로 이동.
2. reload() -- 현재 페이지 다시 로딩.
3. replace() -- 현재 페이지를 대체해서 새 페이지 로딩.

세가지 메서드 중 "assign()" 메서드만 히스토리가 남습니다.

속성으로 페이지 제어

페이지를 제어하는 속성은 window.location.href 1개가 있습니다.

location.href로 사용할 수도 있으며, 읽기, 쓰기가 가능한 속성입니다.

location.href = "url";

"location.href" 속성에 URL을 대입해서 새 페이지로 이동하는 것은 location.assign()과 같습니다.

두 가지 방법 모두 히스토리가 남습니다.

그리고 다음의 2가지 메서드와도 같습니다.

$(location).attr('href',url); // jQuery
window.open("URL","_self","","");

웹사이트의 루트 페이지로 가려면 다음과 같이 location.host 속성을 이용할 수 있습니다.

window.location = '/';

히스토리 추가 여부

히스토리는 전역 객체인 window 밑에 window.history 객체로 관리됩니다.

히스토리 길이 값을 가지고 있는 window.history.length로 히스토리 개수가 늘어나는지를 통해 히스토리가 추가되는지를 알 수 있습니다.