如何阻止页面在 JS 中卸载（导航）？

Question

有谁知道如何阻止页面重新加载或导航离开？

jQuery(函数($) {

    /* 全局卸载通知 */
    警告=真；

    如果（警告）{
        $(window).bind("卸载", function() {
            if (confirm("你想离开这个页面吗") == true) {
                //他们按下OK
                警报（“确定”）；
            } 别的 {
                // 他们按下了取消
                警报（“取消”）；
                返回假；
            }
        });
    }
});

我目前正在开发一个电子商务网站，显示您未来订单的页面可以使用 +/- 按钮更改订购的商品数量。以这种方式更改数量实际上并不会更改订单本身，他们必须按下确认键并因此采取积极行动来更改订单。

但是，如果他们更改了数量并离开页面，我想警告他们这样做，以防万一发生意外，因为如果他们离开或刷新页面，更改的数量将会丢失。

在上面的代码中，我使用了一个默认为假的全局变量（仅用于测试时为真），当数量发生变化时，我会将这个变量更新为真，当他们确认更改时，我将设置它是假的。

如果警告为真并且页面已卸载，我会向他们提供一个确认框，如果他们拒绝，他们希望留在此页面上，我需要阻止它卸载。 return false 不起作用，它仍然可以让用户离开（警报仅用于调试）

有什么想法吗？

Answer 1

onbeforeunload是你想要的；您的函数“应该为 Event 对象的 returnValue 属性分配一个字符串值并返回相同的字符串”。查看来自Microsoft 和Mozilla 的文档了解详细信息。

浏览器将使用您返回的字符串向用户显示一个自定义确认框，如果他们愿意，允许他们拒绝停留在那里。必须这样做以防止恶意脚本导致拒绝浏览器攻击。

Answer 2

此代码根据 Natalie 的建议发出警告，但如果页面上的表单已提交，则禁用警告。使用 JQuery。

var warning = true;
window.onbeforeunload = function() { 
  if (warning) {
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";
  }
}

$('form').submit(function() {
   window.onbeforeunload = null;
});

Answer 3

您想使用 onbeforeunload 事件。

Answer 4

window.onbeforeunload = confirmExit;
function confirmExit()
{
    return "You have attempted to leave this page.  If you have made any changes to the fields without clicking the Save button, your changes will be lost.  Are you sure you want to exit this page?";
}

Answer 5

window.onbeforeunload = function() { 
  if (warning) {
    return `You have made changes on this page that you have not yet confirmed. 
    If you navigate away from this page you will lose your unsaved changes`;
  }
}

在 chrome、safari 和 opera 中不支持

Answer 6

正如this 评论中所说，jQuery 中没有任何内容绑定到beforeunload 事件。

@karim79：不，它没有。 jQuery 中没有任何东西绑定到 beforeunload 函数； “卸载”绑定到“卸载”事件。如果您不相信我，请搜索来源；-) – NickFitz

所以你必须使用纯 Javascript 将函数绑定到 beforeunload 事件。

var warning = true;
$("form").submit(function() {
  warning = false;
});
$('#exit').click(function() {
  window.location.replace('https://stacksnippets.net/js')
});
window.onbeforeunload = function() {
  if(warning) {
    return true;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form>
<input type="submit">
</form>

Answer 7

尝试使用 e.preventDefault() 而不是返回 false。 'e' 将是 unload 回调的第一个参数。