웹 개발을 하다 보면 버튼 클릭이나 특정 조건에 따라 사용자를 다른 페이지로 이동시켜야 하는 경우가 자주 있습니다. JavaScript에서는 location.href 속성에 이동할 URL을 할당하는 방식으로 리디렉션을 매우 간단하게 구현할 수 있습니다.
기본 문법
window.location.href = "https://이동할-주소.com";
location.href에 새로운 URL이 할당되는 순간 브라우저는 즉시 해당 주소로 이동합니다.
예제 코드
아래는 버튼을 클릭하면 다른 웹사이트로 이동하는 완전한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>Redirect to a Webpage Example</title>
</head>
<body>
<h1>Redirect to a Webpage Example</h1>
<button class="redirectBtn">Redirect</button>
<h2>위 버튼을 클릭하면 다른 웹페이지로 이동합니다</h2>
<script>
document.querySelector(".redirectBtn").addEventListener("click", redirectFunction);
function redirectFunction() {
location.href = "https://tutorialspoint.com/";
}
</script>
</body>
</html>코드 설명
- document.querySelector(".redirectBtn") : 클래스명이 redirectBtn인 버튼 요소를 선택합니다.
- addEventListener("click", redirectFunction) : 버튼에 클릭 이벤트 리스너를 등록하여, 클릭 시 redirectFunction이 실행되도록 합니다.
- location.href = "URL" : 함수가 호출되면 location.href에 새 주소가 할당되어 브라우저가 해당 사이트로 이동합니다.
참고: location.href는 속성(property)이므로 함수처럼 호출하면 안 됩니다. 반드시 location.href = "URL" 형태로 값을 할당해야 정상적으로 동작합니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 "Redirect" 버튼을 클릭하면 아래와 같이 새로운 사이트로 이동합니다.
추가 팁
상황에 따라 다른 리디렉션 방식도 활용할 수 있습니다.
- location.replace("URL") : 이동과 동시에 히스토리에서 현재 페이지를 제거하므로, 뒤로 가기 버튼으로 돌아올 수 없습니다.
- location.assign("URL") : location.href와 유사하게 동작하며 히스토리가 유지됩니다.
- window.open("URL") : 같은 페이지가 아닌 새 창이나 새 탭에서 페이지를 엽니다.