web-dev-qa-db-ja.com

ユーザーがJavaScriptのonbeforeunloadダイアログでキャンセルをクリックしたかどうかを知る方法は？

誰かが作業を保存せずに特定のページから移動しようとすると、ダイアログボックスがポップアップします。私はJavascriptのonbeforeunloadイベントを使用しています。

ここで、ユーザーが表示されたダイアログで[キャンセル]をクリックしたときにJavascriptコードを実行したいと思います（ページから移動したくないなど）。

これは可能ですか？私もjQueryを使用しているので、beforeunloadcancelのようなイベントにバインドできますか？

[〜＃〜] update [〜＃〜]：アイデアは、実際にユーザーを保存して別のWebページに誘導することです彼らがキャンセルを選択した場合

javascriptjquerydom-eventsonbeforeunload
32
at.

あなたはこのようにそれを行うことができます：

$(function() {
    $(window).bind('beforeunload', function() {
        setTimeout(function() {
            setTimeout(function() {
                $(document.body).css('background-color', 'red');
            }, 1000);
        },1);
        return 'are you sure';
    });
});

最初のsetTimeoutメソッド内のコードには1ミリ秒の遅延があります。これは、関数をUI queueに追加するだけです。 setTimeoutは非同期で実行されるため、Javascriptインタープリターはreturnステートメントを直接呼び出して続行し、ブラウザーがmodal dialogをトリガーします。これはUI queueをブロックし、モーダルが閉じられるまで、最初のsetTimeoutからのコードは実行されません。ユーザーがキャンセルを押すと、約1秒で起動する別のsetTimeoutがトリガーされます。ユーザーがokで確認した場合、ユーザーはリダイレクトされ、2番目のsetTimeoutは起動されません。

例： http://www.jsfiddle.net/NdyGJ/2/

48
jAndy

私はこの質問が古いことを知っていますが、まだこれで問題が発生している場合に備えて、私にとってはうまくいくと思われる解決策を見つけました、

基本的に、unloadイベントはbeforeunloadイベントの後に発生します。これを使用して、beforeunloadイベントで作成されたタイムアウトをキャンセルし、jAndyの回答を変更できます。

$(function() {
    var beforeUnloadTimeout = 0 ;
    $(window).bind('beforeunload', function()  {
        console.log('beforeunload');
        beforeUnloadTimeout = setTimeout(function() {
            console.log('settimeout function');
            $(document.body).css('background-color', 'red');
        },500);
        return 'are you sure';
    });
    $(window).bind('unload', function() {
        console.log('unload');
        if(typeof beforeUnloadTimeout !=='undefined' && beforeUnloadTimeout != 0)
            clearTimeout(beforeUnloadTimeout);
    });
});

EDIT：jsfiddle here

5
99 Problems - Syntax ain't one

ありえない。多分誰かが私を間違っていると証明するでしょう...実行したいコードは何ですか？キャンセルをクリックしたときに自動保存しますか？それは直感に反するように思えます。まだ自動保存していない場合は、[キャンセル]を押したときに自動保存しても意味がありません。 onbeforeunloadハンドラーで保存ボタンを強調表示して、ユーザーがナビゲートする前に何をする必要があるかをユーザーが確認できるようにすることもできます。

2
Juan Mendes

私はそれが可能だとは思いませんでしたが、このアイデアを試してみましたが、うまくいきました（ただし、これはハックのようなものであり、すべてのブラウザで同じように動作するとは限りません）。

window.onbeforeunload = function () {   
  $('body').mousemove(checkunload);
  return "Sure thing"; 
};

function checkunload() {   
  $('body').unbind("mousemove");
  //ADD CODE TO RUN IF CANCEL WAS CLICKED
}
2
Barlow Tucker