JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで5秒後にWebページを自動リダイレクトする方法【setTimeout活用】

Webページを5秒後に自動的に別のURLへ転送（リダイレクト）したい場合は、JavaScriptのsetTimeout()メソッドを使うのが最もシンプルで確実な方法です。

setTimeout()は、指定した時間（ミリ秒）が経過した後に関数を一度だけ実行します。その関数内でwindow.location.hrefに移動先のURLを代入することで、任意のページへリダイレクトさせることができます。

実装例：5秒後にリダイレクトするコード

以下のコードをブラウザで開くと、ページが表示されてから5秒後に指定したURLへ自動的に遷移します。

<!DOCTYPE html>
<html>
  <body>
    <script>
      setTimeout(function(){
        window.location.href = 'https://www.tutorialspoint.com/javascript/';
      }, 5000);
    </script>
    <p>このページは5秒後にリダイレクトされます。</p>
  </body>
</html>

コードのポイント

  • setTimeout(処理, 5000)：第1引数に実行したい関数、第2引数に待機時間をミリ秒単位で指定します（5000ミリ秒 = 5秒）。
  • window.location.href：現在ページのURLを表すプロパティです。ここに別のURLを代入すると、そのページへ即座に移動します。

setInterval()との違いに注意

setInterval()は指定した間隔で処理を繰り返し実行するメソッドです。一度きりのリダイレクトにはsetTimeout()が適しています。もしsetInterval()を使用した場合は、clearInterval()でタイマーを明示的に解除しない限り、転送処理が何度も繰り返されるため注意が必要です。

まとめ

一定時間後にページを転送したいときは、setTimeout()と window.location.href を組み合わせるのが定番の手法です。カウントダウン表示後の遷移や、広告・お知らせを見せてから目的のページへ誘導するなど、さまざまな場面で応用できます。

  1. JavaScriptでHTMLページをリダイレクトする方法をわかりやすく解説

    ページリダイレクトとは？あるURLをクリックしてページXにアクセスしたはずなのに、実際には別のページYに移動された——そんな経験はありませんか？これは「ページリダイレクト」と呼ばれる仕組みによるものです。Web開発では、サイト移転時や古いURLから新しいURLへの誘導など、さまざまな場面で活用されています。JavaScriptでリダイレクトを実装するJavaScriptを使えば、クライアント側（ブラウザ側）で非常にシンプルにページリダイレクトを実現できます。特別なライブラリやサーバー側の設定は不要で、window.location.assign()メソッドを呼び出すだけでOKです。訪問者を新し

  2. JavaScriptで別のWebページにリダイレクトする方法を解説

    JavaScriptを使えば、ボタンのクリックや特定の条件を満たしたタイミングで、ユーザーを別のWebページへ簡単に誘導（リダイレクト）できます。最も一般的なのは、window.location.href プロパティに移動先のURLを代入する方法です。 主なリダイレクトの方法 window.location.href = URL：最もシンプルで広く使われる方法です。 window.location.assign(URL)：hrefと同じ動作をし、ブラウザの履歴にも残ります。 window.location.replace(URL)：現在のページを置き換えるため、「戻る」ボタンで元のページに