JavaScriptを使用して別のWebページにリダイレクトする方法

JavaScriptは、ユーザーを別のWebページにリダイレクトする多くの方法を提供します。正規の方法を学び、プレーンJavaScriptを使用して、使用できるすべてのオプションを確認します。

JavaScriptは、プログラムの実行中に別のページに移動する必要がある場合に、ユーザーを別のWebページにリダイレクトする多くの方法を提供します。

新しいURLに移動するための標準と見なすことができるのは

window.location = 'https://newurl.com'

同じドメインの別のパスにリダイレクトする場合は、次を使用します。

window.location.pathname = '/new'

これは使用していますlocationによって提供されるオブジェクト履歴API

リダイレクトするその他のオプション

プログラミングのほとんどのものと同様に、同じ操作を実行する方法はたくさんあります。

以来windowブラウザに暗黙的に含まれている場合は、次のこともできます。

location = 'https://newurl.com'

別の方法は、hrefのプロパティlocation

window.location.href = 'https://newurl.com'

locationまた、assign()URLを受け入れ、同じことを実行するメソッド:

window.location.assign('https://newurl.com')

ザ・replace()方法は、履歴内の現在のページを書き換えるため、以前の方法とは異なります。現在のページが消去されるため、「戻る」ボタンをクリックすると、次のページに戻ります。最後に訪れたものです。

window.location.replace('https://newurl.com')

これは、状況によっては便利な場合があります。

に到達するためのさまざまな方法windowオブジェクト

ブラウザはselfそしてtopすべてが参照するオブジェクトwindowオブジェクトなので、代わりにそれらを使用できますwindow上記のすべての例で:

self.location = 'https://newurl.com'

top.location = https://newurl.com

サーバー側ディレクティブを使用した301リダイレクト

上記の例はすべて、別のページに移動するというプログラムによる決定の場合を考慮しています。

現在のURLが古いためにリダイレクトし、新しいURLを移動する必要がある場合は、サーバーレベルのディレクティブを使用し、301 HTTPコードを設定して、現在のURLが新しいリソースに永続的に移動したことを検索エンジンに通知することをお勧めします。

これは、.htaccessApacheを使用している場合。Netlifyこれは_redirectsファイル

JavaScriptを使用して301リダイレクトは可能ですか?

残念ながら違います。

これはクライアント側では不可能です。

JavaScriptがブラウザによって実行されるかなり前に、301HTTP応答コードをサーバーから送信する必要があります。

実験によると、JavaScriptリダイレクトは301リダイレクトのように検索エンジンによって解釈されます。見るこの検索エンジンの土地の投稿参考のために。

グーグルは言う

JavaScriptを使用してユーザーをリダイレクトすることは、正当な方法です。たとえば、ユーザーがログインした後でユーザーを内部ページにリダイレクトする場合は、JavaScriptを使用してリダイレクトできます。 JavaScriptまたはその他のリダイレクト方法を調べて、サイトがガイドラインに準拠していることを確認するときは、その意図を考慮してください。サイトを移動する場合は301リダイレクトが最適ですが、Webサイトのサーバーにアクセスできない場合は、この目的でJavaScriptリダイレクトを使用できます。

HTMLメタタグを使用する

もう1つのオプションは、HTMLでメタタグを使用することです。

<html>
  <head>
    <meta http-equiv="refresh" content="0;URL=https://newurl.com/">
  </head>
</html>

これにより、ブラウザは現在のページをロードして解釈すると新しいページをロードし、検索エンジンに何も通知しません。最良のオプションは、常に301サーバーレベルのリダイレクトを使用することです。

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: