URL을 클릭해 X 페이지에 접속하려고 했는데, 실제로는 전혀 다른 Y 페이지로 이동된 경험이 있으신가요? 이러한 현상은 바로 페이지 리디렉션(Page Redirection) 때문에 발생합니다.
JavaScript로 페이지 리디렉션 구현하기
클라이언트 측에서 JavaScript를 활용하면 페이지 리디렉션을 매우 간단하게 구현할 수 있습니다. 사이트 방문자를 새로운 페이지로 이동시키려면 <head> 섹션에 단 한 줄의 코드만 추가하면 됩니다.
다음 코드를 실행하면서 JavaScript를 사용해 HTML 페이지를 리디렉션하는 방법을 직접 익혀보세요. 이 예제에서는 버튼을 클릭하면 홈페이지로 이동하도록 설정되어 있습니다.
예제
<html>
<head>
<script>
<!--
function Redirect() {
window.location.assign("https://www.tutorialspoint.com");
}
//-->
</script>
</head>
<body>
<p>아래 버튼을 클릭하면 홈페이지로 이동합니다.</p>
<input type="button" value="리디렉션" onclick="Redirect();" />
</body>
</html>
참고: 다양한 리디렉션 방법
window.location.assign() 외에도 window.location.href = "URL"; 방식이나 window.location.replace("URL") 메서드를 사용할 수 있습니다. 특히 replace()는 브라우저 방문 기록에 현재 페이지를 남기지 않기 때문에, 사용자가 뒤로 가기 버튼으로 이전 페이지에 되돌아오는 것을 막고 싶을 때 유용하게 활용됩니다.