]]>
この記事で使うイベントやメソッドなど
setTimeout()
setInterval()
clearInterval()
location.href
リンク元のhrefの値に./redirect.html?page=result.html&anchor=demoのように、?でパラメータを付与します。pageの値がリンク先、anchorがリンク先の特定のアンカーへ飛ばす必要がある場合に付与します。anchorが不要の場合は?page=result.htmlのみにします。
まずは箱を用意
まずは箱と値（変数の設定）を用意します。
cntはリダイレクトするまでの秒数（ミリ秒）でdispCntは1000で割って秒数に変換します。queryPrmはパラメータを格納する変数（配列）です。
var cnt = 3000;
var dispCnt = cnt / 1000;
var queryPrm = new Array;
クエリを取得
クエリを取得して変数に入れます。クエリはlocation.searchで取得出来ます。substring(1)で文字を切り出し、split('&')でパラメータごとに切り分けます。
var cnt = 3000;
var dispCnt = cnt / 1000;
var queryPrm = new Array;
var query = location.search.substring(1).split('&');
連想配列に値を格納し、リダイレクト先に設定
queryには複数の値が入っている場合があるので、forループを使って先ほど用意した箱queryPrmに格納して行きます。
queryにはpage=result.html, anchor=demoのような形で値が入っているので = で分解し、=の前の値をハッシュとした連想配列にします。
var cnt = 3000;
var dispCnt = cnt / 1000;
var queryPrm = new Array;
var query = location.search.substring(1).split('&');
for(i = 0; query[i]; i++) {
var hashes = query[i].split('='); // =の前をハッシュとする
queryPrm[hashes[0]] = hashes[1]; // 連想配列に入れる
}
これでqueryPrm.page(queryPrm['page'])がリンク先で、queryPrm.anchor(queryPrm['anchor'])があった場合はリンク先のアンカーとして設定出来ました。変数linkUrlにリンク先として格納します。queryPrm['anchor']がある場合と無い場合でリンク先が異なるのでif文で分岐します。
var cnt = 3000;
var dispCnt = cnt / 1000;
var queryPrm = new Array;
var query = location.search.substring(1).split('&');
for(i = 0; query[i]; i++) {
var hashes = query[i].split('='); // =の前をハッシュとする
queryPrm[hashes[0]] = hashes[1]; // 連想配列に入れる
}
var linkUrl = queryPrm.page;
if(queryPrm.anchor) {
linkUrl = queryPrm.page + '#' + queryPrm.anchor; // anchorがある場合
}
指定した秒数後にリンク先に飛ぶようにする
指定した秒後に何か処理を行いたい場合はsetTimeoutメソッドを利用します。setTimeoutの使い方はこんな感じです。
// #1
setTimeout(メソッド, ミリ秒数);
// #2
setTimeout(function() {
Do something
}, ミリ秒数)
#1のパターンは予めあるメソッドを利用する場合に利用します。今回は#2のパターンを利用して、指定した秒後にfunction() {}にかかれた処理を行うようにします。
JavaScriptで特定のURLにリダイレクトするにはlocation.href = URLと書きます。ですので、下記のようなコードになります。
var cnt = 3000;
var dispCnt = cnt / 1000;
var queryPrm = new Array;
var query = location.search.substring(1).split('&');
for(i = 0; query[i]; i++) {
var hashes = query[i].split('='); // =の前をハッシュとする
queryPrm[hashes[0]] = hashes[1]; // 連想配列に入れる
}
var linkUrl = queryPrm.page;
if(queryPrm.anchor) {
linkUrl = queryPrm.page + '#' + queryPrm.anchor; // anchorがある場合
}
setTimeout(function() {
location.href = linkUrl;
}, cnt);
指定した秒数をカウントダウン表示するメソッドを作る
それではカウントダウン表示するメソッド、countDown()を作ります。パラメータにミリ秒数を渡すとその間だけカウントダウン表示するようにします。
function countDown(cnt) {
Do someting
}
指定した時間、ある処理を繰り返したい場合はsetIntervalメソッドを利用します。使い方はsetTimeoutと似ており、メソッドとミリ秒数をパラメータとすれば指定したミリ秒数の間処理を繰り返してくれます。
ここでは変数timerにsetIntervalで行う処理を格納しておきます。
function countDown(cnt) {
var timer = setInterval(function () {
Do someting
}, 1000);
}
繰り返す処理は、パラメータcntをデクリメント(--)、idがcountの内容をcntの値で書き換え(innerHTML)、cntが0になったら処理を終了（clearInterval）します。
function countDown(cnt) {
var timer = setInterval(function () {
cnt --; // cntをデクリメント
document.getElementById('count').innerHTML = cnt;
if(cnt == 0) {
clearInterval(timer); // cntが0になったら処理を終了
}
}, 1000);
}
これで指定した秒数をカウントダウン表示するメソッドcountDownが出来たので、このメソッドを呼び出します。
var cnt = 3000;
var dispCnt = cnt / 1000;
var queryPrm = new Array;
var query = location.search.substring(1).split('&');
for(i = 0; query[i]; i++) {
var hashes = query[i].split('='); // =の前をハッシュとする
queryPrm[hashes[0]] = hashes[1]; // 連想配列に入れる
}
var linkUrl = queryPrm.page;
if(queryPrm.anchor) {
linkUrl = queryPrm.page + '#' + queryPrm.anchor; // anchorがある場合
}
setTimeout(function() {
location.href = linkUrl;
}, cnt);
countDown(dispCnt);
function countDown(cnt) {
var timer = setInterval(function () {
cnt --;
document.getElementById('count').innerHTML = cnt;
if(cnt == 0) {
clearInterval(timer);
}
}, 1000);
}
指定した秒数まてない人のためにすぐに移動する手段を用意する
ここは非常に簡単です。getElementByIdで所得したhrefをlinkUrlで上書きします。
var clickElem = document.getElementById('go-page');
clickElem.href = linkUrl;
これで完成です。完成したコードは下記のようになります。
リンク元HTMLコード
<div class="page">
<h1>Redirect Demo</h1>
<p><a href="./redirect.html?page=result.html&anchor=demo" target="_blank">ここをクリック</a></p>
</div>
リダイレクト側コード
<div class="page">
<h1>Redirect Demo</h1>
<p><span id="count">3</span>秒後に別ページにリダイレクトします。</p>
<button><a href="./" id="go-page">すぐに移動する</a></button>
</div>
<script>
var cnt = 3000;
var dispCnt = cnt / 1000;
var queryPrm = new Array;
var query = location.search.substring(1).split('&');
for(i = 0; query[i]; i++) {
var hashes = query[i].split('=');
queryPrm[hashes[0]] = hashes[1];
}
var linkUrl = queryPrm.page;
if(queryPrm.anchor) {
linkUrl = queryPrm.page + '#' + queryPrm.anchor;
}
setTimeout(function() {
location.href = linkUrl;
}, cnt);
countDown(dispCnt);
function countDown(cnt) {
var timer = setInterval(function () {
cnt --;
document.getElementById('count').innerHTML = cnt;
if(cnt == 0) {
clearInterval(timer);
}
}, 1000);
}
var clickElem = document.getElementById('go-page');
clickElem.href = linkUrl;
</script>
]]>
