Facebook 如何在其应用程序中为未保存的更改显示自定义模式窗口？

Posted 2023-02-21

【中文标题】Facebook 如何在其应用程序中为未保存的更改显示自定义模式窗口？

【英文标题】：How is Facebook able to show a custom modal window for unsaved changes in their application?

【发布时间】：2019-05-12 21:42:38

【问题描述】：

我对使用 React 的解决方案感兴趣。 我只能找到显示浏览器级别警告的示例，但无法找到在用户离开带有未保存数据的页面时显示自定义模式窗口的示例。

【参考方案1】：

有一个名为onbeforeunload 的事件存在于全局windows 对象上。

componentDidMount() 
  window.addEventListener('onbeforeunload', () => 
    //show your React modal
    this.setState( isModalShown: true );
    if (this.state.choose) 
      return undefined;
    
  );
 

render() 
  return  (
    <Modal open=this.state.isModalShown>
      <p>Do you wish to continue?</p>
      <button onClick=() => this.setState( choose: true )>Cancel</button>
      <button onClick=() => this.setState( choose: false )>Ok</button>
    </Modal>
  );

注意浏览器支持，因为并非所有浏览器的行为都相同https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

Facebook 解决方案很可能非常先进，并且针对不同的浏览器使用了变通方法。

【讨论】：

请注意，这将无法导航到其他域。即来自 facebook.com -> linkedin.com