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

window.locationを使って別のURLへリダイレクトする方法【JavaScript】

URLをクリックしてページXにアクセスしたはずなのに、気づけば別のページYに飛ばされていた——そんな経験をしたことはありませんか？これは「ページリダイレクト」と呼ばれる仕組みによって起こる現象です。

クライアント側でJavaScriptを使えば、ページのリダイレクトは非常に簡単に実装できます。サイトの訪問者を新しいページへ誘導したい場合は、<head>セクションに数行のコードを追加するだけで実現可能です。

基本的なリダイレクトの書き方

window.locationオブジェクトには複数のリダイレクト方法があります。代表的なものは以下の3つです。

  • window.location.assign("URL") — 指定したURLへ移動します。ブラウザの履歴にも残るため、「戻る」ボタンで前のページに戻れます。
  • window.location.replace("URL") — 現在のページを新しいURLで置き換えます。履歴が残らないため、「戻る」ボタンで元のページに戻れません。
  • window.location.href = "URL" — 最もシンプルで広く使われている書き方です。assign()とほぼ同じ動作をします。

サンプルコード

以下のコードを実行すると、window.locationを使ったHTMLページのリダイレクト方法を実際に確認できます。この例では、ボタンをクリックするとホームページへリダイレクトされます。

<html>
   <head>
      <script>
         <!--
            function Redirect() {
               window.location.assign("https://www.tutorialspoint.com");
            }
         //-->
      </script>
   </head>
   <body>
      <p>次のボタンをクリックすると、ホームページへリダイレクトされます。</p>
      <input type="button" value="Redirect Me" onclick="Redirect();" />
   </body>
</html>

応用：一定時間後に自動的にリダイレクトする

setTimeout()と組み合わせれば、指定した秒数後に自動でページを転送することもできます。メンテナンス後の案内ページなどでよく使われるテクニックです。

<script>
   // 5秒後に指定したURLへリダイレクト
   setTimeout(function() {
      window.location.href = "https://www.example.com";
   }, 5000);
</script>

まとめ

JavaScriptによるページリダイレクトは、window.locationのassign()・replace()・hrefのいずれかを使えば簡単に実装できます。用途に応じて使い分けることで、ユーザーをスムーズに目的のページへ誘導できるでしょう。

  1. Webページを別のURLへ自動的にリダイレクトする方法【metaタグの使い方】

    ページリダイレクトとは、あるURL（ページX）にアクセスしたのに、実際には内部で別のページYへ転送されてしまう現象のことです。これは「ページリダイレクト」によって発生します。HTMLページから別のURLへリダイレクトさせるには、METAタグを使用します。このとき、http-equiv属性を使ってcontent属性の値に対するHTTPヘッダーを指定します。content属性の値は、何秒後にリダイレクトを実行するかを示す秒数です。また、新しいURLへ即座にジャンプさせたい場合は、content属性の値を0に設定してください。記述例以下は、現在開いているページを3秒後に別のウェブサイトへ自動的にリダ

  2. HTMLページからリダイレクトする方法を解説！metaタグの使い方

    ページリダイレクトとは？ ページリダイレクトとは、あるURLをクリックしてページXにアクセスしたにもかかわらず、内部的に別のページYへ自動的に転送される仕組みのことです。サイトの移転やURLの変更、メンテナンス中の一時的な誘導など、さまざまな場面で活用されています。 HTMLページでリダイレクトする基本：METAタグを使う HTMLページから別のページへリダイレクトさせるには、<meta>タグを使用します。<head>内に記述したmetaタグのhttp-equiv属性でHTTPヘッダーに相当する値を指定し、content属性で転送までの待機秒数と転送先URLを設定しま