window.location

 window.location object는

1.  현재 브라우저 페이지의 url(href)를 얻어오거나

2. 기존의 페이지를 새로운 페이지로 넘어가게 합니다. 

 

 window.location 객체에는 href, hostname, pathname, protocol, assign 등이 존재합니다.

 

 이 중 href, hostname, pathname, protocol은 객체명만 불러올 경우 현재 uri(href)를 불러오지만

값을 입력해줄 경우 새로운페이지로 redirect해줍니다. 

 

href, hostname, pathname, protocol는 property이지만 assign은 method입니다.

 

window.location 프로퍼티들을 사용하는 방법에는 2가지가 있습니다.

다음 예제를 통해 window.location 객체에 대해 살펴봅시다

 

window.location.href 

• 하나는 현재 브라우저 페이지의 url(href)의 값을 얻어오는 방법입니다.

window.location.href // https://today-is-hoho.tistory.com/34
console.log(window.locaton.href) // https://today-is-hoho.tistory.com/34

 

• 다른 하나는  새로운 페이지로 넘어가게 해주는 방법입니다.

window.locaton.href = 25

window.locaton.href=25 라는 코드를 현재 페이지 console창에 입력했을 경우 

today-is-hoho.tistory.com/25 페이지로 이동하게 됩니다.

 

 

window.location.hostname 

• window.location.hostname은 웹호스트의 도메인 이름을 return 합니다.

window.location.hostName 
// "today-is-hoho.tistory.com"

또한 window.location.hostname의 값을 명시해줄 경우 명시해준 도메인이름으로 현재 브라우저가 Redirect 됩니다.

window.location.hostName = naver.com
// https://www.naver.com/34 페이지로 이동

 

window.location.pathname

• window.location.pathname은 현재 페이지에 path 혹은 filename을 return합니다.

window.location.pathname 
//34

위와 같이 href나 hostname처럼 window.location.pathname의 값을 명시해줄 경우 명시해준 도메인이름으로 현재 브라우저가 Redirect 됩니다.

 

window.location.pathname = 30
//https://today-is-hoho.tistory.com/30 페이지로 redirect

window.location.pathname = "www.naver.com"
// "https://today-is-hoho.tistory.com/www.naver.com" 로 redirect

 

 

window.location.protocol 

• window.location.protocol은 웹에 프로토콜을 return합니다.

window.location.protocol
//"https"

 

 

window.location.assign() 

• window.location.assign()은 새로운 문서를 불러옵니다.

window.location.assign = "www.naver.com";
//https://today-is-hoho.tistory.com/www.naver.com 로 redirect

 

 

이상 window.location 객체 대해 알아보았습니다.

 

 

참고

www.w3schools.com/js/js_window_location.asp