Webサイトで離脱確認を実装する際に詰まった
ページを離れる際に警告を出したい
Webアプリの設定ページだと、
設定を編集中の状態で、ユーザがページを移動しようとした際に、
データが保存されていないことを警告したい場合があります。
このような機能を実装しようとしたのですが、
実装して、いざ各ブラウザで動作確認すると正常に動作しない場合があったので、
まとめておきます。
beforeunloadイベントが、SafariとiOSだけ動作がかなり違う
上記で説明したようなことをしようと思うと、
beforeunloadイベントのメソッドを実装すると思います。
ただ、iOSの場合、このbeforeunload自体が発火しません。
このあたりで確認して見ると、
https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
Mobile Safariはbeforeunloadが未実装であると書かれてるんですが、
iOSのChromeでも発火しません。
PCのSafariの場合は、一応beforeunloadが発火します。
しかし、他のブラウザと違い、
表示されたダイアログで、一度ページを移動するを選択すると、
それ以降はbeforeunloadが発火してもダイアログが表示されなくなりました。
ダイアログの選択がキャッシュされるようで、ブラウザのリロードをすると再度表示されるようになります。
ただ、バックフォワードキャッシュでもないようで、結局２回目以降にダイアログを表示させる方法が見つかりませんでした。
まとめ
入力が変わった時点で都度変更を保存するというのが、一番マシな方法になるのかなぁと思います。
なんか他にいい方法ないもんでしょうかね？