☰

OnBeforeUnload ダイアログをオーバーライドして独自のものに置き換えるにはどうすればよいですか? 質問する

tag-icon • tag-icon javascript jquery onbeforeunload
OnBeforeUnload ダイアログをオーバーライドして独自のものに置き換えるにはどうすればよいですか? 質問する

ユーザーがページを離れる前に、保存されていない変更について警告する必要があります (かなり一般的な問題です)。

window.onbeforeunload = handler

これは機能しますが、独自のテキストを囲む煩わしい標準メッセージを含むデフォルトのダイアログが表示されます。標準メッセージを完全に置き換えてテキストが明確になるようにするか、(さらに良い方法として) jQuery を使用してダイアログ全体をモーダル ダイアログに置き換える必要があります。

今のところ私は失敗しており、答えを持っていると思われる人も誰も見つけていません。それは可能なのでしょうか?

私のページのJavascript:

<script type="text/javascript">   
    window.onbeforeunload = closeIt;
</script>

closeIt() 関数:

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

jQuery と jqModal を使用して、次のようなことを試しました (カスタム確認ダイアログを使用)。

$(window).beforeunload(function () {
    confirm('new message: ' + this.href + ' !', this.href);
    return false;
});

これも機能しません。イベントにバインドできないようですbeforeunload。

ベストアンサー1

のデフォルトのダイアログを変更することはできないonbeforeunloadため、そのまま操作するのが最善策です。

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

参考資料はこちらMicrosoft からのコメント:

window.event の returnValue プロパティに文字列が割り当てられると、現在のページに留まり、割り当てられた文字列を保持するオプションをユーザーに提供するダイアログ ボックスが表示されます。ダイアログ ボックスに表示される既定のステートメント「このページから移動してもよろしいですか? ... 続行するには [OK] を、現在のページに留まるには [キャンセル] を押してください。」は、削除または変更できません。

問題は次のようです:

  1. が呼び出されるとonbeforeunload、ハンドラの戻り値が として取得されますwindow.event.returnValue。
  2. 次に、戻り値を文字列として解析します (null でない限り)。
  3. は文字列として解析されるためfalse、ダイアログ ボックスが起動し、適切なtrue/ が渡されますfalse。

結果として、デフォルトのダイアログからそれを防ぐためにfalse割り当てる方法はないようです。onbeforeunload

jQuery に関する追加情報:

  • jQuery でイベントを設定すると、他のイベントも発生する可能性があるため、問題が発生する可能性onbeforeunloadがあります。アンロード イベントのみを発生させたい場合は、単純な JavaScript を使用することをお勧めします。

  • jQuery にはショートカットがないのでonbeforeunload、汎用bind構文を使用する必要があります。

    $(window).bind('beforeunload', function() {} );

編集 2018/09/04 : onbeforeunload ダイアログのカスタム メッセージは、chrome-51 以降では非推奨です (cf:リリースノート）

おすすめ記事