[JavaScript] 현재 웹페이지의 URL을 가져오는 방법

Develop

[JavaScript] 현재 웹페이지의 URL을 가져오는 방법

issuemaker99 2024. 10. 12. 17:23

728x90

웹 애플리케이션이나 웹사이트에서 종종 현재 페이지의 URL을 동적으로 처리하거나 분석할 필요가 있을 때가 있습니다. JavaScript는 이를 위한 간단하고 유용한 방법들을 제공합니다. 특히 window.location 객체를 사용하여 URL 정보를 쉽게 가져올 수 있습니다.

1. window.location 객체란?

window.location 객체는 현재 웹 페이지의 URL을 관리하는 객체로, 이 객체를 통해 현재 페이지의 URL 정보를 가져오거나, URL을 변경할 수도 있습니다. 이 객체는 웹 페이지와 관련된 다양한 속성을 제공하며, 페이지의 전체 URL뿐만 아니라 그 구성 요소들도 쉽게 접근할 수 있습니다.

주요 속성들:

window.location.href: 전체 URL 문자열을 반환합니다.
window.location.protocol: http:나 https:와 같은 URL의 프로토콜을 반환합니다.
window.location.host: 호스트 이름과 포트 번호를 반환합니다.
window.location.pathname: 도메인 뒤에 오는 경로를 반환합니다.
window.location.search: URL에 붙은 쿼리 문자열(파라미터)을 반환합니다.
window.location.hash: # 뒤에 오는 해시 값을 반환합니다.

2. 현재 URL 가져오기

가장 간단한 방법으로 현재 페이지의 전체 URL을 가져오는 방법은 window.location.href 속성을 사용하는 것입니다.

예제 1: 전체 URL 가져오기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Current URL Example</title>
</head>
<body>
    <h1>Get Current URL with JavaScript</h1>
    <p id="url"></p>

    <script>
        // 현재 URL을 가져와서 출력
        const currentUrl = window.location.href;
        document.getElementById('url').innerText = 'Current URL: ' + currentUrl;
    </script>
</body>
</html>

위 예제는 window.location.href를 사용하여 현재 페이지의 URL을 가져오고, 이를 <p> 태그 안에 출력하는 간단한 방식입니다. 브라우저에서 페이지를 열면 현재 페이지의 URL이 화면에 표시됩니다.

3. URL 구성 요소별로 분리하기

window.location 객체는 URL을 구성하는 여러 부분을 별도로 가져올 수 있는 다양한 속성을 제공합니다. 이러한 속성을 활용하여 URL을 나누어 사용할 수 있습니다.

예제 2: URL 구성 요소 분리하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL Parts Example</title>
</head>
<body>
    <h1>URL Parts with JavaScript</h1>
    <p><strong>Full URL:</strong> <span id="fullUrl"></span></p>
    <p><strong>Protocol:</strong> <span id="protocol"></span></p>
    <p><strong>Host:</strong> <span id="host"></span></p>
    <p><strong>Pathname:</strong> <span id="pathname"></span></p>
    <p><strong>Query:</strong> <span id="search"></span></p>
    <p><strong>Hash:</strong> <span id="hash"></span></p>

    <script>
        // URL 구성 요소 분리
        const fullUrl = window.location.href;
        const protocol = window.location.protocol;
        const host = window.location.host;
        const pathname = window.location.pathname;
        const search = window.location.search;
        const hash = window.location.hash;

        // 각 값을 DOM에 출력
        document.getElementById('fullUrl').innerText = fullUrl;
        document.getElementById('protocol').innerText = protocol;
        document.getElementById('host').innerText = host;
        document.getElementById('pathname').innerText = pathname;
        document.getElementById('search').innerText = search;
        document.getElementById('hash').innerText = hash;
    </script>
</body>
</html>

설명:

