location 객체는 현재 브라우저의 URL에 대한 정보를 제공하며, 브라우저의 주소를 읽고 수정하는 데 사용됩니다. 이 객체는 window 객체의 일부로, 현재 문서의 URL을 다루는 여러 프로퍼티와 메서드를 포함하고 있습니다.
주요 프로퍼티
- href: 전체 URL을 반환하거나 설정합니다.
- 예: location.href는 현재 문서의 URL을 반환합니다.
- protocol: URL의 프로토콜 부분을 반환합니다. (예: http:, https:)
- 예: location.protocol은 현재 페이지의 프로토콜을 반환합니다.
- host: 호스트 이름과 포트 번호를 반환합니다. (예: www.example.com:80)
- 예: location.host
- hostname: 호스트 이름만 반환합니다. (예: www.example.com)
- 예: location.hostname
- port: 포트 번호를 반환합니다. (예: 80, 443)
- 예: location.port
- pathname: URL의 경로를 반환합니다. (예: /path/to/resource)
- 예: location.pathname
- search: 쿼리 문자열을 반환합니다. (예: ?query=string)
- 예: location.search
- hash: URL의 해시 부분을 반환합니다. (예: #section)
- 예: location.hash
- reload(): 현재 페이지를 새로 고칩니다.
- 예: location.reload()
- assign(): 지정된 URL로 이동합니다. (이 방법은 이전 페이지를 히스토리에 추가합니다.)
- 예: location.assign('https://www.example.com')
- replace(): 지정된 URL로 이동하지만, 현재 페이지를 히스토리에서 대체합니다. (이 방법은 이전 페이지를 히스토리에 추가하지 않습니다.)
- 예: location.replace('https://www.example.com')
사용 예제
아래는 location 객체의 다양한 프로퍼티를 사용하는 간단한 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Location 객체 예제</title>
</head>
<body>
<h1>Location 객체 예제</h1>
<button id="showLocation">현재 URL 정보 보기</button>
<button id="reloadPage">페이지 새로 고침</button>
<button id="goToGoogle">구글로 이동</button>
<button id="goToGoogle1">구글로 이동</button>
<pre id="output"></pre>
<script>
const output = document.getElementById('output');
document.getElementById('showLocation').addEventListener('click', function() {
output.textContent = `
전체 URL: ${location.href}
프로토콜: ${location.protocol}
호스트: ${location.host}
호스트명: ${location.hostname}
포트: ${location.port}
경로: ${location.pathname}
쿼리: ${location.search}
해시: ${location.hash}
`;
});
document.getElementById('reloadPage').addEventListener('click', function() {
location.reload(); // 페이지 새로 고침
});
document.getElementById('goToGoogle').addEventListener('click', function() {
location.assign('https://www.google.com'); // 구글로 이동
});
document.getElementById('goToGoogle1').addEventListener('click',function(){
location.replace('https://www.google.co.kr/?hl=ko')
})
</script>
</body>
</html>설명
- HTML 구조:
- 세 개의 버튼과 URL 정보를 출력할 <pre> 요소가 있습니다.
- JavaScript:
- 현재 URL 정보 보기: 버튼 클릭 시 location 객체의 다양한 프로퍼티를 가져와서 표시합니다.
- 페이지 새로 고침: 버튼 클릭 시 location.reload() 메서드를 호출하여 현재 페이지를 새로 고칩니다.
- 구글로 이동: 버튼 클릭 시 location.assign() 메서드를 사용하여 구글 페이지로 이동합니다.
사용 방법
- "현재 URL 정보 보기" 버튼을 클릭하면 현재 페이지의 URL 정보가 표시됩니다.
- "페이지 새로 고침" 버튼을 클릭하면 페이지가 새로 고쳐집니다.
- "구글로 이동" 버튼을 클릭하면 구글 홈페이지로 이동합니다.
location.assign('https://www.google.com');와 location.replace('https://www.google.com');는 모두 브라우저의 현재 URL을 변경하는 방법이지만, 두 가지 중요한 차이점이 있습니다.
- 히스토리 스택:
- location.assign()은 현재 페이지를 새로운 URL로 변경하면서 히스토리 스택에 현재 페이지를 추가합니다. 즉, 사용자가 "뒤로 가기" 버튼을 클릭하면 이전 페이지로 돌아갈 수 있습니다.
- location.replace()는 현재 페이지를 새로운 URL로 변경하면서 히스토리 스택의 현재 페이지를 대체합니다. 이 경우 사용자가 "뒤로 가기" 버튼을 클릭해도 이전 페이지로 돌아갈 수 없습니다.
- 용도:
- assign()은 사용자가 이전 페이지로 돌아가야 할 경우에 유용합니다.
- replace()는 현재 페이지를 교체하고 싶지만, 사용자가 이전 페이지로 돌아갈 필요가 없을 때 적합합니다.
이 두 가지를 적절히 활용하면 브라우저 내비게이션의 흐름을 효과적으로 제어할 수 있습니다.
'JAVASCRIPT' 카테고리의 다른 글
| window 객체 (0) | 2024.10.30 |
|---|---|
| 버블링이란? (0) | 2024.10.30 |
| preventDefault(), stopPropagation(), return false 차이점 (0) | 2024.10.30 |
| 이벤트 객체 (0) | 2024.10.30 |
| 객체란? (0) | 2024.10.24 |