Javascript 페이지 이동, 현재 주소 확인: window.location

# window.location 속성

1. 브라우저의 최상위 전역객체인 widnow 에 정의된 속성이다.

2. 브라우저 접속 주소와 관련된 프로퍼티, 메서드를 보유하고 있다.

3. 주로 아래와 같은 일을 수행하는데 활용한다.

1) 현재 접속 중인 URL 주소 파악

2) 새로고침

3) 다른 URL 주소로 페이지 이동

---

# location 페이지 이동 관련 프로퍼티와 메서드

1.  location.href  프로퍼티

1) "현재 접속 중인 URL 주소"를 확인할 수 있다.

// 1-1. 현재 접속중인 주소URL 체크
location.href; // 출력결과: http://dogumaster.com

 

2) 다른 URL 주소 설정 시, 해당 페이지로 이동한다.

// 1-2. 다른 주소 URL로 이동
location.href = "http://dogumaster.com"

 

2.  location.reload()  메서드

: 현재 페이지를 새로고침 한다.

// 2. 새로고침
location.reaload();


// 아래 코드도 새로고침을 수행한다.
location = location;

* 참고: location = location 코드도 새로고침을 수행한다.

 

3.  location.assign("URL")  메서드

: 이력을 남기며, "URL 주소"의 페이지로 이동시킨다.

// 3. 다른 주소로 "페이지 이동"
loaction.assign("http://dogumaster.com");

* assign()은 이력을 남기므로 뒤로가기를 통해 이전 페이지로 돌아갈 수 있다.

 

4.  location.replace("URL")  메서드

: 이력을 남기지 않고, 현재 페이지를 "URL주소"의 페이지로 교체한다.

// 4. 다른 주소 URL로 "페이지 교체"
location.replace("http://dogumaster.com");

* replace()는 이력을 남기지 않으므로 뒤로가기를 통해 이전 페이지로 돌아갈 수 없다.

---

# location.href vs. location.assign() vs. location.assign()

1. location.href 와 location.assign()은 이력을 남기며, 다른 페이지로 이동한다.

: 따라서 브라우저의 "뒤로가기 버튼" 등을 통해 이전 페이지로 복귀할 수 있다.

* 이 둘의 기능은 사실상 같은데, location.href가 좀더 빠르다는 것 같다.

 

2. location.replace()는 이력을 남기지 않고, 현재 페이지를 교체한다.

: 따라서 "뒤로가기 버튼"으로 이전 페이지로 복귀할 수 없다.

* 만약 뒤로가기 버튼을 누르면 전전 페이지로 돌아갈 가능성이 높다.