protocol: http:나 https: 등 현재 페이지가 사용하는 프로토콜을 반환합니다.
host: 호스트 이름(도메인)과 포트 번호를 반환합니다.
pathname: 도메인 뒤에 나오는 경로를 반환합니다.
search: URL에 포함된 쿼리 문자열을 반환합니다. (예: ?id=123)
hash: # 뒤에 있는 해시 값을 반환합니다. (예: #section1)

이 코드를 실행하면 현재 페이지의 URL 구성 요소들이 각각 화면에 표시됩니다.

4. 쿼리 문자열 파라미터 분석하기

URL의 쿼리 문자열은 주로 GET 요청을 통해 서버에 전달되는 파라미터를 포함합니다. JavaScript로 이 쿼리 문자열을 분석하여 파라미터 값을 추출할 수 있습니다.

예제 3: 쿼리 문자열에서 파라미터 값 가져오기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Query String Example</title>
</head>
<body>
    <h1>Get Query Parameters with JavaScript</h1>
    <p><strong>Full URL:</strong> <span id="fullUrl"></span></p>
    <p><strong>Query Parameter "id":</strong> <span id="queryParam"></span></p>

    <script>
        // 전체 URL과 쿼리 문자열 가져오기
        const fullUrl = window.location.href;
        const params = new URLSearchParams(window.location.search);
        
        // 'id'라는 쿼리 파라미터 값 가져오기
        const idParam = params.get('id');

        // 값 출력
        document.getElementById('fullUrl').innerText = fullUrl;
        document.getElementById('queryParam').innerText = idParam ? idParam : 'No "id" parameter';
    </script>
</body>
</html>

설명:

URLSearchParams 객체를 사용하여 쿼리 문자열을 분석합니다.
params.get('id'): 쿼리 문자열에서 id라는 파라미터 값을 추출합니다.
예를 들어, https://example.com/?id=123이라는 URL에서 id=123을 추출하여 출력합니다.

이 코드를 실행하면 쿼리 문자열에 id 파라미터가 있는 경우 해당 값이 출력되고, 없는 경우 No "id" parameter라는 메시지가 표시됩니다.

5. 현재 URL 변경하기

JavaScript를 사용해 현재 페이지의 URL을 변경하거나 다른 페이지로 리디렉션할 수도 있습니다.

예제 4: URL 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change URL Example</title>
</head>
<body>
    <h1>Change URL with JavaScript</h1>
    <button onclick="changeUrl()">Go to Google</button>

    <script>
        function changeUrl() {
            // 구글로 리디렉션
            window.location.href = 'https://www.google.com';
        }
    </script>
</body>
</html>

설명:

버튼 클릭 시 **window.location.href**를 사용하여 페이지를 다른 URL(구글)로 변경합니다.
이 방법을 사용하면 브라우저가 해당 URL로 즉시 이동합니다.

JavaScript를 사용하여 현재 페이지의 URL을 가져오고, 이를 분석하거나 변경하는 방법은 매우 간단합니다. window.location 객체를 사용하면 URL에 대한 다양한 정보를 쉽게 다룰 수 있으며, 이를 통해 동적인 웹 애플리케이션을 더욱 풍부하게 만들 수 있습니다.

LIST

'Develop' 카테고리의 다른 글

[Java Javascript] HMAC-SHA256 암호화와 복호화 개념과 예제 (4)	2024.10.16
[JavaScript] 변수선언 var, let, const 스코프의 종류 그리고 클로저(Closure)의 개념 (9)	2024.10.16
[PostgreSQL] 오브젝트 안에서 로그 찍기 - RAISE 사용해서 출력 (7)	2024.10.11
[PostgreSQL] 날짜 더하기, 빼기, 일수 차이 구하기 INTERVAL (5)	2024.10.10
[PostgreSQL] Random 함수 랜덤으로 목록 조회 및 숫자생성 (6)	2024.10.10

현재글[JavaScript] 현재 웹페이지의 URL을 가져오는 방법

“Hello, World!" 거긴 어떤월드냐?