자바스크립트 URL 이동하기

올바른 이해와 사용 방법

자바스크립트를 이용하면 현재 브라우저의 URL을 바꾸어 새로운 페이지로 이동하는 것은 물론, 페이지를 새로고침하거나, 페이지 내 특정 위치로 이동하기, 이전/다음 페이지로 이동하기 등을 쉽게 구현할 수 있습니다.

다음의 목차로 설명합니다.

현재 창에서 새로운 페이지로 이동하기
새 창/새 탭으로 페이지 이동하기
현재 페이지 새로고침하기
페이지 내 특정 위치로 이동하기
이전 페이지로 이동하기(뒤로 가기)
다음 페이지로 이동하기(앞으로 가기)

현재 창에서 새로운 페이지로 이동하기

현재 창에서 원하는 URL로 이동하려면 window.location.href 속성을 사용해 URL을 이 속성의 값으로 설정하면 됩니다.
이때, 설정하는 URL은 문자열로 지정합니다.

window 객체는 생략할 수 있으며, 보통 location.href를 사용합니다.

예제

버튼 클릭 시 이동하기 onclick 속성으로 버튼을 클릭했을 때, 페이지 이동시키기

<button type="button" onclick="location.href='https://example.com'">이동하기</button>
<!-- 또는 -->
<button type="button" onclick="window.location.href='https://example.com'">이동하기</button>

버튼 클릭 시 이동하기 addEventListener() 메서드로 버튼을 클릭했을 때, 페이지 이동시키기

<button type="button" id="href-btn">이동하기</button>

<script>
    const hrefBtn = document.getElementById("href-btn");
    hrefBtn.addEventListener("click", () => {
        location.href = "https://example.com";
        // 또는 window.location.href = "https://example.com";
    });
</script>

새로운 페이지로 이동 후 '뒤로 가기'를 막고 싶을 때

때로는 페이지를 이동한 후, 사용자가 다시 이전 페이지로 돌아오는 것을 막아야 할 때가 있습니다. 예를 들어 결제 완료 페이지나 회원가입 완료 페이지가 그렇습니다. 결제가 끝났는데 '뒤로 가기'를 눌러 다시 결제 요청이 가면 안 되니까요.

이럴 때는 window.location.replace() 메서드를 사용합니다.
매개변수에 이동할 URL을 문자열로 지정합니다.

window.location.href 속성을 사용해 URL을 이동하면 사용자가 브라우저의 '뒤로 가기' 버튼을 눌렀을 때 이전 페이지로 돌아갈 수 있습니다. 반면에 window.location.replace() 메서드를 사용해 URL을 이동하면 이동 후 '뒤로 가기'를 눌러도 이전 페이지로 돌아가지 않습니다.

window 객체는 생략할 수 있으며, 보통 location.replace()를 사용합니다.

예제

버튼 클릭 시 이동하기 onclick 속성으로 버튼을 클릭했을 때, 페이지 이동시키기

<button type="button" onclick="location.replace('https://example.com')">이동하기</button>
<!-- 또는 -->
<button type="button" onclick="window.location.replace('https://example.com')">이동하기</button>

버튼 클릭 시 이동하기 addEventListener() 메서드로 버튼을 클릭했을 때, 페이지 이동시키기

<button type="button" id="href-btn">이동하기</button>

<script>
    const hrefBtn = document.getElementById("href-btn");
    hrefBtn.addEventListener("click", () => {
        location.replace("https://example.com");
        // 또는 window.location.replace("https://example.com");
    });
</script>

새 창/새 탭으로 페이지 이동하기

현재 창은 그대로 두고, 새로운 창이나 탭을 만들어 URL로 이동하려면 window.open() 메서드를 사용합니다.
이때, 매개변수에 열어야 할 URL을 문자열로 지정합니다.

예제

버튼 클릭 시 이동하기 onclick 속성으로 버튼을 클릭했을 때, 새 창/새 탭으로 페이지 이동시키기

