JavaScript で実装するカウントダウンリダイレクト

ページのリダイレクトは、HTML の <header> に以下の META タグを使う以下の一行を挿入するのが最も簡単な方法ですが、

<meta http-equiv="refresh" content="0;URL='(リダイレクト先 URL)'">

もう少しおしゃれ、かつユーザビリティを高めた方法として、リダイレクトまでの秒数をカウントダウンして表示してあげる方法があります。

サイト引っ越し後の 404 などで、「新サイトに移行しました」「xx秒後に自動的に移動します」などの情報を併記してあげることで親切な導線になります。

カウントダウンリダイレクト サンプル

コードは以下になります。

HTML コード

<p><span id="countdown"></span> 秒後に自動的に新サイトへ移動します。</p>

JavaScript

<script type="text/javascript">
$(function(){
	cnt = 15; //リダイレクトまでの秒数
	$('#countdown').text(cnt);
	setInterval(function(){
		cnt--;
		if(cnt <= 0){ //0になった際の処理
			window.location.href = '（新サイトのURL）';
		}
		$('#countdown').text(cnt);
	},1000);
});
</script>