javascript ブラウザの「戻る」で前のページのjquery等が実行されたままなので防ぐ

基本、気にしなくていいんだけど、Firefoxだと面倒。

作成日:2017-12-08, 更新日:2017-12-08

困った内容

・「ページA」から「ページB」に遷移の際にローディング画像を表示。
・「ページB」からブラウザの「戻る」で「ページA」を表示したらローディング画像を表示されたまま。

希望は
・ブラウザの「戻る」で「ページA」を表示したらローディング画像は消えていてほしい。

普段はChromeだったんで気にしていなかったんだけど、Firefoxで上記のように表示されたままになっているとのこと。

結論と経緯

結論

(上記の「ページA」に)「window.onunload = function(){};」を追記する

JqueryとCSSでローディング画像」の「HTML側」ってトコのソースが対象箇所。

経緯

色々と調べたり、試したりした。

▼「window.onpopstate」を使えと言われた

window.onpopstate = function(event) {
  ~ 処理 ~
};

・「ページA」に記載して、リロード。
・「ページB」に遷移→無反応
・ブラウザの「戻る」で「ページA」に戻ってくる→無反応
・「ページA」でブラウザの「進む」や「戻る」で違うページに遷移→無反応

▼「$(window).on('popstate', ~」を使えと言われた

$(window).on('popstate', function(e){
  ~ 処理 ~
});

・「ページA」に記載して、リロード。
・「ページB」に遷移→無反応
・ブラウザの「戻る」で「ページA」に戻ってくる→無反応
・「ページA」でブラウザの「進む」や「戻る」で違うページに遷移→無反応

紆余曲折があり・・・ブラウザの「戻る」を押したときにリファラを条件にして「戻る」を無効、「リダイレクト」にすれば?と思いつつもコレもダメ。

その後、しばらく調べてこの日は、挫折。翌日、再調査して結論に至る。

メモ

window.onunloadってヤツを入れる理由は・・・下記が参考になりそう。「アンロードイベント」ってのは「読み込みをしないイベント」って意味? よく分からない・・・。

Summary

The unload event is raised when the window is unloading its content and resources. The resources removal is processed after the unload event occurs.

~略~

Notes

Using this event handler in your page prevents Firefox 1.5 from caching the page in the in-memory bfcache. See Using Firefox 1.5 caching for details.

引用元:WindowEventHandlers.onunload

Summaryの内容
アンロードイベントは、ウィンドウがコンテンツとリソースをアンロードするときに発生します。
アンロードイベントが発生した後、リソースの削除が処理されます。
Notesの内容
このイベントハンドラをページ内で使用すると、Firefox 1.5はページをメモリ内のbfcacheにキャッシュできなくなります。
詳細については、Firefox 1.5のキャッシュの使用を参照してください。