2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ブラウザバックをトリガーにして、popstateイベントを発火させる方法

Posted at

やっとやり方を理解したので、メモ程度に残しておきます。

結論

Q:ブラウザバックをトリガーにしてイベントを発火させるのに、必要なことは?
A:historyAPI と popstateイベント

◆historyAPIとは...
ブラウザの履歴を追加・更新することができるwebインターフェースのこと

◆popstateとは...
ブラウザの履歴が変更された場合に発火するイベントのこと

認識しておくべきこと

それは
 対象としたい2画面間のブラウザバックでは、期待するタイミングでpopstateイベントは発火してくれない
です。

なので、擬似的にブラウザバック時の履歴の変更を検知するようにします。

以下は実装イメージ

やりたいこと

スクリーンショット 2021-04-23 11.18.38.png
上記、右のA画面から左のZ画面へ遷移する際にpopstateイベントを発火させたい。

popstateイベントが発火するまで

  1. http://z.jp から http://a.com に遷移。

スクリーンショット 2021-04-22 23.17.06.png

  1. http://a.com のJavaScriptで、history.pushState() を実行し、履歴を追加する。
    ※この際、履歴上はpushしたURL(一番右のA画面)に移るが、historyAPIを使って履歴を変更した場合、画面ロードが走らないため、画面はpush前のURLの画面(真ん中のA画面)が表示されている。
    スクリーンショット 2021-04-22 23.17.20.png

history.pushStateの挙動を整理すると
 ・変化するもの:履歴, アドレスバーの値
 ・変化しないもの:表示されている画面

  1. ブラウザバックを行うと、履歴が前に戻るため、この履歴の変化を検知したpopstateイベントが発火する。
    スクリーンショット 2021-04-22 23.17.30.png

まとめ

この記事で一番伝えたかったことは。。。
本来は以下のイラストのタイミング↓でブラウザバックを検知したくても
スクリーンショット 2021-04-23 11.18.38.png

実装するときは以下のタイミング↓でブラウザバックを検知する必要があるよ
スクリーンショット 2021-04-22 23.17.30.png

ということを伝えたかったです。

自分はこの理解に時間がかかってしまったので、このメモが誰かの参考になれば、と思います。
最後まで読んで頂きありがとうございました!

参考サイト

ブラウザの「戻る」ボタンをJavascriptで検知するイベント代替案

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?