嗨，我想知道如何在浏览器选项卡关闭时提示消息。我正在使用 Reactjs。
handleWindowClose(){
alert("Alerted Browser Close");
},
componentDidMount: function() {
window.addEventListener('onbeforeunload', this.handleWindowClose);
},
componentWillUnmount: function() {
window.removeEventListener('onbeforeunload', this.handleWindowClose);
}
这是我尝试添加到我的react组件中的内容。请指导我如何进一步进行。
除了事件名称以及警报将在该特定事件中被阻止的事实之外，您所做的都是正确的。
您可以显示如下消息：
window.addEventListener("beforeunload", (ev) =>
{
ev.preventDefault();
return ev.returnValue = 'Are you sure you want to close?';
});
希望这可以帮助。
Amid 的回答对我很有效。
我使用它的方式：
class MyComponent extends Component {
// Things to do before unloading/closing the tab
doSomethingBeforeUnload = () => {
// Do something
}
// Setup the `beforeunload` event listener
setupBeforeUnloadListener = () => {
window.addEventListener("beforeunload", (ev) => {
ev.preventDefault();
return this.doSomethingBeforeUnload();
});
};
componentDidMount() {
// Activate the event listener
this.setupBeforeUnloadListener();
}
// Render method.
render() {
return (
<div>My component</div>
)
}
}
现在可以使用钩子来实现相同的功能。例如
import { useBeforeunload } from 'react-beforeunload';
然后在您的组件中使用：
useBeforeunload(() => "Are you sure to close this tab?");
虽然我们返回自定义字符串，但它会在此处显示浏览器的默认消息。
在用户决定关闭选项卡后，我需要触发逻辑。这是我的解决方案（用于功能性react组件和 TypeScript）：
useEffect(() => {
window.addEventListener('beforeunload', alertUser)
window.addEventListener('unload', handleTabClosing)
return () => {
window.removeEventListener('beforeunload', alertUser)
window.removeEventListener('unload', handleTabClosing)
}
})
const handleTabClosing = () => {
removePlayerFromGame()
}
const alertUser = (event:any) => {
event.preventDefault()
event.returnValue = ''
}
alertUser使用默认浏览器对话框警告用户。 当用户选择关闭选项卡时会触发handleTabClosing。
我的解决方案来自 Mike Pottebaum 的这篇博文
如果您想在离开页面之前显示某种确认，请遵循beforeunload 事件指南：
根据规范，要显示确认对话框，事件处理程序应在事件上调用 preventDefault()。
但是请注意，并非所有浏览器都支持此方法，有些浏览器需要事件处理程序来实现以下两种遗留方法之一：
- 为事件的 returnValue 属性分配一个字符串
- 从事件处理程序返回一个字符串。
为了对抗不需要的弹出窗口，浏览器可能不会显示在
beforeunload事件处理程序中创建的提示，除非页面已经与之交互，或者甚至可能根本不显示它们。HTML 规范声明在此事件期间可以忽略对
window.alert()、window.confirm()和window.prompt()方法的调用。有关更多详细信息，请参阅HTML 规范。
这应该涵盖大多数情况。使用挂载useEffect来定义回调，添加事件监听器，返回清理函数删除监听器。
useEffect(() => {
const unloadCallback = (event) => {
event.preventDefault();
event.returnValue = "";
return "";
};
window.addEventListener("beforeunload", unloadCallback);
return () => window.removeEventListener("beforeunload", unloadCallback);
}, []);
