Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript로 현재 URL을 가져오는 방법 완벽 정리

웹 개발을 하다 보면 JavaScript를 이용해 현재 페이지의 URL을 확인하거나 활용해야 하는 경우가 자주 발생합니다. 다행히 JavaScript에서는 window.location.href 속성 하나만으로 현재 URL을 간단하게 얻을 수 있습니다.

window.location.href 속성 사용하기

window.location 객체는 현재 문서의 위치(URL) 정보를 담고 있으며, 그중 href 속성은 전체 URL 문자열을 반환합니다. 아래 예제를 통해 실제 동작을 확인해 보세요.

예제 코드

<!DOCTYPE html>
<html>
   <body>
      <h3>현재 URL 가져오기</h3>
      <p id="test"></p>
      <script>
         document.getElementById("test").innerHTML = "페이지의 URL: " + window.location.href;
      </script>
   </body>
</html>

위 코드를 실행하면 화면에 현재 페이지의 전체 URL이 출력됩니다. 예를 들어 https://example.com/page.html과 같은 형태로 표시됩니다.

URL 구성 요소별로 가져오기

전체 URL뿐만 아니라 필요한 부분만 따로 추출할 수도 있습니다. window.location 객체가 제공하는 주요 속성은 다음과 같습니다.

  • window.location.protocol — 프로토콜 (예: https:)
  • window.location.host — 호스트명과 포트 (예: example.com:8080)
  • window.location.hostname — 호스트명만 (예: example.com)
  • window.location.pathname — 경로 (예: /page.html)
  • window.location.search — 쿼리 문자열 (예: ?id=123)
  • window.location.hash — 해시 조각 (예: #section1)

이처럼 window.location 객체를 활용하면 URL 전체 또는 원하는 구성 요소를 손쉽게 다룰 수 있어, 페이지 이동 처리나 조건 분기 등 다양한 기능을 구현하는 데 유용합니다.