JavaScript で Web ページにリダイレクトする

  2. プログラミングのヒント
  3. JavaScript ハウツー
  4. JavaScript で Web ページにリダイレクトする
Nithin Krishnan 2023年10月12日
JavaScript JavaScript Redirect
  1. JavaScript で location.href() を使用して Web ページをリダイレクトする
  2. JavaScript は location.replace() を使用して Web ページをリダイレクトする
  3. 3. JavaScript で location.assign() を使用して Web ページをリダイレクトする
  4. 4. JavaScript でアンカー要素を動的に作成して Web ページをリダイレクトする
  5. まとめ
JavaScript で Web ページにリダイレクトする

JavaScript には、ユーザーを再ルーティングするさまざまな方法があります。これは、サイトが持つべきリダイレクト動作の種類に関するビジネス要件によって異なります。次の方法でユーザーをリダイレクトできます。

  1. location.href()
  2. location.replace()
  3. location.assign()
  4. アンカー要素を動的に作成

JavaScript で location.href() を使用して Web ページをリダイレクトする

リダイレクトには、location インターフェイスを Document および Window オブジェクトと組み合わせて使用します。通常、window.location.href は現在のページの URL を返します。たとえば、次のコードを実行すると、ページの URL が表示されます。

console.log(window.location.href)

出力：

"https://www.delftstack.com/"

トリックは、window.location.href に別の URL を割り当てて、この URL を置き換えることです。これにより、ブラウザは URL で指定されたページをロードするため、リダイレクトされます。サイト履歴スタックに関しては、このメソッドは現在の参照 URL を変更します。次のコードは、DelfStack のハウツーページに移動します。

window.location.href = 'https://www.delftstack.com/howto/';

備考：

  1. 新しい URL が読み込まれると、ブラウザの[戻る]ボタンから古い Web ページにアクセスできます。
  2. リダイレクトに最も一般的に使用される方法です

JavaScript は location.replace() を使用して Web ページをリダイレクトする

Web ページに永続的に移動する場合は、location.replace を使用してください。違いは、location.replace が現在の URL を新しい URL に置き換えることです。したがって、ユーザーは前の URL に戻ることができなくなります。ブラウザの履歴スタックに関して、このメソッドは最後の Web ページの URL をポップし、その URL を値にプッシュします。

window.location.replace('https://www.delftstack.com');

これを実行すると、https://www.delftstack.com サイトが読み込まれます。

備考：

  1. この方法は必要な場合にのみ使用することをお勧めします。
  2. この方法を使用して前のリンクに戻ることはできません。したがって、それは良いユーザーエクスペリエンスではないかもしれません。

3. JavaScript で location.assign() を使用して Web ページをリダイレクトする

location.replace() と同様に、assign() メソッドには、現在のリンクがブラウザの履歴に残るという違いがあります。したがって、ユーザーはブラウザの戻るボタンを使用して前のページに戻ることができます。このメソッドは、ターゲット URL もパラメーターとして受け取ります。

window.location.assign('https://www.delftstack.com');

4. JavaScript でアンカー要素を動的に作成して Web ページをリダイレクトする

バージョン 8 以下の古いブラウザ、特に Internet Explorer では、ロケーションインターフェイスはサポートされていません。したがって、アンカータグ（<a>）を動的に作成し、ターゲット URL で href 属性を設定します。前述のように、アンカータグは、それを呼び出すためにユーザーの操作を必要とするパッシブ要素です。そのため、リダイレクトを機能させるために、コードでクリックイベントがトリガーされます。

let targetURL = 'https://www.delftstack.com';
let newURL = document.createElement('a');
newURL.href = targetURL;
document.body.appendChild(newURL);
newURL.click();

ここでは、次の方法でリダイレクトを実現します。

  1. アンカータグ要素の作成 document.createElement('a');
  2. 新しい URLnewURL.href = targetURL を使用して href プロパティを設定します
  3. 動的に作成されたタグを document.body.appendChild(newURL) を使用して DOM ノードにアタッチします
  4. 最後に、ユーザーのクリック newURL.click() をエミュレートして呼び出します。

ブラウザは新しい URL をロードします。

まとめ

ビジネス要件によっては、メタリフレッシュ方式を使用して、ユーザーがメンテナンス中のサイトの Web ページにアクセスしたらすぐにリダイレクトすることをお勧めします。ナビゲーションがユーザーのクリックに基づいて意図されている場合、アンカータグの使用は非常に一般的です。JavaScript の Location インターフェイスのメソッドである window.location.href および window.location.assign() を使用して、プログラムでユーザーを新しい URL に送信できます。

関連記事 - JavaScript Redirect