删除 beforeunload 确认弹出窗口答案

【问题标题】：Removing beforeunload confirmation popup删除 beforeunload 确认弹出窗口
【发布时间】：2021-08-20 02:55:50
【问题描述】：

有什么办法可以阻止这种弹出模式的发生（在这种情况下是在 Firefox 中，但我想为所有浏览器适应这种变化）？

我专门在 React 中工作，但 vanillaJS 实现也可以！

我已经尝试删除该事件的 returnValue 属性，如下所述：https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload 在我的一个组件中，如下所示：

useEffect(() => {
  window.addEventListener('beforeunload', (ev) => {
    delete e['returnValue'];
  });
}, []);

但我仍然看到弹出窗口。事实上，当我console.logev 对象时，returnValue 属性仍然存在，但只是一个空字符串。当我尝试将returnValue 属性设置为null/false 时，它只是将returnValue 设置为这些值的字符串版本（"null"/"false"）。

任何关于我下一步应该采取什么步骤或方向的帮助或见解将不胜感激，谢谢！

【问题讨论】：

默认情况下应该显示此消息，如果显示，那肯定是因为在您的代码中的某个地方告诉了它。所以最好的办法是在某个地方找到它并更改它，使其不再存在。如果您不能这样做，另一种解决方案是在附加事件处理程序之前附加另一个事件处理程序，并从那里调用event.stopImmediatePropagation()。但是，您必须在另一个事件之前附加此事件。
我不小心在我的客户端 websocket 中调用了ev.preventDefault()，默认情况下会在 Firefox 中显示弹出模式。
你找到了太好了。（要清楚我之前的评论应该是“默认情况下，此消息应该不显示”）。

标签： javascript reactjs dom-events

【解决方案1】：

那么我的理解是否正确，您已在一个组件上添加了 eventListener？并且想在另一个中删除它（无论出于何种原因）？

我在 VueJS 应用程序中遇到了非常相似的问题，但我认为该解决方案适用于任何框架。

你必须明白的第一件事是，第二个参数确实意味着什么。你能不能只用：

window.removeEventListener('beforeunload', (ev) => {
  // call back contents
});

因为添加和删除时的回调不是“相同的”。

有点像这样：

a = {}
b = {}

你会认为a === b？不，不是在 Javascript 中。

因此，您将不得不使用这样的东西：

function showModal() {
  // shows the modal and stuff
}

document.addEventListner('beforeunload', showModal, true);

// some other place

document.removeEventListener('beforeunload', showModal, true);

现在您可以 100% 确定要删除相同的功能。另请阅读this 答案。它帮助我解决了我的问题。

【讨论】：

我不是要删除自定义模式，而是浏览器给出的默认“你确定要离开”模式。当您在表单/文本字段中有未保存的更改时，通常会弹出此模式。我以为我正在为 beforeunload 事件添加一个事件侦听器，这是在此模式弹出时，然后将正确的属性设置为未定义（或删除它们）以防止模式实际弹出。
React (w/ redux) 与 antd 组件库。但是，这似乎是特定于浏览器的，因为我似乎只在使用 Firefox/Safari 而不是 Chrome 时才经常收到这些弹出窗口。
抱歉误读，令人惊讶的是，您甚至在没有在 mount 上专门添加 eventListener 的情况下就看到了该模式。在旁注中，您无法更改或修改该弹出窗口的内容
我看到你不能修改那个弹窗的内容，但是可以默认禁用它吗？
我刚刚发现了问题！当我的 websocket 客户端实例关闭时，我调用了ev.preventDefault()，这会自动导致此弹出窗口出现在 Firefox 中。删除 preventDefault 即可消除此错误 :) 感谢您的帮助！