Reactjs 浏览器选项卡关闭事件答案

【问题标题】：Reactjs Browser Tab Close EventReactjs 浏览器选项卡关闭事件
【发布时间】：2016-04-01 11:22:58
【问题描述】：

您好，我想知道如何在浏览器标签关闭时提示消息。我正在使用 Reactjs。

handleWindowClose(){
    alert("Alerted Browser Close");
},
componentDidMount: function() {
    window.addEventListener('onbeforeunload', this.handleWindowClose);
},

componentWillUnmount: function() {
    window.removeEventListener('onbeforeunload', this.handleWindowClose);
}

这是我尝试添加到我的反应组件的内容。请指导我如何进一步进行。

【问题讨论】：

标签： reactjs

【解决方案1】：

除了事件名称和警报将在该特定事件中被阻止这一事实之外，您所做的都是正确的。

您可以显示这样的消息：

window.addEventListener("beforeunload", (ev) => 
{  
    ev.preventDefault();
    return ev.returnValue = 'Are you sure you want to close?';
});

希望这会有所帮助。

【讨论】：

谢谢..这有效..但是我无法删除 componentWillUnmount 上的事件侦听器。它是正确的事件吗？？
您可以在构造函数初始化期间将处理程序存储在本地字段：this.handler = (ev) => ...。然后在addEventListener("beforeunload", this.handler)和removeEventListener("beforeunload", this.handler)方法中对应使用该字段。
像黄油一样工作..非常感谢
较新版本的 Chrome 和其他浏览器不再允许您自定义此字符串。 chromestatus.com/feature/5349061406228480
我在哪里调用了这个函数？

【解决方案2】：

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>
        )
    }
}

【讨论】：

【解决方案3】：

在用户决定关闭标签后，我需要触发逻辑。这是我的解决方案（用于功能性反应组件和 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 的 this 博客文章

【讨论】：

【解决方案4】：

现在可以使用钩子来实现相同的功能。例如

import { useBeforeunload } from 'react-beforeunload';

然后在你的组件中使用：

 useBeforeunload(() => "Are you sure to close this tab?");

虽然我们返回的是自定义字符串，但它会在此处显示浏览器的默认消息。

【讨论】：

【解决方案5】：

如果您想在离开页面前显示某种确认信息，请遵循beforeunload event 指南：

根据规范，显示确认对话框事件处理程序应在事件上调用 preventDefault()。

但请注意，并非所有浏览器都支持此方法，有些浏览器而是要求事件处理程序实现两个遗留的之一方法：

将字符串分配给事件的 returnValue 属性

从事件处理程序返回一个字符串。

为了防止不需要的弹出窗口，浏览器可能不会显示创建的提示在beforeunload 事件处理程序中，除非页面已被交互有，甚至可能根本不显示。

HTML 规范声明调用window.alert()， window.confirm() 和 window.prompt() 方法可能会被忽略这个事件。有关详细信息，请参阅HTML specification。

这应该涵盖大多数情况。使用挂载useEffect定义回调，添加事件监听，返回清理函数移除监听。

useEffect(() => {
  const unloadCallback = (event) => {
    event.preventDefault();
    event.returnValue = "";
    return "";
  };

  window.addEventListener("beforeunload", unloadCallback);
  return () => window.removeEventListener("beforeunload", unloadCallback);
}, []);

【讨论】：

【解决方案6】：

您可以在卸载组件时显示，但不能在窗口关闭时显示自定义消息。现代浏览器不支持它 (Check browser compatibility)。您可以在点击事件上设置警报，并在那里设置一些自定义消息。

谢谢

【讨论】：