【Vue.js】ページの更新時などに離脱防止アラートを出す

プログラミング

ユーザデータの登録・編集ページ等、入力ページの更新時や意図しないページ遷移時に「入力内容が破棄されます」等のアラートを出したい。WindowEventHandlers.onbeforeunloadを使います。

WindowEventHandlers.onbeforeunload

WindowEventHandlers.onbeforeunload
onbeforeunload は WindowEventHandlers ミックスインのプロパティで、 beforeunload イベントを処理する EventHandler です。このイベントはウィンドウでリソースを unload しようとするときに発生します。この時点では文書はまだ表示されており、イベントはキャンセ...

画面が閉じられる際に発生するイベントです。このイベントを使用することで、画面を閉じる際、画面遷移時、更新ボタン押下時にアラートを出すことができます。

こんなやつですね。きっと見たことあるやつ。

例えば、ユーザ情報の登録・編集ページ等で、「誤ってページ遷移して、戻ったら入力内容がなくなっちゃった」みたいな事故を減らすことができますね。

実装

window.onbeforeunloadイベントをページ表示時に設定して、ページ破棄時にそのイベントをnullで埋める。

...
mounted: function () {
    window.onbeforeunload = function () {
      return '保存されていないデータは破棄されます。'
    }
 },
destroyed () {
    window.onbeforeunload = null
 }
...

既知の問題

iOSのSafariでは動作しないことが分かっています。その環境では、pagehideイベントを使うと良いみたい。

Window: pagehide event
The pagehide event is sent to a Window when the browser hides the current page in the process of presenting a different page from the session's history.

まだ、Vue.jsの環境で検証してないので、試してみたら実装とか追記します。

コメント

タイトルとURLをコピーしました