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オブジェクトんい関する操作をまとめています。