【JavaScript】特定のURLにリダイレクトをする方法

JavaScriptでリダイレクトをする方法

今回は、JavaScriptを使ってリダイレクトをする方法をご紹介します。

リダイレクトの方法は、JavaScriptだけではなく、wordpressであればphpでのリダイレクトも可能ですが、今回はJavaScriptを利用してリダイレクトする方法を書いていきます。

phpでの方法はこちら

それでは、JavaScriptを使ってリダイレクトする方法を見ていきましょう。

JavaScriptのリダイレクトの書き方

JavaScriptでのリダイレクトの記述はこの様になります。

location.href='http://ooooooo.jp/';

この記述で、http://ooooooo.jp/　のURLに自動でリダイレクトがかかります。

”location.href”はJavaScriptでもよく見ますね、ページのURLなどを取得する際などにも見ますが、location.hrefでページの場所を指定できるので、自分がリダイレクトを掛けたいページや、適切なタイミング、アクションを作成した中にこの記述を挿入する事でリダイレクトを掛けられます。

リダイレクトを時間差でかける方法

JavaScriptが便利なのは、時間差を作成するといったことが簡単に操作ができる所にあります。

時間を設定する記述は、この様になります。

setTimeout("link()", 1000);

function link(){
location.href='http://ooooooo.jp/';
}

まずは、初めにお伝えしたリダイレクトのコードを一つのfunctionにまとめます。

function link(){
location.href='http://ooooooo.jp/';
}

そして、時間を設定します。

setTimeout("link()", 1000);

数字の”1000”は、1秒になります。

長くするには数字を大きく、短くするには数字を小さくします。

条件やアクション内で挿入ができるので便利

リダイレクトの方法には、ページ単位や、サイト単位でリダイレクトをかけることもできますが、JavaScriptを使うと適切な条件下や、一つのまとまったアクション内で使用できるので便利です。

ただSEOから見ると、サーバーを利用してリダイレクトをかける301、302リダイレクトの方が効果的であるとされているので、もしSEOまで気にされる方は必要に応じて、こちらを利用するのもいいかもしれません。

まとめ

今回は、JavaScriptを利用してリダイレクトをかける方法をご紹介しました。

JavaScriptは、使い勝手が良く、通常のwebサービスだけでなく、HTMLにも組み込むことができるので使い道も広く、記述もシンプルなのでおすすめです。

wordpressにはphpでリダイレクトをかける方法がある様に、言語いよってそれぞれリダイレクトがすることもできるので、適切な方法を選択して利用する様にしましょう。

phpでの書き方もまた別の記事で紹介します。