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

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

Webページを閲覧していると、あるURLをクリックしてページXにアクセスしようとしたのに、実際には別のページYへ移動させられたという経験はありませんか？これは「ページリダイレクト（転送）」と呼ばれる仕組みが働いているためです。

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

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

サンプルコード：ボタンクリックでトップページへリダイレクト

以下のコードを実行すると、JavaScriptを使って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>

window.locationの主なリダイレクト方法の違い

JavaScriptでリダイレクトを行う際には、いくつかの書き方があります。それぞれ動作が異なるため、用途に応じて使い分けましょう。

1. location.assign()

window.location.assign("URL") は、指定したURLへ移動します。ブラウザの履歴（戻るボタン）が保持されるため、ユーザーは前のページに戻ることができます。

2. location.replace()

window.location.replace("URL") も指定したURLへ移動しますが、現在のページが履歴から置き換えられるため、「戻る」ボタンで元のページに戻れません。ログイン後の遷移など、戻らせたくない場面で便利です。

3. location.href

window.location.href = "URL" は最もシンプルで広く使われている書き方です。動作は assign() とほぼ同じで、履歴も残ります。

まとめ

JavaScriptによるページリダイレクトは、window.location オブジェクトを使うだけで手軽に実装できます。「戻る」操作を許可するかどうかによって assign()・href・replace() を使い分けるのがポイントです。用途に合った方法を選び、快適なユーザー体験を提供しましょう。

  1. JavaScriptでWebページに「クリップボードにコピー」機能を実装する方法

    本記事では、JavaScriptを使ってWebページに「クリップボードにコピー（Copy to Clipboard）」機能を実装する方法を解説します。テキストボックスに入力された文字列を、ボタンを1クリックするだけでクリップボードにコピーできるようにします。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=d

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

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