Javascript로 현재 실행 중인 페이지의 URL 주소를 가져오는 방법에 대해서 알아보겠습니다.

window.location에서 URL 정보 가져오기

window.location.href는 현재 페이지의 전체 주소를 갖고 있습니다.

이 값을 참조하여 현재 페이지의 URL 주소를 알 수 있습니다.

const url = window.location.href;
console.log(url);

Output:

https://cdpn.io/cpe/boomboom/index.html?editors=1011&key=index.html-639b1edd-8735-4840-c21e-2f757db85cf7

location의 다른 정보

아래와 같이 location 객체를 로그로 출력해보면, location이 갖고 있는 다양한 값들을 확인할 수 있습니다.

console.log(window.location);

Output:

// [object Location]
{
  "ancestorOrigins": {
    "0": "https://codepen.io"
  },
  "href": "https://cdpn.io/cpe/boomboom/index.html?editors=1011&key=index.html-c7772cbd-34c0-1c12-764e-456bc19fe878",
  "origin": "https://cdpn.io",
  "protocol": "https:",
  "host": "cdpn.io",
  "hostname": "cdpn.io",
  "port": "",
  "pathname": "/cpe/boomboom/index.html",
  "search": "?editors=1011&key=index.html-c7772cbd-34c0-1c12-764e-456bc19fe878",
  "hash": ""
}

아래와 같이 용도에 따라 각각의 변수에 접근하여 필요한 주소 정보를 얻을 수 있습니다.

// "https://cdpn.io/cpe/boomboom/index.html?editors=1011&key=index.html-65dc6481-0223-1d2a-4cdc-7f3f6da61b10"
console.log(window.location.href);

// "https:"
console.log(window.location.protocol);

// "cdpn.io"
console.log(window.location.host);

// "cdpn.io"
console.log(window.location.hostname);

// "/cpe/boomboom/index.html"
console.log(window.location.pathname);

// "?editors=1011&key=index.html-65dc6481-0223-1d2a-4cdc-7f3f6da61b10"
console.log(window.location.search);

location 업데이트

현재 페이지를 다른 URL로 이동해야하는 경우, location을 업데이트하여 이동시킬 수 있습니다.

window.location.replace(newUrl)은 현재의 URL을 newUrl로 변경하고 현재 페이지가 변경됩니다.

window.location.replace("https://google.com");