[javascript] 현재 URL 정보 가져오기 (window.location)

728x90

목 차

• 1. window.location 객체
• 2. window.location 속성
• 2-1. href
• 2-2. protocol
• 2-3. hostname
• 2-4. port
• 2-5. pathname
• 2-6. search
• 2-7. hash
• 2-8. origin
• 3. window.location 메서드
• 3-1. assign() method
• 3-2. replace() method
• 3-3. reload() method

 

1. window.location 객체

• JavaScript의 window.location 객체는 브라우저의 현재 페이지 URL에 대한 정보를 제공하며, 이를 통해 페이지 이동, URL 변경, 새 페이지 로드 등을 제어할 수 있습니다.

 

2. window.location 속성

2-1. href

• href 속성은 현재 페이지의 전체 URL을 반환하거나 설정합니다.

console.log(window.location.href); // 현재 페이지의 URL 출력
window.location.href = "https://blog.naver.com/withnicebamc"; // 새 URL로 이동

 

2-2. protocol

• protocol 속성은 URL의 프로토콜(http:, https: 등)을 반환하거나 설정합니다.

console.log(window.location.protocol); // "https:"
window.location.protocol = "http:"; // HTTP로 변경하여 페이지 리로드

 

2-3. hostname

• hostname 속성은 URL의 호스트 이름(도메인)을 반환하거나 설정합니다.

console.log(window.location.hostname); // "example.com"
window.location.hostname = "newdomain.com"; // 도메인 변경

 

2-4. port

• port 속성은 URL의 포트 번호를 반환하거나 설정합니다. 포트가 명시되지 않은 경우 빈 문자열이 반환됩니다.
• 현재 Tistory URL에는 포트 정보가 없기 때문에 빈 값입니다. 

console.log(window.location.port); // "8080" (예시)
window.location.port = "3000"; // 포트 변경하여 페이지 리로드

 

2-5. pathname

• pathname 속성은 URL 경로(/path/to/page)를 반환하거나 설정합니다.

console.log(window.location.pathname); // "/path/to/page"
window.location.pathname = "/newpath"; // 경로 변경하여 페이지 리로드

 

2-6. search

• search 속성은 URL의 쿼리 문자열을 반환하거나 설정합니다. (예: ?name=John&age=30)
• 쿼리 문자열을 URL에 추가하고 실행해야 값이 출력 됩니다.

console.log(window.location.search); // "?name=John&age=30"
window.location.search = "?newParam=123"; // 쿼리 문자열 변경

 

2-7. hash

• hash 속성은 URL의 해시(#)를 반환하거나 설정합니다. (예: #section1)

console.log(window.location.hash); // "#section1"
window.location.hash = "#newSection"; // 해시 변경

 

2-8. origin

• orgin 속성은 현재 URL의 프로토콜, 호스트 이름, 포트 번호를 포함한 기원(origin)을 반환합니다.

console.log(window.location.origin); // "https://example.com:8080"

 

3. window.location 메서드

3-1. assign()

• assign() 메서드는 주어진 URL로 브라우저를 이동시킵니다. 사용 후 history.back()을 통해 이전 페이지로 돌아갈 수 있습니다.

window.location.assign("https://blog.naver.com/withnicebamc"); // 새로운 페이지로 이동

 

3-2. replace()

• 주어진 URL로 브라우저를 이동시킵니다. assign()과 달리 replace()는 기록을 남기지 않기 때문에, 이전 페이지로 돌아갈 수 없습니다.

window.location.replace("https://blog.naver.com/withnicebamc"); // 기록 없이 페이지 교체

 

3-3. reload()

• 현재 페이지를 다시 로드합니다. true를 인수로 전달하면 서버에서 강제로 새로고침합니다.

window.location.reload(); // 기본 새로고침
window.location.reload(true); // 서버에서 강제 새로고침