スマートフォンを含む最近のブラウザでは、戻るボタンで前のページに戻った際に、JavaScriptも含めて前回の最後の状態を復元します(Back Forward Cacheと呼ばれます)。これはとても便利なのですが、ページを作成する立場からすれば、余計なお世話であることもあります。
Back Forward Cacheの無効化はとても簡単に実現できます。ページの中にonunloadを書くだけです。
<!DOCTYPE html>
<html><head><title>onunload test</title>
<script>
window.onunload = function() {};
window.onload = function() {
var count = 0;
var loop = function() {
document.getElementById("num").innerHTML = (count++);
setTimeout(loop, 50);
};
loop();
};
</script>
</head><body><div id="num"></div><a href='http://broadtail.jp'>link</a></body></html>
こんな適当なスクリプトを書いてみました。延々と数字をインクリメントするページですが、何もしないonunloadを定義しています。
こちら(unload1)に実物を用意しました。
こちら(unload2)はonunloadがない場合です。
unload2の場合は、リンクを押してから戻るボタンで戻ると途中から加算がスタートしますが、unload1の場合は必ず最初からスタートするのがわかるかと思います。
(ブラウザの設定によっては、どちらも最初からスタートするかもしれません。FirefoxはデフォルトでBack Forward Cacheがオンになっているので、気になる方はFirefoxでご覧ください)
このような挙動は仕様に書かれているものではないのですが、本来onunloadのあるページは「終了処理」を終えた後でページ遷移をするはずなので、終了処理を終えた後の状態でページがスタートするのは望ましくない状態になるでしょう。ブラウザ側でonunloadの存在によって挙動を変えるのは、筋の通った話だと思います。
ちなみにBack Forward Cacheが発生した場合は、当然onloadが呼ばれません。ページの表示を知るにはonpageshowというイベントを用います(Back Forward Cacheが発生しても発生しなくても呼ばれます)。Back Forward Cacheの発生を確認するには、onpageshowのイベントでevent.persistedを確認する必要があります。