onbeforeunload確認画面のカスタマイズ

Question

ブラウザで onbeforeunload イベントのカスタム確認ボックスを作成することはできますか?試してみましたが、確認ボックスが 2 つ表示されます (1 つは私からの返信確認のみです...)次にブラウザからの標準のもの)。

現時点で私のコードは次のようになります:

var inputChanged = false;

$(window).load(function() {
    window.onbeforeunload = navigateAway;
    $(':input').bind('change', function() { inputChanged = true; });
});

function navigateAway(){
    if(inputChanged){
        return 'Are you sure you want to navigate away?';
    }
}

これにはjQueryを使用しています。

Answer 1

window.onbeforeunload = function (e) {
  var message = "Your confirmation message goes here.",
  e = e || window.event;
  // For IE and Firefox
  if (e) {
    e.returnValue = message;
  }

  // For Safari
  return message;
};

ご注意：ほとんどのブラウザでは、いくつかの他のテキストの後にこのメッセージを入れました。あなたは、確認ダイアログの内容を完全に制御する必要はありません。

Answer 2

いいえ、あなたはブラウザから標準のものを避けることができません。あなたがすることができるすべてはそれにいくつかのカスタムテキストを挿入です。次のイベントハンドラを使用している場合（プロトタイプLIBの方法を登録し）ます：

Event.observe(window, "beforeunload", function(event) {
    if (showMyBeforeUnloadConfirmation)
        event.returnValue = "foo bar baz";
});

（とshowMyBeforeUnloadConfirmationが真である）次のテキストをブラウザの標準の確認を取得します

  

あなたはこのページから移動してもよろしいでしょうか？

     

fooのバーバズ

     

[OK]を押すと、現在のページに滞在し続ける、またはキャンセルします。

     

[OK] [キャンセル]

Answer 3

私も同じ問題に直面しました。メッセージを含む独自のダイアログ ボックスを表示することはできましたが、直面した問題は次のとおりです。

1. すべてのナビゲーションでメッセージが表示されていたため、閉じるクリックのみにメッセージが表示されるようにしました。
2. ユーザーが「キャンセル」を選択した場合、独自の確認メッセージが表示されますが、ブラウザのデフォルトのダイアログボックスが表示されます。

以下は私が見つけた解決策のコードで、マスター ページに書きました。

function closeMe(evt) {
    if (typeof evt == 'undefined') {
        evt = window.event;
    }
    if (evt && evt.clientX >= (window.event.screenX - 150) && evt.clientY >= -150 && evt.clientY <= 0) {
        return "Do you want to log out of your current session?";
    }
}

window.onbeforeunload = closeMe;