[解決済み】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 イベントが発生します。

解決方法は？

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

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

以下は参考です。 をマイクロソフトが発表しています。

window.eventのreturnValueプロパティに文字列を代入すると、現在のページに留まり、代入された文字列を保持するかどうかをユーザに選択させるダイアログボックスが表示されます。ダイアログボックスに表示されるデフォルトの文、"Are you sure you want to navigate away from this page? OKを押して続行するか、キャンセルを押して現在のページにとどまります。

という問題があるようです。

1. いつ onbeforeunload が呼び出されると、ハンドラの戻り値を window.event.returnValue .
2. そして、戻り値を文字列としてパースします（NULLでない場合）。
3. 以来 false は文字列としてパースされるので、ダイアログボックスが起動し、適切な true / false .

その結果、以下のような代入方法がないようです。 false を onbeforeunload を使用して、デフォルトのダイアログに表示されないようにします。

jQueryに関する補足説明です。

• jQueryでイベントを設定する かもしれません は問題があります。 onbeforeunload イベントも発生します。もし、アンロード・イベントだけを発生させたいのであれば、私は普通のJavaScriptにこだわります。

• のショートカットがありません。 onbeforeunload を使用する必要があります。 bind の構文があります。

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

2018/04/09編集 : onbeforeunload ダイアログのカスタムメッセージは chrome-51 から非推奨となりました (参照: リリースノート )