反应窗口卸载事件不会触发

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

你应该将 this 绑定到 unload 方法或将其转换为箭头函数。

吃货方式

constructor() {
    super();
    this.state = {
      //stuff
    };
    this.unload.bind(this);
  }

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

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

unload(e) {
  navigator.sendBeacon(`http://localhost:8080/window-closed/${this.props.username}`);
}

箭头函数方式：

  constructor() {
    super();
    this.state = {
      //stuff
    };
  }

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

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

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

记得删除componentWillUnmount 上的事件监听器（你正在重新添加它）。

Answer 2

您也许可以使用navigator.sendBeacon。

const UnloadBeacon = ({
  url,
  payload = () => {},
  children
}) => {
  const eventHandler = () => navigator.sendBeacon(url, payload())

  useEffect(() => {
    window.addEventListener('unload', eventHandler, true)
    return () => {
      window.removeEventListener('unload', eventHandler, true)
    }
  }, [])

  return children
}

此处为完整示例：https://gist.github.com/tmarshall/b5433a2c2acd5dbfc592bbc4dd4c519c

Answer 3

如果你使用的是函数式组件，你可以试试这个：

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

Answer 4

您是否尝试过将上传功能声明为粗箭头功能？还要在 componentDidMount 之前声明它。 （为了更好的可读性）在将其作为参考传递之前。

你也试过在 contructor 中附加监听器吗？并让 surw 在构造函数中绑定你的函数。供参考

还要在 componentWillUnmount 处销毁监听器，而不是添加它。 （无用）使用对侦听器的引用来销毁。您将在构造函数中创建它。

祝你好运

Answer 5

我不确定为什么beforeunload 不起作用，但作为一种解决方法，您可以考虑使用hashchange 事件。

componentDidMount() {
    window.addEventListener("hashchange", this.doSomething, false);
}

componentWillUnmount() {
    window.removeEventListener("hashchange", this.doSomething, false);
}