<button type="button" onclick="window.open('https://example.com')">이동하기</button>

버튼 클릭 시 이동하기 addEventListener() 메서드로 버튼을 클릭했을 때, 새 창/새 탭으로 페이지 이동시키기

<button type="button" id="open-window-btn">이동하기</button>

<script>
    const openWindowBtn = document.getElementById("open-window-btn");
    openWindowBtn.addEventListener("click", () => {
        window.open("https://example.com");
    });
</script>

현재 페이지 새로고침하기

현재 창을 새로고침하려면 window.location.reload() 메서드를 사용합니다. 이렇게 하면 새로고침 버튼처럼 현재 리소스를 다시 불러옵니다.
window 객체는 생략할 수 있으며, 보통 location.reload()를 사용합니다.

예제

버튼 클릭 시 새로고침하기 onclick 속성으로 버튼을 클릭했을 때, 현재 페이지 새로고침하기

<button type="button" onclick="location.reload()">새로고침하기</button>
<!-- 또는 -->
<button type="button" onclick="window.location.reload()">새로고침하기</button>

버튼 클릭 시 새로고침하기 addEventListener() 메서드로 버튼을 클릭했을 때, 현재 페이지 새로고침하기

<button type="button" id="reload-btn">새로고침하기</button>

<script>
    const reloadBtn = document.getElementById("reload-btn");
    reloadBtn.addEventListener("click", () => {
        location.reload();
        // 또는 window.location.reload();
    });
</script>

페이지 내 특정 위치로 이동하기

현재 페이지 내에서 스크롤을 움직여 특정 본문이나 제목 위치로 바로 이동할 수 있습니다.

