[JS BOM] 자바스크립트로 URL 정보 가져오기

경로, 프로토콜, 포트 등 window.location 속성은 현재 페이지의 URL 정보를 포함하는 객체입니다. 이 객체에는 URL의 여러 조각에 대한 정보를 제공하는 여러 속성이 있습니다.

 

href 속성은 전체 URL을 문자열로 반환합니다.

window.location.href
>> "https://www.sitepoint.com/premium/books/javascript-novice-to-ninja-2nd-edition/"

 

이 속성(이 섹션의 대부분의 다른 속성들도 마찬가지)은 읽기/쓰기 속성이므로 할당을 통해 변경할 수도 있습니다. 이렇게 할 경우 새 속성을 사용하여 페이지가 다시로드됩니다. 예를 들어, 다음과 같은 코드를 브라우저 콘솔에 입력하면 페이지가 google 페이지로 리디렉션됩니다.

window.location.href = 'https://www.google.com/'
>> "https://www.google.com/"

 

protocol 속성은 사용된 프로토콜을 나타내는 문자열을 반환합니다 (예: http, https, pop2, ftp 등). 끝에는 콜론(:)이 있는 것에 유의하세요.

window.location.protocol
>> "https:"

 

host 속성은 현재 URL의 도메인과 포트 번호를 나타내는 문자열을 반환합니다 (기본 포트 80을 사용하는 경우 일반적으로 생략됩니다).

window.location.host
>> "www.google.com"

 

hostname 속성은 현재 URL의 도메인을 나타내는 문자열을 반환합니다.

window.location.hostname
>> "www.google.com"

 

port 속성은 포트 번호를 나타내는 문자열을 반환합니다. 그러나 URL에 포트가 명시되어 있지 않은 경우 빈 문자열을 반환합니다.

window.location.port
>> ""

 

pathname 속성은 도메인 다음에 오는 경로를 나타내는 문자열을 반환합니다.

window.location.pathname
>> "/premium/books/javascript-novice-to-ninja-2nd-edition/"

 

search 속성은 "?"로 시작하여 쿼리 문자열 매개변수가 따라오는 문자열을 반환합니다. 쿼리 문자열 매개변수가 없는 경우 빈 문자열을 반환합니다.

window.location.search
>> "?q=darren%20jones&firstSearch=true"

 

hash 속성은 "#"으로 시작하여 단편 식별자가 따라오는 문자열을 반환합니다. 단편 식별자가 없는 경우 빈 문자열을 반환합니다.

window.location.hash
>> ""

 

origin 속성은 현재 페이지의 원래 프로토콜과 도메인을 보여주는 문자열을 반환합니다. 이 속성은 읽기 전용이므로 변경할 수 없습니다.

window.location.origin
>> "https://www.google.com"

 

window.location 객체에는 다음과 같은 메서드들도 있습니다

reload() 메서드는 현재 페이지를 강제로 다시 로드하는 데 사용될 수 있습니다. 매개변수로 true를 지정하면 페이지를 캐시하지 않고 서버에서 페이지를 다시로드하도록 브라우저를 강제할 수 있습니다.

 

assign() 메서드는 매개변수로 제공된 URL에서 다른 리소스를 로드하는 데 사용될 수 있습니다.

 

예를 들어:

window.location.assign('https://www.google.com/')

 

replace() 메서드는 assign() 메서드와 거의 동일하지만, 현재 페이지가 세션 기록에 저장되지 않으므로 사용자는 뒤로 버튼을 사용하여 이전 페이지로 돌아갈 수 없습니다.

 

toString() 메서드는 전체 URL을 포함하는 문자열을 반환합니다.

window.location.toString();
>> "https://www.sitepoint.com/javascript/"