javascript - window.onbeforeunload可能会多次触发

仅仅因为您没有看到某项功能的使用，并不意味着它没有用。

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

最佳答案

我认为您可以通过在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);
};

关于javascript - window.onbeforeunload可能会多次触发，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4126820/