2016/08に公開
webページを一定間隔で自動リロード→手動に切り替えるjsコードです。
たとえば、ユーザーからのコメントをリアルタイムで表示させたいといったときに定期的にリロードしてwebページを常に最新状態にするようにします。
あまりリロードを繰り返されるとイラっとするユーザーもいるので、ユーザーのタイミングで自動リロードをOFFするようにしてみます。
ここではjqueryを使用していますが、その気になれば使わなくても可能かと思われます。
30秒で自動リロードするようにしています。リロードがうざかったら、ボタンをクリックして自動リロードを解除してください。
「自動OFF」をクリックすると手動でリロードできます。
「自動OFF」ボタンのすぐ右の空間（濃いグレー部分）をクリックすると自動ONに戻ります。
CSS3を使っているので、古いブラウザでは表示が崩れます。jsはIE7/8でも動作します。
<span class="reload auto"><span>自動ON</span></span>
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
構造さえ同じであれば、使用するタグ、class（id）名はこの限りではありません（さらに言えば、テキストにするとか、デザインによってはこの構造にこだわる必要もありません）。
.reload{
display: table;
margin: 10px auto 0;
padding:0 0 0 30px;
border-radius: 20px;
background: rgba(0,0,0,0.5);
position: relative;
cursor: pointer;
}
.reload > span{
display: inline-block;
background: rgba(171, 171, 171,0.6);
border-radius: 20px;
padding: 7px 20px;
border: double 3px #fff;
color: #fff;
}
.reload.auto span{
background: rgba(90, 187, 69, 0.6);
}
.reload #reset{
display: block;
width: 30px;
height: 41px;
position: absolute;
top:0;
right:0;
}
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
cssの設定はデザインによって変更してください。
$(function() {
var reloadTimer;
var thisUrl = location.href;
if(thisUrl.indexOf('?mo') != -1){ //urlに?moが付いていたら手動状態にする
$('.reload').append('<em id="reset"></em>');
offBtn();
}
if($('.reload').attr('class').indexOf('auto') != -1) reloadS(); //リロードボタン初期状態（自動リロードON）
$(document).on('click', '.reload', function(e) {
if($(e.target).is('#reset')) { //リロードボタン内のリセット部分は別の動作（自動リロードOFF状態でボタンの余白をクリックしたら自動リロードONに戻る）
$('#reset').remove();
$('.reload').addClass('auto').css('padding','0 0 0 30px');
$('.reload span').text('自動ON');
reloadS();
} else { //リロードボタン自体は自動リロードか手動リロード
if($(this).parent().attr('class').indexOf('auto') != -1){ //自動リロードOFF
reloadP();
offBtn();
} else { //自動リロードOFF状態なら手動でリロード
if(thisUrl.indexOf('?mo') != -1) location.reload();
else location.href = thisUrl + "?mo";
}
}
});
function reloadS(){
if(thisUrl.indexOf('?mo') != -1) location.href = thisUrl.replace( "?mo" , ""); //urlに?moが付いていたら削除
reloadTimer=setInterval(function(){
location.reload();
} , 30000);//30秒ごとに自動リロード
}
function reloadP(){ //自動リロード解除
clearInterval(reloadTimer);
}
function offBtn(){
if(!$('#reset').length) $('.reload').append('<em id="reset"></em>'); //#resetがなかったらリロードボタン内に追加
$('.reload').removeClass('auto').css('padding','0 30px 0 0');
$('.reload span').text('自動OFF');
}
});
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
何をしているか大まかに言うと、一定時間ごとにリロードをくりかえす関数reloadS()を最初に実行しておきます（10行目）。その後リロードボタンをクリックしたとき、自動リロードがONならば手動に切り替え、OFFならばそのタイミングでリロードするようにしています。また、自動リロードがOFFのとき、ある部分をクリックしたら自動リロードをONにするようにしています（12〜27行目）。
なお、このコードはもっとシンプルにしようと思えばできると思います。うまく工夫してみてください。
上のjsを改変して、sessionStorageを使った場合のコードにしてみました。
上のコードではURLにクエリ文字列を付加するので、それが気になる場合はこのようにwebストレージを使うか、Cookieなどを使用することになると思います。
ただし、sessionStorageはIE8より前のブラウザでは動作しないなど制約があります。
企業などのwebサイトではサポートする環境（OS・ブラウザおよびそれらのバージョン等）について明記していると思うので、それらに合わせて使用するかどうか決めると良いと思います。
なお、サンプルではこのwebストレージの場合のコードを使用しています。上のコードを使用したパターンは「ランダム背景 [js]」のページで確認できます。アドレスバーに注目していただくと、上のコードとこのwebストレージの場合のコードの違いがわかると思います。
$(function() {
var reloadTimer;
var thisUrl = location.href;
if (typeof sessionStorage !== 'undefined') { //sessionStorageが使えるか検証
var storage = sessionStorage; //変数storageにsessionStorageを格納
var status = storage.getItem('rlStatus');
if(status == 'off'){ //自動リロードOFFなら手動状態を維持
$('.reload').append('');
offBtn();
} else reloadS(); //リロードボタン初期状態（自動リロードON）
$(document).on('click', '.reload', function(e) {
if($(e.target).is('#reset')) { //リロードボタン内のリセット部分は別の動作（自動リロードOFF状態でボタンの余白をクリックしたら自動リロードONに戻る）
$('#reset').remove();
$('.reload').addClass('auto').css('padding','0 0 0 30px');
$('.reload span').text('自動ON');
reloadS();
} else { //リロードボタン自体は自動リロードか手動リロード
status = storage.setItem('rlStatus', 'off'); //リロードボタン内のリセット部分以外がクリックされたらsessionStorageのrlStatusキーに値offを保存
if($(this).parent().attr('class').indexOf('auto') != -1){ //自動リロードがONならOFF表示
reloadP();
offBtn();
} else { //自動リロードOFF状態なら手動でリロード
location.reload();
}
}
});
} else {
alert('ご使用のブラウザではリロードボタンは動作しません。');
$('.reload span').text('リロードできぬ・・・');
}
function reloadS(){
status = storage.setItem('rlStatus', 'on');
reloadTimer=setInterval(function(){
location.reload();
} , 30000);//30秒ごとに自動リロード
}
function reloadP(){ //自動リロード解除
clearInterval(reloadTimer);
}
function offBtn(){
if(!$('#reset').length) $('.reload').append(''); //#resetがなかったら追加
$('.reload').removeClass('auto').css('padding','0 30px 0 0');
$('.reload span').text('自動OFF');
}
});
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
やっていることはほぼ上のURLにクエリ文字列を付加するパターンのコードと同じなので、詳細の説明は割愛します。