location.href로 이동 후 뒤로 가기가 안 될 때 해결법
안녕하세요, fellow 코더 여러분! 오늘은 JavaScript로 웹 개발하다가 흔히 마주치는 문제 하나를 파헤쳐볼게요. 바로 location.href로 페이지를 이동시켰는데, 브라우저 뒤로 가기 버튼이 먹통이 되는 상황이에요. 저도 예전에 이 문제로 머리 좀 쥐어뜯었는데, 해결법 찾고 나니 꽤 간단하더라고요. 같이 알아보시죠!
문제 상황: 뒤로 가기가 안 된다?
예를 들어, 이런 코드를 썼다고 해볼게요. 1.html에서 0.5초 후에 2.html로 이동하는 간단한 코드예요.
<!DOCTYPE html>
<html>
<body>
1
<script>
let time = 0;
setInterval(() => {
if (time === 500) location.href = '/2.html';
time++;
}, 1);
</script>
</body>
</html>
2.html은 단순히 "2"만 띄우는 페이지라고 치고요. 이 코드를 실행하면 0.5초 후 2.html로 잘 넘어가는데, 문제는 뒤로 가기 버튼을 눌러도 1.html로 안 돌아가요. 왜 그럴까요?
이유는 location.href가 페이지를 새로고침하면서 이동하는 방식이라 브라우저 히스토리(history stack)에 이전 페이지를 제대로 남기지 않기 때문이에요. 특히 사용자 이벤트(예: 버튼 클릭)가 아닌 코드로 강제로 이동하면 히스토리가 갱신되지 않는 경우가 많죠.
해결책 1: history.pushState 활용하기
이 문제를 해결하려면 history.pushState를 써보는 게 좋아요. 이 메서드는 브라우저 히스토리에 새 항목을 추가해서 뒤로 가기 버튼을 살릴 수 있죠. 수정한 코드는 아래예요.
<!DOCTYPE html>
<html>
<body>
1
<script>
let time = 0;
setInterval(() => {
if (time === 500) {
history.pushState({ page: "2.html" }, "Page 2", "/2.html");
document.body.innerHTML = "2"; // 페이지 내용 변경
}
time++;
}, 1);
</script>
</body>
</html>
여기서 history.pushState(상태 객체, 제목, URL)를 썼어요. 상태 객체는 나중에 쓸 데이터, 제목은 그냥 빈 값이어도 되고, URL은 이동할 경로예요. 그리고 2.html로 실제 이동 대신, 현재 페이지 내용을 "2"로 바꿨어요. 이렇게 하면 뒤로 가기 버튼 누르면 1.html로 돌아옵니다!
해결책 2: 링크로 우회하기
만약 2.html로 꼭 이동해야 한다면, location.href 대신 숨겨진 링크를 만들어서 클릭하게 하는 방법도 있어요.
<!DOCTYPE html>
<html>
<body>
1
<a href="/2.html" id="link" style="display:none;">Go</a>
<script>
let time = 0;
setInterval(() => {
if (time === 500) {
document.getElementById("link").click();
}
time++;
}, 1);
</script>
</body>
</html>
이렇게 하면 브라우저가 사용자 이벤트로 인식해서 히스토리에 1.html이 남고, 뒤로 가기 버튼도 잘 작동해요.
주의할 점
브라우저마다 정책이 달라서, history.pushState나 자동 이동이 제한될 수 있어요. 특히 Chrome 같은 브라우저는 보안 때문에 코드로 바로 풀스크린이나 페이지 이동을 막을 때가 있죠. 그러니 실제로 테스트해보고, 콘솔(F12)에서 에러 확인하는 것도 잊지 마세요!
더 궁금하다면
이런 JavaScript 팁 더 알고 싶으시면 제 블로그 [Wolf Coding](https://wolf-coding-777.tistory.com/)에 놀러 오세요. C#이나 유니티 관련 글도 많으니, 개발 공부하다 막히면 참고하기 좋아요.
오늘 배운 방법으로 뒤로 가기 문제 해결해보세요. 질문 있으면 언제든 댓글 남겨주시고, 다음 포스팅에서 또 만나요!
'자바스크립트' 카테고리의 다른 글
| getElementById()로 HTML 쉽게 다루기, 알아보자 (30) | 2025.03.08 |
|---|---|
| encodeURI(): URL 인코딩 쉽게 이해하기 (2) | 2025.03.06 |
| .split() 메서드를 이용하여 문자열을 분할하고, 배열에서 값을 선택하는 방법 (2) | 2025.02.18 |
| 바닐라 자바스크립트로 클릭 이벤트 구성하기 (0) | 2020.10.07 |
| [자바스크립트] Fade In & Fade Out (0) | 2020.09.13 |
