PSI Labs RSS feed

Firefox で history.back 時に javascript を実行させるには onpageshow イベントを使う

お久ぶりです、tomita です。

Firefox と Safari で某サイトの動作確認していたときに以下の現象が発生しました。

  1. submit ボタンを disabled にしたあと画面遷移
  2. ブラウザの戻るボタンで戻る
  3. submit ボタンが disabled のままになっている…

以下は簡単なサンプルです。

sample1.html

調べてみると、Firefox には bfcache( Back-Forward Cache ) という機能があり、そのために javascript の状態が保存されこのような現象が起こるようです。

Using Firefox 1.5 caching | MDN

Firefox 1.5 ではウェブページ全体をその JavaScript の状態も含めてメモリ内にキャッシュし、1 つのブラウザセッションとして使用します。訪問したページ間の戻る、進むという動作にページのロードが不要になり、JavaScript の状態も保存されます。この機能によってページナビゲーションが非常に高速化します。この機能は bfcache("Back-Forward Cache" のこと)と呼ばれることもあります。このキャッシュ状態はユーザがブラウザを閉じるまで保存されます。

history.back 時にも javascript を実行させるには上記記事にもあるように「pageshow」イベントを使います。

以下は簡単なサンプルです。画面2から history.back しても submit ボタンの状態を元に戻せます。

sample1_ps.html

ちなみに IE10 以下には onpageshow イベントは実装されていないので、クロスブラウザ対応する場合は注意が必要です。

それでは~