ブラウザの戻るボタン押下時にリロードする方法

Question

いつもお世話になっております。

ブラウザの戻るボタンを押下した時の挙動について教えて下さい。
例えば、データベースを一覧表示する画面から、特定行をクリックしてレコード削除をするスクリプトを呼び出して結果を表示する画面に遷移した後、ブラウザの戻るボタンをクリックして元の一覧画面に戻ると、キャッシュが有効になっているため、レコードが削除される前の状態になります。

画面でＦ５を押すと当然、消された状態になるのですが、戻るボタンが押されて表示された時というイベントを取得してリロードをすることは出来ないのでしょうか？

ネット上の記事で、出来るようなことは幾つか見かけたので、リロードさせたい側の画面に下記のようなスクリプトを実装してみましたが、どれもうまくいきません。

<script type="text/javascript" src="http://*/sample.js?date=(new Date()).getTime()"></script>

<script type="text/javascript">
// pattern1
window.onpageshow = function(event) {
    if (event.persisted) {
        alert("reload");
        window.location.reload();
    }
};
// pattern2
window.addEventListener('popstate', function (e) {
    alert("reload");
    window.location.reload();
});
// pattern3
window.onbeforeunload = function(){
    alert("reload");
    location.reload(true);
};
</script>

ChromeとFireFOXの何れもNGでした。
戻るボタンを禁止して、元の一覧画面に遷移するボタンを付けるのが正しいやり方なんでしょうか？

Comments

[plasticgrammer]

遷移先ページのキャッシュを無効にする（metaタグ等で指定）のは、対応としては『無し』ですか？

[miyabi_pudding]

> データベースを一覧表示する画面

ここに関して、サーバーサイド（PHPなど）で実装しているのでしょうか？

[hatsuzo]

plasticgrammer　さん　コメント有難うございます。

それでも構わないのですが、戻るボタンの場合は効かないようです。
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
の何れも効きませんでした。

miyabi_takatsuk　さん　コメント有難うございました。

> データベースを一覧表示する画面
は、サーバーサイドJavascriptでデータを取得したものをhtmlに返しています。
もしかすると、こうしたフレームワークを使っている影響なのででしょうか。

Answer 1

はまりそうな処理なのであまりおすすめはしませんが
ヒストリーバックしてきたときにリロードするならこう

window.addEventListener('pageshow',()=>{
  if(window.performance.navigation.type==2) location.reload();
});

Comments

[miyabi_pudding]

こ、こんなのあったんですか。
目から鱗です。

[hatsuzo]

yamabejpさん　どうも有難うございました。
無事解決しました。いろんな方法があるんですね。