読者です 読者をやめる 読者になる 読者になる

北海道苫小牧市出身の初老PGが書くブログ

永遠のプログラマを夢見る、苫小牧市出身のおじさんのちらしの裏

戻るボタンとonloadイベント

ブラウザの戻るボタン(history.back)で戻った時にonloadイベントが走るかどうかは、ブラウザによって違うようです。

まず、IEですが、戻るボタンのときもonloadイベントが走ります。よって、なんにも心配要らないです。


次に、Firefoxではbfcacheと言う機能があり、以下の事情になってます。

ユーザがキャッシュされたページにナビゲートしたとき、インラインスクリプトと onload ハンドラは実行されません。
(中略)
ユーザがそのページから去るナビゲートをするときに実行されるようにしたい動作があるものの、この新しいキャッシュ機能を生かしたく、さらにそれゆえに unload ハンドラを使用したくないという場合は、新しい pagehide イベントを使用します。
Using Firefox 1.5 caching

と言うことで、Firefoxのことを考えるのなら、onpageshowイベントを監視しましょう。渡って来るeventオブジェクトに、persisted値があります。これがtrueだとキャッシュからの実行*1なので、処理が必要になります。


最後に、Safariですが、こいつも戻るボタンで遷移した場合はonloadハンドラを呼びません*2。ので、先ほどのFirefoxのドキュメントに乗っていた、「unloadイベントがあるとキャッシュしない」の性質を利用します。この性質は当然Firefoxのものではありますが、「unloadがある → スクリプトの終了処理をしている → この状態を保持しても、スクリプトはもう使えない → キャッシュしない」と考えれば、
Safariでも同じ事情になっている可能性が高い、との推論です。

では、検証してみましょう。

<body onload="alert('test');">

と書くと戻るボタンでアラートが出ません。

<body onload="alert('test');" onunload="">

と書くと、見事、戻ってもアラートが出ます。推論通りの動きになりました。


ってことで、困ったときはお試し下さい。ただし、これをやるとキャッシュ機能を完全に無効にしてしまうため、動的に生成するページ等で利用するとパフォーマンス上の大きな障害となりえます。よく考えて使うべきでしょう。

*1:つまりonloadが呼ばれてない

*2:ドキュメントは見つけられませんでした。知ってる人教えて下さい。