자바스크립트 location 객체

location 객체

location 객체는 자바스크립트에서 현재 페이지의 URL을 나타내며, 브라우저의 주소 표시줄과 관련된 정보와 메서드를 제공합니다.

이 객체를 통해 웹 페이지의 URL을 조회하거나 변경할 수 있으며, 이를 통해 페이지 리다이렉션, 페이지의 특정 부분으로의 이동, URL의 구성요소(프로토콜, 호스트, 경로 등) 접근 등의 작업을 수행할 수 있습니다.
location 객체는 window 객체의 속성으로, window.location으로 접근할 수 있습니다. 단순히 location으로도 접근이 가능합니다.

location 객체의 주요 속성

• href: 전체 URL을 가져오거나 설정합니다. URL을 새 값으로 설정하면, 해당 URL로 페이지가 리다이렉션됩니다.
• protocol: 페이지의 프로토콜을 나타냅니다. 예: 'http:', 'https:'
• host: 호스트 이름과 포트 번호(있는 경우)를 포함합니다. 예: 'example.com:80'
• hostname: 호스트 이름만 포함합니다. 예: 'example.com'
• port: 포트 번호를 나타냅니다. 예: '80'
• pathname: URL의 호스트 이름 다음에 오는 경로를 나타냅니다. 예: '/path/example.html'
• search: URL의 쿼리 문자열을 나타냅니다. 예: '?query=test'
• hash: 앵커 부분(# 이후의 부분)을 나타냅니다. 예: '#section1'

location 객체의 주요 메서드

• reload(): 현재 페이지를 새로 고칩니다. 인자로 true를 넘기면 서버에서 페이지를 새로 요청하고, false나 인자를 넘기지 않으면 캐시된 페이지로 리로드합니다.
• replace(url): 현재 페이지를 새 URL로 교체합니다. 이 메서드로 페이지를 이동하면, 현재 페이지는 브라우저의 히스토리에 남지 않습니다.
• assign(url): 새 URL로 페이지를 로드합니다. href 속성에 값을 할당하는 것과 유사하지만, 명시적으로 메서드 형태로 제공됩니다. 이 방식으로 이동하면 히스토리에 남아 "뒤로 가기" 버튼으로 돌아올 수 있습니다.

예시

location 객체를 사용함으로써, 자바스크립트를 통해 동적으로 페이지의 위치를 제어하고 사용자를 다른 페이지로 안내하는 등의 작업을 수행할 수 있습니다.

// 현재 페이지의 URL을 콘솔에 출력
console.log(location.href);

// 쿼리 문자열을 콘솔에 출력
console.log(location.search);

// 페이지를 다른 URL로 리다이렉션
location.href = '<https://example.com>';

// 페이지를 새로 고침
location.reload();

// 현재 페이지를 새 URL로 교체
location.replace('<https://example.com/new-page.html>');

// 새 페이지로 이동
location.assign('<https://example.com/another-page.html>');

 

1 . 현재 윈도우의 url 알아내기

console.log(location.toString(), location.href);

//결과 : location.toString()
//file:///Users/macpro15/Desktop/study/240127.html 

//결과 : location.href
//file:///Users/macpro15/Desktop/study/240127.html

alert (location) : 인자를 문자화
console.log(location) : 정보화

url 파싱

console.log(location.protocol, location.host, location.port, location.pathname, location.search, location.hash)