【Javascript】popstateが動作しない時について。

ユーザーがブラウザーの「戻る」ボタンを押すなどして遷移が発生した場合、 新しい場所に遷移するためのプロセスの終了間際に発行されるpopStateイベント。

前提

popstateはWindow インターフェイスのイベントであり、下記のように記述して実行します。（Jqueryの場合）

$(function() {
  history.pushState(null, null, null);

  $(window).on("popstate", function(){
    alert("popstateが発動");
    location.href = "https://blog.hayate-room.com";//もしくは、history.pushStateで指定
  });
}); 

Chromeでは動作しない！！

本来、このコードを実行すると、

ブラウザバック時に、

アラートが発動 → 指定したリンクへ遷移する

という動作が期待されるのですが、なぜか動かない。

調べていくと、

Chrome以外のブラウザでは動作したため、Chrome側の問題であることが分かりました。

ブラウザ別の動作テスト結果（2023年1月現在）

念のために、様々なブラウザでpopstateの動作確認を行いました。

PC版Chromeのほかに、PC版Edgeでも正常に動作しないことが分かりました。

ChromeもEdgeも、タッチイベントを入れれば動作した！！

ChromeやEdgeでは、ページ読み込み後、すぐにブラウザバックをすると、popstateが発動しませんでした。

しかし、

一度画面内をクリックしてからブラウザバックをすると、popstateが呼び出されて、
アラートが発動 → 指定したリンクへ遷移する という期待通りの動作をしてくれました。

つまり、
ChormeやEdgeで対応させたい場合は、何らかのユーザーアクションを挟んでから行うと正常に動作すると思われます。

セキュリティのための仕様だと思いますが、なんとも開発者泣かせですね…笑