スマートフォンを含む最近のブラウザでは、戻るボタンで前のページに戻った際に、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を確認する必要があります。

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered by WP Hashcash

© 2016 nmi.jp Suffusion theme by Sayontan Sinha