javascript ページを更新（F５）させる方法について

Question

お世話になっております。Ezです。

JavaScriptについて詰まってしまいまして、お知恵を拝借できないでしょうか？

<script>
window.onload = function() {
  console.log('onload 2');
  setTimeout("myfunc()",0);
}
function myfunc() {
  window.location.reload(true);
}


</script>

その対象ページにアクセスがあったら、「１度」だけ更新（F5）させるような作りを実装させたいです。
色々調べて自分なりに作ったところ上記のようになりました。

しかし、上記コードだと毎秒？ずーっと更新されつづけてしまうため困っております。
たった「１度」だけ更新させるにはどのような手法でできますでしょうか？

ご存じの方いらっしゃいましたら教えて頂けませんでしょうか？

Answer 1

確かにこのコードでは

画面を表示する → onload が走る → setTimeoutが実行される → ０秒でmyfunc()が実行される → reloadが実行される → 画面を表示する → onlodaが走る → ・・・

を延々と繰り返すことになります

１度だけにしたいなら「今開いている画面からの更新であること」を何かしらの方法で記憶し判定する必要があります

方法には

cookieを使用する
localstrageを使用する
URLパラメータを使用する

などが思いつきます

URLパラメータを使う例

window.onload = function() {
  console.log('onload 2');
  var query = window.location.search.substring(1);
  if( query.length == 0 ){
    setTimeout("myfunc()",0);
  }
}
function myfunc() {
//  window.location.reload(true);
  window.location = window.location + "?0";
}

Answer 2

<script>
window.onload = function() {
  console.log('onload');
  setTimeout(myfunc,0);
}

function myfunc() {
  var isReloaded = false; //リロード済みかどうかの確認フラグ用変数
　　
　//リロード済みでなければリロードを実行
  if (isReloaded !== false) { 
      window.location.reload(true);
	  isReloaded = true; //リロード後にリロード履歴フラグをtrueにセット
  }
}
</script>

リロード済みの時はリロード処理を実行しないようにしないと、
永遠とループしてしまうので、それがうまく行かない原因です。

Comments

[EzrealTrueshot]

ありがとうございます！

[退会済みユーザー]

あ、ごめんなさい！ページが再読み込みされてしまうとフラグ用の変数に保持していた値も初期化されてしまうので、書いたコードではうまく機能しないですよね。。。

クッキーやlocal storageに読み込み済みかどうかの情報を保存して、そのクッキーに保存した情報をもとに条件分岐させないとダメですね。