用户尝试退出时使用回调提示

Question

我有一个页面，其中有用户之间的 Webrtc 调用。

我希望当用户尝试转到另一个页面/重新加载页面/退出浏览器时，会出现一个提示，询问他是否确定要离开页面，如果用户按下“是”，我希望有一个回调。

在回调中（不确定是否相关），我将关闭对等方并正确断开所有连接，以便呼叫将断开，用户将不再听到音频，另一方将知道用户也已断开连接。

• 要在刷新时执行此操作，我看到了 window.onunloaded 函数

• 浏览器退出时是否有可能？

• 我看到Prompt 选项可以在路线更改时执行此操作，但我没有看到如何在确认时插入回调。

我很乐意得到一个可行的示例，因为对于这样一个奇怪的小东西来说感觉很复杂..

谢谢。

Answer 1

处理 React 的导航事件

我认为您正在寻找的是 getUserConfirmation 组件的 getUserConfirmation 属性。

传递给 prop 的函数可能如下所示（TypeScript 示例）：

const getUserConfirmation = (
    message: string,
    callback: (ok: boolean) => void
): void => {
    const answer = window.confirm("Do you want to navigate away?");

    // do something depending on which button was pressed

    callback(answer); // allow or disallow React's navigation
};

在您定义路线的地方：

<BrowserRouter getUserConfirmation={getUserConfirmation}>
    ... routes go here ...
</BrowserRouter>

不过，您仍然需要使用 <Prompt>：

<Prompt
     when={boolean}
     message="This string will be supplied in the confirmation function above as second parameter"
/>

处理浏览器刷新

您可能想要添加这样的回调

window.onbeforeunload = () => {
    // some non-blocking logic

    return true;
};

不再需要后，可以清理：

window.onbeforeunload = null;

查看this SO question，似乎无法开箱即用地捕获用户对onbeforeunload 中的原生确认窗口的响应。

window.onunload 可能是清理您的资料的正确位置，因为这很可能意味着用户已选择离开该页面。