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

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

JavaScriptで別のWebページにリダイレクトする基本

JavaScriptで別のWebページへリダイレクトするには、window.locationオブジェクトを使用し、遷移先のURLを指定します。最もシンプルな方法は、window.locationに直接URL文字列を代入することです。

基本的なコード例

以下は、ページが読み込まれた時点で指定したサイトへ自動的にリダイレクトするサンプルコードです。

<html>
   <body>
      <p>別のサイトへリダイレクトしています</p>
      <script>
         window.location = "https://www.qries.com";
      </script>
      <p>このページはQries.comへリダイレクトされます</p>
   </body>
</html>

スクリプトが実行されると、ブラウザは即座に「https://www.qries.com」へ遷移します。

その他のリダイレクト方法

window.locationへの代入以外にも、用途に応じて複数の書き方があります。

  • window.location.href = "URL"; … 最も一般的な記述方法です。locationプロパティを明示的に指定します。
  • window.location.assign("URL"); … 指定したURLを読み込みます。閲覧履歴に残るため、戻るボタンで前のページに戻れます。
  • window.location.replace("URL"); … 現在の履歴エントリを新しいURLで置き換えます。そのため、戻るボタンでは元のページに戻れません。ログイン後の遷移など、履歴を残したくない場合に便利です。

使い分けのポイント

通常のページ遷移であればhrefやassign()を使用し、ユーザーに前のページへ戻られたくないケースではreplace()を選ぶとよいでしょう。また、リダイレクト処理はページの読み込み直後に実行すると、ユーザー体験を損なわずに済みます。

  1. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="

  2. JavaScriptで別のオブジェクトを介してオブジェクトにアクセスする方法

    JavaScriptでは、あるオブジェクトを定義する際に、別のオブジェクトのプロパティやメソッドを参照することで、その値を取得したり、メソッドの実行結果を利用したりすることができます。この記事では、既存のオブジェクト（obj）を介して、新しいオブジェクト（obj2）からプロパティやメソッドにアクセスする方法を、具体的なコード例とともに解説します。押さえておきたいポイントオブジェクトリテラルの中で obj.lastName のように記述すると、その時点での値が新しいオブジェクトにコピーされます。obj.welcome() のようにメソッド名の後に括弧を付けると、オブジェクト定義時にメソッドが即座