如何禁用角度中弹出的“离开站点？。您所做的更改可能无法保存”？

Question

我尝试在到达订单确认页面后关闭浏览器，它会发出如下所示的警报。这会给用户造成误解，认为他的更改尚未保存。所以我想避免这个弹出窗口。

我知道此警报是由于 beforeunload 事件触发的。我尝试过的解决方案：

window.addEventListener("beforeunload",(event)=>{
    return null;
})

和

 window.onbeforeunload=null;

我没有在我的应用程序中使用 jQuery。有没有其他方法可以禁用此事件的触发。

我尝试过的链接：

他们都不为我工作。

如果没有 jQuery，我怎样才能实现这个目标？我感到困惑的是如何处理这个事件，以便它不显示弹出窗口。

我使用的是 Chrome 版本 101.0.4951.64

Answer 1

这可能是由于代码中的某些第三方库或其他功能侦听“beforeunload”事件，并可能修改

event.returnValue

的值。

此解决方法可能适合您。

window.addEventListener('beforeunload', function (event) {
  event.stopImmediatePropagation();
});

这将阻止链中其他侦听器的执行。

将此代码包含在应用程序顶部以确保首先执行您的函数非常重要。

对于 Angular，AppComponent 的 ngOnInit 是一个好地方。

Answer 2

当然！如果您仍然遇到以前的代码的问题或者它不能完全满足您的要求，您可以尝试以下代码片段：

@HostListener("window:beforeunload", ["$event"])
unloadHandler(event: Event) {

//call your function here
    return "";
}

Answer 3

仅添加

beforeunload

事件的 MDN 文档以供参考。

当此事件返回（或将 returnValue 属性设置为）非 null 或未定义的值时，系统将提示用户确认页面卸载。

Internet Explorer 不考虑空返回值，并将其显示为“空”文本。 您必须使用 undefined 来跳过提示。