Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

자바스크립트로 5초 후 웹페이지 자동 리디렉션 구현하기

웹페이지를 일정 시간이 지난 후 자동으로 다른 페이지로 이동시켜야 하는 경우가 종종 있습니다. 예를 들어 로그인 완료 후 메인 페이지로 이동하거나, 안내 문구를 보여준 뒤 다른 사이트로 연결하는 상황이 대표적입니다.

자바스크립트에서는 setTimeout() 메서드를 사용하면 이러한 지연 리디렉션을 간단하게 구현할 수 있습니다. setTimeout()은 지정한 시간(밀리초 단위)이 경과한 후에 콜백 함수를 한 번 실행하는 타이머 함수입니다. 이동할 페이지의 URL은 window.location.href 객체에 할당하면 됩니다.

기본 문법

setTimeout(function() {
  window.location.href = '이동할 페이지 URL';
}, 지연시간_밀리초);

시간 단위가 밀리초(millisecond)이므로 5초 후에 리디렉션하려면 5000을 지정해야 합니다.

예제 코드

아래 코드를 실행하면 5초 후에 지정된 페이지로 자동으로 이동합니다.

<!DOCTYPE html>
<html>
<body>
  <script>
    setTimeout(function(){
      window.location.href = 'https://www.tutorialspoint.com/javascript/';
    }, 5000);
  </script>
  <p>5초 후 웹페이지가 리디렉션됩니다.</p>
</body>
</html>

추가 팁

1. 카운트다운 표시하기

사용자에게 남은 시간을 알려주면 더 좋은 사용자 경험을 제공할 수 있습니다. setInterval()과 함께 사용하면 초 단위 카운트다운을 화면에 표시할 수 있습니다.

let seconds = 5;
const timer = setInterval(function() {
  document.getElementById('count').innerText = seconds;
  seconds--;
  if (seconds < 0) {
    clearInterval(timer);
    window.location.href = 'https://www.example.com/';
  }
}, 1000);

2. 이전 페이지로 돌아가기

특정 URL 대신 브라우저의 뒤로 가기 기능처럼 이전 페이지로 이동하려면 다음과 같이 작성합니다.

setTimeout(function(){
  window.history.back();
}, 5000);

3. 주의사항

  • 리디렉션 대상 URL이 올바른지 반드시 확인하세요. 잘못된 URL은 오류 페이지로 이동시킬 수 있습니다.
  • 검색엔진 최적화(SEO) 관점에서 서버 측 리디렉션(HTTP 301, 302)이 권장되므로, 클라이언트 측 자바스크립트 리디렉션은 간단한 UI 흐름 처리에 활용하는 것이 좋습니다.
  • 일부 브라우저 설정이나 확장 프로그램에 의해 자바스크립트가 차단될 수 있으므로, 중요한 페이지 이동이라면 <meta http-equiv="refresh" content="5;url=..."> 태그를 대안으로 고려할 수도 있습니다.

이처럼 setTimeout()과 window.location.href만 활용하면 몇 줄의 코드로 5초 후 자동 리디렉션 기능을 손쉽게 구현할 수 있습니다.