페이지 내 특정 위치에 해당하는 HTML 요소에 id="아이디명"을 지정하고, 현재 URL의 마지막에 샵 기호(#)와 함께 아이디명을 덧붙여 주면 됩니다. 이것을 '프래그먼트' 혹은 관용적인 용어로는 해시(Hash)라고 부릅니다.

브라우저는 해시(Hash)가 포함된 URL을 해석하여, 해당 id="아이디명"이 지정된 요소를 찾아 화면 상단에 보이도록 스크롤 위치를 자동으로 이동시킵니다.

예를 들면 다음과 같은 상황일 수 있습니다.

HTML

<section id="section-1">
    <h2>섹션 1</h2>
</section>
<section id="section-2">
    <h2>섹션 2</h2>
</section>
<section id="section-3">
    <h2>섹션 3</h2>
</section>

위 예제에서 현재 URL의 해시(Hash)는 빨간색으로 표시된 #example-2에 해당하는 부분입니다.

이때 브라우저는 샵 기호(#) 다음에 덧붙여진 example-2, 즉 id="example-2"이 지정된 요소를 찾아 화면 상단에 보이도록 스크롤 위치를 자동으로 이동시킵니다.

자바스크립트는 현재 URL의 해시를 설정할 수 있음

자바스크립트는 현재 URL의 해시를 설정할 수 있습니다.

자바스크립트로 현재 URL에 해시를 설정하려면 window.location.hash 속성을 사용합니다. # 기호를 뺀 이동할 위치에 있는 아이디명을 이 속성의 값으로 설정하면 됩니다.
이때, 설정하는 아이디명은 문자열로 지정합니다.

window 객체는 생략할 수 있으며, 보통 location.hash를 사용합니다.

만약, 현재 URL에 이미 해시가 있으면 새로 설정한 해시로 다시 바뀝니다.

예제

버튼 클릭 시 해시 설정하기 onclick 속성으로 버튼을 클릭했을 때, 현재 URL 해시 설정하기

<button type="button" onclick="location.hash='example-1'">해시 설정하기</button>
<!-- 또는 -->
<button type="button" onclick="window.location.hash='example-1'">해시 설정하기</button>

버튼 클릭 시 해시 설정하기 addEventListener() 메서드로 버튼을 클릭했을 때, 현재 URL 해시 설정하기

<button type="button" id="hash-btn">해시 설정하기</button>

<script>
    const hashBtn = document.getElementById("hash-btn");
    hashBtn.addEventListener("click", () => {
        location.hash = "example-1";
        // 또는 window.location.hash = "example-1";
    });
</script>

이전 페이지로 이동하기(뒤로 가기)

자바스크립트에서 이전 페이지로 이동하려면 window.history.back() 메서드를 사용합니다. 이렇게 하면 사용자가 브라우저의 '뒤로 가기' 버튼을 눌렀을 때처럼 이전 페이지로 이동합니다.
window 객체는 생략할 수 있으며, 보통 history.back()를 사용합니다.

만약, 브라우저의 방문 기록(Session History)에 이전 페이지 기록이 없다면 아무런 반응이 일어나지 않습니다.

예제

버튼 클릭 시 이전 페이지로 이동하기 onclick 속성으로 버튼을 클릭했을 때, 이전 페이지로 이동하기

<button type="button" onclick="history.back()">이전 페이지로 이동하기</button>
<!-- 또는 -->
<button type="button" onclick="window.history.back()">이전 페이지로 이동하기</button>

버튼 클릭 시 이전 페이지로 이동하기 addEventListener() 메서드로 버튼을 클릭했을 때, 이전 페이지로 이동하기

<button type="button" id="back-btn">이전 페이지로 이동하기</button>

<script>
    const backBtn = document.getElementById("back-btn");
    
    backBtn.addEventListener("click", () => {
        history.back();
        // 또는 window.history.back();
    });
</script>

다음 페이지로 이동하기(앞으로 가기)

자바스크립트에서 다음 페이지로 이동하려면 window.history.forward() 메서드를 사용합니다. 이렇게 하면 사용자가 브라우저의 '앞으로 가기' 버튼을 눌렀을 때처럼 다음 페이지로 이동합니다.
window 객체는 생략할 수 있으며, 보통 history.forward()를 사용합니다.

만약, 브라우저의 방문 기록(Session History)에 다음 페이지 기록이 없다면 아무런 반응이 일어나지 않습니다.

예제

버튼 클릭 시 다음 페이지로 이동하기 onclick 속성으로 버튼을 클릭했을 때, 다음 페이지로 이동하기

<button type="button" onclick="history.forward()">다음 페이지로 이동하기</button>
<!-- 또는 -->
<button type="button" onclick="window.history.forward()">다음 페이지로 이동하기</button>

버튼 클릭 시 다음 페이지로 이동하기 addEventListener() 메서드로 버튼을 클릭했을 때, 다음 페이지로 이동하기

<button type="button" id="forward-btn">다음 페이지로 이동하기</button>

<script>
    const forwardBtn = document.getElementById("forward-btn");
    
    forwardBtn.addEventListener("click", () => {
        history.forward();
        // 또는 window.history.forward();
    });
</script>

명세서

URL 이동하기의 명세서 사양
명세서 사양
`window.location.href`	HTML #dom-location-href-dev
`window.location.replace()`	HTML #dom-location-replace-dev
`window.open()`	HTML #dom-open-dev
`window.location.reload()`	HTML #dom-location-reload-dev
`window.location.hash`	HTML #dom-location-hash-dev
`window.history.back()`	HTML #dom-history-back-dev
`window.history.forward()`	HTML #dom-history-forward-dev

브라우저 호환성

인터페이스	데스크탑 Chrome	데스크탑 Edge	데스크탑 Firefox	Safari
`window.location.href`	1	12	1	1
`window.location.replace()`	1	12	1	1
`window.open()`	1	12	1	1
`window.location.reload()`	1	12	1	1
`window.location.hash`	1	12	1	1
`window.history.back()`	1	12	1	1
`window.history.forward()`	1	12	1	1