如何在 Safari 中使用“pagehide”事件来防止卸载？

Posted 2023-02-21

【中文标题】如何在 Safari 中使用“pagehide”事件来防止卸载？

【英文标题】：How to use 'pagehide' event in safari to prevent unloading?

【发布时间】：2018-08-31 20:50:10

【问题描述】：

我有一个页面，我在某些用户操作后发送 ajax 请求。在用户离开页面之前等待所有这些请求完成，这一点很重要。为此，我在 ajax 请求之前和之后设置了一些状态变量，并在 beforeunload 事件处理程序中观察它：

componentDidMount() 
    window.addEventListener('beforeunload', lockUnloadAction.bind(this));

...
export function lockUnloadAction(event) 
    let returnText = undefined;
    if (this.state.isRequestProgress) 
        // send to GA
        ....
        returnText = 'На странице еще выполняется отправка сообщения. ' +
            'Вы уверены, что хотите уйти со страницы?';
        event.returnValue = returnText;
    

    return returnText;

但在 Safari 中 beforeunload 不起作用。根据文档https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5，我应该使用pagehide。

但在此事件处理程序中不允许任何确认、警报（我在控制台中出现错误“卸载页面时不允许使用 window.alert”）。我还尝试使用preventDefault() 或stopPropogation，然后发出警报或确认，我还尝试返回一些文本值并设置event.returnValue，例如beforeunload 事件处理程序。没有任何帮助。

componentDidMount() 
    window.addEventListener('pagehide', function(event)
        event.stopPropagation();
        event.preventDefault();
        confirm('someText');
        event.returnValue = 'someText';
        return 'someText'
    );

有没有其他方法可以防止在 Safari 和移动 Safari 中确认卸载页面，或者我应该通过其他方式使用pagehide？

【参考方案1】：

根据these MDN specs，pagehide 事件是不可取消的