nmi.jp Twitter → @tkihira
JavaScriptでglobal objectを取得する方法 setTimeoutの基本

戻るボタンが押された際、ページのJavaScriptを途中の状態から実行させない方法


2011-06-04
Takuo Kihira

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


次の投稿 setTimeoutの基本