web-dev-qa-db-ja.com

beforeunloadポップアップにカスタムメッセージを表示することは可能ですか？

window.onbeforeunload（または$(window).on("beforeonload")）を使用する場合、そのポップアップにカスタムメッセージを表示できますか？

おそらく、主要なブラウザーで動作する小さなトリックですか？

既存の回答を見ると、過去にconfirmまたはalertまたはevent.returnValueなどを使用してこれが可能であったと感じていますが、現在はもう機能していないようです。

それでは、beforeunloadポップアップにカスタムメッセージを表示する方法は？それは可能ですか？

javascriptjquerygoogle-chromefirefoxsafari
44
Ionică Bizău

ユーザーがウィンドウを閉じる前に確認メッセージを設定するには、使用できます

jQuery

$(window).bind("beforeunload",function(event) {
    return "You have some unsaved changes";
});

Javascript

window.onbeforeunload = function() {
    return "Leaving this page will reset the wizard";
};


あなたができないputconfirm/alertinsidebeforeunload


さらにいくつかのメモ：

  1. NOTすべてのブラウザがこれをサポートしています（詳細は ブラウザの互換性 MDNのセクション）
  2. Firefoxでは、このメッセージをユーザーに表示するために、ページで実際の操作を行う必要があります。
  3. 各ブラウザは、メッセージに独自のテキストを追加できます。

アクセスできるブラウザを使用した結果は次のとおりです。

Chrome：

Chrome alert on exit

Firefox：

Firefox alert on exit

サファリ：

Safar alert on exit

IE：

IE alert on exit

念のため-jqueryを含める必要があります

ブラウザのサポートとカスタムメッセージの削除に関する詳細情報：

  1. Chrome 削除 バージョン51のカスタムメッセージのサポート
  2. Opera 削除 バージョン38のカスタムメッセージのサポート
  3. Firefoxは、バージョン44.0でカスタムメッセージのサポートを削除しました（この情報のソースを探しています）
  4. Safari 削除 バージョン9.1でのカスタムメッセージのサポート
103
Dekel

window.onbeforeunload（または$(window).on("beforeonload")）を使用する場合、そのポップアップにカスタムメッセージを表示できますか？

もう違います。すべての主要なブラウザは、実際のメッセージを無視して、独自のメッセージを表示し始めています。

既存の回答を見ると、過去にconfirmまたはalertまたはevent.returnValueなどを使用してこれが可能であったと感じていますが、現在はもう機能していないようです。

正しい。 long時間前には、confirmまたはalertを使用できました。最近では、onbeforeunloadハンドラーから文字列を返すことができ、その文字列が表示されます。現在、文字列の内容は無視され、フラグとして扱われます。

JQueryのonを使用する場合、元のイベントでreturnValueを使用する必要があります。

$(window).on("beforeunload", function(e) {
    // Your message won't get displayed by modern browsers; the browser's built-in
    // one will be instead. But for older browsers, best to include an actual
    // message instead of just "x" or similar.
    return e.originalEvent.returnValue = "Your message here";
});

または昔ながらの方法：

window.onbeforeunload = function() {
    return "Your message here"; // Probably won't be shown, see note above
};

それがあなたにできることのすべてです。

16
T.J. Crowder

バックグラウンドでメッセージを表示するdivを表示させました。モーダルの背後にありますが、これは何よりも優れています。それはちょっと怪しいですが、少なくともあなたがユーザーに出ないように気にする理由についての情報を与えることができます。

constructor($elem)
{
    $(window).unbind().bind('beforeunload', (e) => this.beforeUnload(e));
}
beforeUnload(e)
{
    $('#leaveWarning').show();
    setTimeout(function(){
        $('#leaveWarning').hide();
    }, 1); // set this to 1ms .. since timers are stopped for this modal,
           // the message will disappear right after the user clicked one of the options  
    return "This message is not relevant in most modern browsers.";
}

動作するFiddle https://jsfiddle.net/sy3fda05/2/

2
Andy Killat