Question

仅仅因为您没有看到用于功能并不意味着它没用。

Stack Exchange网络，GMail，Grooveshark，Yahoo！ Mail和Hotmail使用onbeforeunload提示来阻止/警告用户在开始编辑内容后离开页面。哦，是的，几乎每一个桌面程序都接受可保存的用户输入数据，利用这个用户提前用户模式。

我的功能与此类似：

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停止工作。

Answer 1

我认为您可以使用从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()) };

在两个回调之间#counter从未高于2（ms）。似乎结合使用这两个回调可以满足您的需求。

编辑 - 回答评论：

关闭。这就是我的想法

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);
};

Answer 2

我已经将上面的答案封装在一个易于使用的功能中：

function registerUnload(msg, onunloadFunc) {
    var alreadPrompted = false,
        timeoutID = 0,
        reset = function() {
            alreadPrompted = false;
            timeoutID = 0;
        };

    if (msg || onunloadFunc) { // register
        window.onbeforeunload = function() {
            if (msg && !alreadPrompted) {
                alreadPrompted = true;
                timeoutID = setTimeout(reset, 100);
                return msg;
            }
        };

        window.onunload = function() {
            clearTimeout(timeoutID);
            if (onunloadFunc) onunloadFunc();
        };
    } else { // unregister
        window.onbeforeunload = null;
        window.onunload = null;
    }
}

注册使用：

registerUnload("Leaving page", function() { /* unload work */ });

取消注册使用：

registerUnload();

希望这会有所帮助..

window.onbeforeunload可能会多次触发

仅仅因为您没有看到用于功能并不意味着它没用。

2 个答案: