Javascript での転送(リダイレクト)処理の記述方法

最終更新:2018-03-18 by Joe

Javascriptを使って転送処理(リダイレクト)する方法です。

Javascriptで転送(リダイレクト)する方法

Javascript で転送処理を行うには、location インターフェイスを利用します。

location.href インターフェイスを利用した転送

location インターフェイスを利用する事で、任意のURLに転送できます。hrefプロパティに文字列を代入すると、自動的にページを開く処理が、ほぼすべてブラウザーで実装されています。

// 任意のURLに転送する。
location.href = 'https://www-creators.com';

// 同義
location = 'https://www-creators.com';

location.assign() メソッドを利用した転送

メソッドです。上記のhref と同じ動作ですので、あえてこちらを利用する理由は少ないかもしれません。

// 任意のURLに転送する。
location.assign('https://www-creators.com');

location.replace() メソッドを利用した転送

こちらはすこし特殊ですが、ブラウザーの履歴を残しません。すなわち、ブラウザバックを押しても、転送前のページに戻ることができなくなります。

// 任意のURLに転送する(履歴を残さない)
location.replace('https://www-creators.com');

【参考】HTTPリダイレクトとJavascript転送の違い

下記で紹介する方法は、Javascript でいう転送処理(リダイレクト)は、単に「ブラウザ上で新しいウェブページを開く」ことであり「HTTPリダイレクト」とは異なる点に注意して下さい。

HTTPはHyper Text Transfer Protocol の略であり、ドキュメントのリクエストと応答に関するやり取りの手法(=プロトコル)を定めた仕様です。

例えば、google.com に「GET」と呼ばれる種類のリクエストを飛ばせば、対応するGoogleサーバーが、応答を返します。最初の応答は3桁の数字によって表され、正常な応答は「200」と決められています。これを「HTTPステータスコード」と呼びます。

「HTTPリダイレクト」とは、このステータスコードにより、サーバーがリクエストされたページ転送を明示的に示す転送処理の事を指します。HTTPリダイレクトは、多くの場合「301(Moved Permanently)」、もしくは 「302 (Found)」で示され、前者が「永久的な移動」、後者が「一時的な移動」に使われます。

ステータスコードを明示することで、以下の事を実現できます。

  • Google などの検索エンジンに正確にページ・サイトの引っ越しの意思を伝えられる
  • ブラウザーが転送情報をキャッシュすることで、無駄なリクエストのやり取りを抑えて、素早いページ表示ができる。

HTTPステータスコードの全貌はWikiペディアが詳しいです。

参考リンク

MDNのLocation インターフェイスに関する記述です。

Locationオブジェクトんい関する操作をまとめています。