35

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

ここで、ユーザーが表示されるダイアログで「キャンセル」をクリックしたときに、Javascript コードを実行したいと考えています (ページから移動したくないと言っています)。

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

更新: アイデアは、ユーザーがキャンセルを選択した場合に、実際にユーザーを保存して別の Web ページに誘導することです。

4

6 に答える 6

54

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

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

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

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

于 2011-01-10T20:15:22.087 に答える
7

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

基本的に、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);
    });
});

編集： ここにjsfiddle

于 2014-09-10T12:44:10.317 に答える
2

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

于 2011-01-10T19:45:45.310 に答える
2

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

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

function checkunload() {   
  $('body').unbind("mousemove");
  //ADD CODE TO RUN IF CANCEL WAS CLICKED
}
于 2011-01-13T23:52:15.060 に答える