JavaScriptで一定時間後にリダイレクトさせる方法【現役エンジニア解説】

PROGRAM

今回は、JavaScriptで一定時間後にリダイレクトさせる方法について、リダイレクトの方法とタイマーの設定方法に分け、簡単に解説していきます。

リダイレクトの方法

locationオブジェクトのhrefプロパティでリダイレクト可能です。

locationオブジェクトのhrefプロパティに値を代入すると直ちにリダイレクトします。

location.href = 'https://example.com';

上記のコードのように、location.hrefの代入式だけで簡単にリダイレクトを実装することができます。

タイマーの設定方法

一定時間後にリダイレクトさせるにはタイマーを設定する必要があります。

setTimeoutメソッドを使うことで、指定時間後のリダイレクト処理の実装が可能になります。

setTimeout(function(){
    location.href = 'https://example.com';
}, 5000);

上記のコードのように、setTimeoutメソッドでは、第一引数に関数、第二引数にミリ秒単位のタイマーを指定します。

metaタグによる方法

リダイレクトはJavaScriptを使わなくても、metaタグで実装することもできます。

http-equiv属性にrefresh、content属性にリダイレクト発動秒数、url属性にリダイレクト先を指定します。

<meta http-equiv="refresh" content="5; url=https://example.com" />

上記のコードは、metaタグによって、5秒後に、https://example.comというURLにリダイレクトさせるコードになります。