ブラウザバックを検知してポップアップを出す方法を教えてください。

Question

実現したいこと

ブラウザの戻るボタンを押した際に離脱防止用のポップアップを表示したい。

発生している問題・分からないこと

history.pushStateを使ったやり方だと、ユーザーが画面上のどこかをクリックしない限り動作しない。ユーザーがクリックしなくても動作するようにしたい。

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

リダイレクトでなんとかならないか試しましたが無理でした。

Answer 1

その処理がどうしても必要とは思えませんが、姑息に強制的にモーダルをクリックさせるのはどうでしょう？

<style>
#dlg{
width:100%;
height:100%;
}
#dlg div{
width:100%;
height:100%;
display:flex;
justify-content: center;
align-items: center;

}
</style>
<script>
window.addEventListener('pageshow', ()=>{
  dlg.showModal();
  dlg.addEventListener('click',()=>{
    dlg.close();
  });
});
window.addEventListener('beforeunload', e=>{
  const txt="test";
  e.returnValue = txt;
  return txt;
});
</script>
<dialog id="dlg"><div>click start</div></dialog>
contents