javascript - react 窗口卸载事件不会触发

Question

我需要使用 navigator.sendBeacon()在窗口卸载时，为了让我的服务器知道客户端已经关闭了他的窗口。我到处搜索，但它对我不起作用。

供引用，this post 中的解决方案也没有用。

我有一个包含整个项目的 App 组件。我正在尝试在它的 componentDidMount() 上设置卸载事件生命周期方法，它只是不会触发。

componentDidMount() {
  window.addEventListener("beforeunload", this.unload);
}

componentWillUnmount() {
  window.addEventListener("beforeunload", this.unload);
}

unload(e) {
  e.preventDefault();
  e.returnValue = 'test';
  navigator.sendBeacon(`http://localhost:8080/window-closed/${this.props.username}`);
  return 'test';
}

我希望服务器能够获得 AJAX 调用，并且窗口会在窗口关闭之前提示用户“测试”。实际发生的是窗口像往常一样关闭。

注意: return 'test' & e.returnValue = ''语句纯粹用于测试。我只对 AJAX 请求感兴趣。

任何帮助将非常感激。

Answer 1

如果您使用的是功能组件，您可以试试这个:

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

  const handleUnload = (e) => {
    const message = "o/";
    (e || window.event).returnValue = message; //Gecko + IE
    return message;
  };