4/4 移転先へ自動移動(転送/リダイレクト)させる方法 [ホームページ作成] All About

JavaScriptで自動的に移動させる方法

JavaScriptで自動移動

最後に、JavaScriptを使って指定のURLへ自動移動させる方法をご紹介いたします。

この「JavaScriptを使って自動移動させる方法」は、前ページでご紹介した「HTMLのmeta要素を使って自動移動する方法」と同様に、すべてのページ1つ1つに記述を加える必要があります。しかし、もし元々「全ページで共通して読み込まれるJavaScriptファイル」が存在するなら、そのファイルに自動移動用の記述を追加することで、全ページの一括自動移動が可能です。

■JavaScriptで自動移動させる記述
JavaScriptを使って表示ページを移動させるには、次のように1行を記述します。

location.href = "http://allabout.co.jp/";

上記の場合は、このスクリプトが読み込まれた時点で、「http://allabout.co.jp/」へ自動的に移動します。移動先のURLを引用符(ダブルクォーテーション記号)で囲むだけです。

この場合は、2ページ目でご紹介した「.htaccess」ファイルを使う方法とは異なり、どのページから移動する場合でも、移動先は「記述したURL」そのままです。例えば、以下のように動作します。

http://www.example.com/corner/orange.html へのアクセスは、
→ http://allabout.co.jp/ に自動転送されます。
http://www.example.com/corner/help/faq/ へのアクセスも、
→ http://allabout.co.jp/ に自動転送されます。

■パスを維持した状態で、移転先に自動移動させる場合
「.htaccess」ファイルを使う場合と同じように、URLのパス部分(ディレクトリ名やファイル名の部分)を維持した状態で移動させたい場合は、例えば以下のように記述します。

location.href = "http://allabout.co.jp" + location.pathname;

上記のように記述した場合は、以下のように動作します。

http://www.example.com/corner/orange.html へのアクセスは、
→ http://allabout.co.jp/corner/orange.html に自動転送されます。
http://www.example.com/square/help/faq/ へのアクセスは、
→ http://allabout.co.jp/square/help/faq/ に自動転送されます。

なお、URLの末尾に付加される「?」記号や「#」記号に続く部分も維持した状態で転送したいなら、以下のように記述します。

location.href = "http://allabout.co.jp" + location.pathname + location.search + location.hash;

※例えば、「 http://www.example.com/corner/square.cgi?page=123#abc 」というURLがあるとき、JavaScriptでは、

location.pathname は、「 /corner/square.cgi 」の部分を
location.search は、「 ?page=123 」の部分を
location.hash は、「 #abc 」の部分を

それぞれ表します。これらを「移動先URL」の後に付け加えることで、前のURLの構造を維持したまま移動させられます。

自動移動させるJavaScriptを記述する例

■HTML内に直接JavaScriptソースを記述する場合の例：
HTMLソース内に以下のように記述すると、このスクリプト部分を読み込んだ直後に、「移動先URL」に移動します。

<script type="text/javascript"><!--
   location.href = "移動先URL";
// --></script>

■独立したJavaScriptファイルに記述しておき、HTMLから呼び出す場合の例：
例えば、以下の1行を記述し、「redirect.js」などのファイル名で保存します。

location.href = "移動先URL" + location.pathname + location.search + location.hash;

HTMLファイルに以下の1行を記述することで、上記のJavaScriptファイルを呼び出します。

<script type="text/javascript" src="redirect.js"></script>

このJavaScriptファイルが読み込まれた直後に、(元のURLの構造を維持した状態で)指定のURLへ自動移動します。

なお、ブラウザのJavaScript機能が無効に設定されていれば、ページ移動は行われません。ですから、JavaScriptが実行されなかったときのために、「自動的に移動しない場合は、下記のリンクをクリックして移動して下さい」といったメッセージと共に、移転先ページへのリンクも設けておく方が望ましいでしょう。

ウェブサイトを引っ越す場合などに役立つ、自動移動(リダイレクト)機能

自動転送(リダイレクト)方法2種類

今回は、ウェブサイトを引っ越した場合や、サイト構造を改変してURLが変化した場合などに役立つ、自動的に表示ページを移動(リダイレクト)させる方法をご紹介いたしました。

転送のタイミングとしては、「アクセスした瞬間に転送」する場合と、「移転案内ページを挟んでから転送」する場合の2通りをご紹介いたしました。転送手法としては、「.htaccessを使う方法」・「HTMLのmeta要素を使う方法」・「JavaScriptを使う方法」の3種類をご紹介いたしました。目的にあった方法を選択して、ぜひご活用下さい。

【関連記事】