[JavaScript] window.location 옵션으로 현재페이지 url 가져오기

yoob 2021. 12. 3. 18:57

자바스크립트로 현재페이지 url 가져오는방법과 window.location 사용방법에 대해 간략하게 정리했다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Current Page URL Example</title>
    <style>
        div {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>현재 페이지 URL 정보</h1>
    <div id="fullUrl"></div>
    <div id="protocol"></div>
    <div id="host"></div>
    <div id="hostname"></div>
    <div id="port"></div>
    <div id="pathname"></div>
    <div id="search"></div>
    <div id="hash"></div>

    <script>
        // 현재 페이지의 전체 URL을 가져오거나 설정합니다. ex: http://example.com/myapp/mypage.jsp?param1=value1&param2=value2
        document.getElementById("fullUrl").innerText = "전체 URL: " + window.location.href;
        
        // URL의 프로토콜(스킴)을 가져오거나 설정합니다. 프로토콜 뒤의 콜론(:)도 포함됩니다. ex: http: 또는 https:
        document.getElementById("protocol").innerText = "프로토콜: " + window.location.protocol;
        
        // URL의 호스트 이름과 포트 번호를 가져오거나 설정합니다. ex : example.com:8080
        document.getElementById("host").innerText = "호스트와 포트: " + window.location.host;
        
        // URL의 호스트 이름을 가져오거나 설정합니다. ex : example.com
        document.getElementById("hostname").innerText = "호스트 이름: " + window.location.hostname;
        
        // URL의 포트 번호를 가져오거나 설정합니다. ex : 8080
        document.getElementById("port").innerText = "포트 번호: " + window.location.port;
        
        // URL의 경로를 가져오거나 설정합니다. ex : /myapp/mypage.jsp
        document.getElementById("pathname").innerText = "경로: " + window.location.pathname;
        
        // URL의 쿼리 문자열을 가져오거나 설정합니다. 물음표(?)도 포함됩니다. ex: ?param1=value1&param2=value2
        document.getElementById("search").innerText = "쿼리 문자열: " + window.location.search;
       
    </script>
</body>
</html>

페이지 이동과 페이지 새로고침도 있다.

//페이지 이동
window.location.href = "http://example.com/newpage.jsp";
//페이지 새로 고침
window.location.reload();

저작자표시 (새창열림)