ES6-ページのリダイレクト

リダイレクト*は、ユーザーと検索エンジンの両方を、最初に要求したURLとは異なるURLに送信する方法です。ページリダイレクトは、Webページを別のWebページに自動的にリダイレクトする方法です。多くの場合、リダイレクトされたページは同じWebサイトにありますが、別のWebサイトまたはWebサーバーにある場合もあります。

JavaScriptページのリダイレクト

*window.locationおよびwindow.location.href*

JavaScriptでは、多くのメソッドを使用してWebページを別のページにリダイレクトできます。ほとんどすべてのメソッドは、Windowオブジェクトのプロパティである window.location オブジェクトに関連しています。現在のURLアドレス（Webアドレス）を取得し、ブラウザーを新しいページにリダイレクトするために使用できます。両方の使用法は、動作に関して同じです。 window.location はオブジェクトを返します。 .href が設定されていない場合、 window.location はデフォルトでパラメーター .href を変更します。

例

<!DOCTYPE html>
<html>
   <head>
      <script>
         function newLocation() {
            window.location = "http://www.xyz.com";
         }
      </script>
   </head>

   <body>
      <input type = "button" value = "Go to new location" onclick = "newLocation()">
   </body>
</html>

location.replace（）*

他の最も頻繁に使用されるメソッドは、window.locationオブジェクトの* replace（）*メソッドです。現在のドキュメントを新しいものに置き換えます。 replace（）メソッドでは、新しいURLをreplace（）メソッドに渡すと、HTTPリダイレクトが実行されます。

以下は同じ構文です。

window.location.replace("http://www.abc.com

location.assign（）*

location.assign（）メソッドは、ブラウザウィンドウに新しいドキュメントをロードします。

以下は同じ構文です。

window.location.assign("http://www.abc.org");

assign（）vs. replace（）*

assign（）メソッドとreplace（）メソッドの違いは、location.replace（）メソッドがドキュメント履歴から現在のURLを削除するため、元のドキュメントに戻ることができないことです。この場合、ブラウザの「戻る」ボタンは使用できません。この状況を回避する場合は、location.assign（）メソッドを使用する必要があります。これは、ブラウザに新しいドキュメントをロードするためです。

location.reload（）*

location.reload（）メソッドは、ブラウザウィンドウで現在のドキュメントをリロードします。

以下は同じ構文です。

window.location.reload("http://www.yahoo.com");

window.navigate（）*

window.navigate（）メソッドは、window.location.hrefプロパティに新しい値を割り当てることに似ています。 MS Internet Explorerでのみ使用できるため、クロスブラウザー開発では使用しないでください。

以下は同じ構文です。

window.navigate("http://www.abc.com");

リダイレクトと検索エンジンの最適化

URLの転送について検索エンジン（SEO）に通知する場合、検索エンジンはリダイレクトを確認するためにJavaScriptを分析しないため、rel = "canonical"メタタグをWebサイトのヘッドパーツに追加する必要があります。

以下は同じ構文です。

<link rel = "canonical" href = "http://abc.com/"/>

Es6-page-redirect

目次

ES6-ページのリダイレクト

JavaScriptページのリダイレクト

例

リダイレクトと検索エンジンの最適化