プロジェクトでjQuery Mobileとか使っていて、結構ゴリゴリ $.mobile.changePage を呼んだりするページを作ってるんですが、そんな折に、ブラウザバックすると画面の更新がされてないぜ？って現象に出くわし、その原因が bfcache （Back-Forward Cache） にあるらしいこと、 onunload にイベントハンドラを登録すればいいよ、 的な回答を 戻るボタンが押された際、ページのJavaScriptを途中の状態から実行させない方法 で見つけて実装したものの iPhone5(iOS6) では効いていないことを確認し、ああなんだよもうと思いながら Mobile SafariやAndroid標準ブラウザでhistory.backした際にloadイベントを走らせる方法 に書いてある遷移時に setTimeout を登録する方法などを試したものの、読み込みタイミングによっては動作が変わってしまうので取りやめ、 ブラウザキャッシュの無効/有効 で書いてあった iframe も試してみたり、 bfcache について覚えて帰ってもらいます。 を読んだりしましたよ。
みんな、けっこうハマってるんですね。
まとめると、
- HTTPヘッダやMETAタグにキャッシュ抑止を書いて、
- onunloadにイベントハンドラを登録し、
- bodyにiframeを書いたり
- pageshow.persistedを見たりしながら
いいかんじに対応すればいいわけです。
まったくもってウンザリしますね。