如何在Safari中使用pagehide事件阻止未完成Ajax时页面卸载？

针对你遇到的Safari页面卸载场景，这里给你梳理一套可靠的实现方案——因为Safari对beforeunload的限制比较严格，而pagehide事件是更适合Safari的页面卸载监听事件，但它的特性和beforeunload有差异，得针对性处理：

核心思路 #

Safari中pagehide事件无法像beforeunload那样通过返回自定义文本阻止页面卸载，但我们可以利用它确保未完成的请求（比如GA上报）能被可靠发送，同时结合beforeunload给用户提供必要的离开提示（虽然Safari会强制用默认提示文本）。

具体实现代码 #

class YourComponent extends React.Component {
  state = {
    isRequestProgress: false
  };

  // 封装请求逻辑，统一维护请求状态
  makeAjaxRequest = async () => {
    this.setState({ isRequestProgress: true });
    try {
      // 替换成你的实际请求逻辑
      await fetch('/your-target-api');
    } catch (err) {
      console.error('请求失败:', err);
    } finally {
      // 无论成功失败，都标记请求结束
      this.setState({ isRequestProgress: false });
    }
  };

  componentDidMount() {
    // 同时监听两个事件，兼容不同浏览器
    window.addEventListener('beforeunload', this.handleBeforeUnload);
    window.addEventListener('pagehide', this.handlePageHide);
  }

  componentWillUnmount() {
    // 记得移除监听，避免内存泄漏
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
    window.removeEventListener('pagehide', this.handlePageHide);
  }

  handleBeforeUnload = (event) => {
    if (this.state.isRequestProgress) {
      // Safari会忽略自定义提示文本，显示浏览器默认提示
      event.preventDefault();
      // 部分浏览器需要设置returnValue才能触发提示
      event.returnValue = '';
    }
  };

  handlePageHide = (event) => {
    if (this.state.isRequestProgress) {
      // 用navigator.sendBeacon确保上报请求不被页面卸载中断
      // 这是专门为页面卸载场景设计的API，浏览器会保证请求完成
      const gaReportData = {
        // 你的GA上报数据结构
        event: 'unload_during_request',
        // ...其他字段
      };
      
      // sendBeacon支持FormData/Blob等格式，这里转成Blob适配JSON数据
      navigator.sendBeacon(
        '/your-ga-endpoint',
        new Blob([JSON.stringify(gaReportData)], { type: 'application/json' })
      );

      // 也可以用带keepalive参数的fetch，支持更多自定义配置
      // fetch('/your-ga-endpoint', {
      //   method: 'POST',
      //   body: JSON.stringify(gaReportData),
      //   headers: { 'Content-Type': 'application/json' },
      //   keepalive: true
      // });
    }
  };

  // 其他组件逻辑...
}

关键注意点 #

1. pagehide的特性：这个事件触发时页面已经开始卸载流程，无法阻止用户离开，所以我们的目标是确保请求上报完成，而不是拦截卸载。
2. 可靠的请求发送方式：普通的AJAX请求在页面卸载时会被浏览器中断，必须用navigator.sendBeacon或带keepalive: true的fetch，这两个API都是浏览器专门为这类场景设计的，能保证请求在后台完成。
3. Safari的beforeunload限制：从Safari 13.1开始，自定义提示文本会被完全忽略，只能触发浏览器默认的离开确认弹窗，所以不要浪费精力在自定义提示内容上。
4. 状态一致性：一定要在请求的finally块中更新状态，避免请求失败后状态一直停留在true，导致后续误触发提示或上报。

如果你的需求是必须等待请求完成才能允许用户离开，那仅靠事件监听不够——建议在请求进行中时，禁用页面上可能触发跳转/刷新的元素（比如导航链接、刷新按钮），配合beforeunload的提示，尽可能降低用户在请求未完成时离开的概率。

内容的提问来源于stack exchange，提问作者user1722564