9

機能の使用が見られないからといって、それが役に立たないというわけではありません。

Stack Exchange ネットワーク、GMail、Grooveshark、Yahoo! メールと Hotmail は onbeforeunload プロンプトを使用して、ユーザーが何かを編集し始めた後にページを離れるのを防止/警告します。ああ、保存可能なユーザー入力データを受け入れるほぼすべてのデスクトップ プログラムは、ユーザーが離れる前にプロンプ​​トを表示するこの UX パターンを利用しています。

これと同様に動作する関数があります：

window.onbeforeunload = function(){
    // only prompt if the flag has been set... 
    if(promptBeforeLeaving === true){
        return "Are you sure you want to leave this page?";
    }
}

ユーザーがページから移動しようとすると、ブラウザーはページを離れるか、ページにとどまるかを選択するオプションを提示します。ユーザーが [このページを離れる] オプションを選択し、ページが完全にアンロードされる前にもう一度リンクをクリックすると、ダイアログが再び起動します。

この問題に対する絶対確実な解決策はありますか?

注：以下は解決策ではありません：

var alreadyPrompted = false;
window.onbeforeunload = function(){
    // only prompt if the flag has been set... 
    if(promptBeforeLeaving === true && alreadyPrompted === false){
        alreadyPrompted = true;
        return "Are you sure you want to leave this page?";
    }
}

ユーザーが「ページにとどまる」オプションを選択すると、将来onbeforeunloadの s が機能しなくなる可能性があるためです。

4

2 に答える 2

6

これは、コールバックsetIntervalで開始するタイマー ( ) で実現できると思います。onbeforeunload確認ダイアログが表示されている間、Javascript の実行は一時停止されます。ユーザーがキャンセルすると、時間指定された関数がalreadyPrompted変数を false にリセットし、間隔をクリアする可能性があります。

ただのアイデア。

わかりました、あなたのコメントに基づいて簡単なテストを行いました。

<span id="counter">0</span>
window.onbeforeunload = function () {
   setInterval(function () { $('#counter').html(++counter); }, 1);
   return "are you sure?";
}
window.onunload = function () { alert($('#counter').html()) };

2 つのコールバックの間#counterで 2 (ミリ秒) を超えることはありませんでした。これら 2 つのコールバックを組み合わせて使用​​すると、必要なものが得られるようです。

編集 - コメントへの回答:

近い。これは私が考えていたものです

var promptBeforeLeaving = true,
    alreadPrompted = false,
    timeoutID = 0,
    reset = function () {
        alreadPrompted = false;
        timeoutID = 0;
    };

window.onbeforeunload = function () {
    if (promptBeforeLeaving && !alreadPrompted) {
        alreadPrompted = true;
        timeoutID = setTimeout(reset, 100);
        return "Changes have been made to this page.";
    }
};

window.onunload = function () {
    clearTimeout(timeoutID);
};
于 2010-11-08T18:44:35.150 に答える