Vue.jsにて、Androidのwebブラウザで「このサイトから離れますか？」のアラートの制御を行いました

Vue.jsにて、Androidのwebブラウザで「このサイトから離れますか？」のアラートの制御を行いました

再読み込みなどの更新ボタンを押してしまった等、意図しない操作でページを離れるであろうと場合は「このサイトから離れますか？」的はアラートを表示。
ログアウトボタンなど、意図的にページを離れる時はアラートを表示させないというものです。

createdにて、addEventListenerにbeforeunloadを登録し、コールバックを呼び出す。

created() {
        //再読み込みで確認アラートが表示される
        window.addEventListener('beforeunload', this.refreshConfirm, false);
    },

反応するメソッドを用意しておく。

methods: {
    refreshConfirm(e){
        //一部のブラウザのみここのテキストが反映される。
        const confirmMessage = '本当にページ移動しますか？';
        e.returnValue = confirmMessage;
        return confirmMessage;
    },

    logout() {
        //意図的な操作ではアラートを表示させない。
        window.removeEventListener('beforeunload', this.refreshConfirm, false);
    },
    ・
    ・
    ・

調べてみると意外と簡単にできました。

【JavaScript】離脱時に beforeunload でアラート表示、だがカスタムメッセージが設定できない
というQiita記事を参考にさせていただきました(こちらです)

感謝!!

Tags

• Javascript
• Vue.js