如何让用户选择是否离开当前页面？

写在开头

• 为何要写这个文章，由于每一个礼拜都有人问我这个问题...
• 抄一个微信公众号的编辑器的相似功能场景来实现

为何要让用户选择是否离开页面

• 若是用户填写了不少数据此时
• 不当心点了其余a标签或者关闭了浏览器，不作判断，那么用户数据直接丢了

梳理需求

• 离开页面方式，被location.href,a标签,关闭浏览器或者当前tab页等...
• 须要判断数据是否跟初始化时一致（用户有无填写表单...）
• 用户选择离开就要继续逻辑，反之则不离开

正式开始

• 首先要知道一个事件:onbeforeunload,MDN的说明是：当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，能够点击肯定按钮关闭或刷新，也能够取消关闭或刷新。
• ⚠️：HTML规范指出在此事件中调用window.alert()，window.confirm()以及window.prompt()方法，可能会失效

实践一下

• 在微信公众号编辑器界面，输入一部份内容后，点击关闭tab页，此时出现弹窗
• 删除全部内容后，回归初始进入的数据，点击关闭tab页，直接就关闭了，没有出现提示
• 看插件显示，这个编辑器界面没有使用react和vue,应该是jq吧，测试下控制台，对的，一猜就中（小编太🐂了，不点个关注？）

回到项目中，加入beforeunload事件

• HTML文件中加入script标签

`<script type="text/javascript">
        window.onbeforeunload = function () {
            return "Leave this page?";
        }
    </script>`

• 点击关闭，或者此时输入window.location.href= "xxx.ooo.com"会出现

• 那么问题来了，若是我经过a标签跳转呢？

经过a标签跳转(+前端路由)

• 我使用的是dva/router,引入相关组件

`import { Prompt } from 'dva/router';
....
render(){
  return <Prompt message={this.handlePrompt} />
}`

• 引入Prompt组件,而且传入message是一个方法，看看这个方法

`public handlePrompt = (location: Location) => {
        return false;
    };`

• 那么此时咱们使用dva/router的history.push方法去跳转前端路由，就不能跳了，由于handlePrompt一直返回false,除非返回ture,不然这个页面经过a标签就没法跳转了...

• 此时不管怎么点击一键开启都不会有效果，那么改为return true试试

`public handlePrompt = (location: Location) => {
        return true;
    };`

• 一跳就过去了

问题来了，怎么判断是否须要跳转呢？

• 参考微信公众号编辑器，若是你编辑了内容后（跟初始进入的数据不一致），并且你是经过页面内a标签跳转的，那么就出现弹窗确认）

• 那么很简单，咱们使用antd的Modal组件，以及lodash的deepclone(深拷贝)、_.isEqual(value, other)执行深比较来肯定二者的值是否相等。

❝

注意: isEqual这个方法支持比较 arrays, array buffers, booleans, date objects, error objects, maps, numbers, Object objects, regexes, sets, strings, symbols, 以及 typed arrays. Object 对象值比较自身的属性，不包括继承的和可枚举的属性。 不支持函数和DOM节点比较。

❞

实现思路讲解

• 组件初始化时候，深拷贝一份表单数据存入组件中
• 当用户经过a标签离开页面时，触发handlePrompt方法，存储离开的目的url,此时使用isEqual比较当前的数据和组件初始化的表单数据是否一致，若是不一致则出现弹窗,让用户选择是否离开
• 代码实现:

`// 处理自定义离开弹窗
  handlePrompt =(location )=>{
    // 若是当前的保存为false，则弹窗提醒用户进行保存操做
    if (!this.isSave) {
      this.showModalSave(location);
      return false;
    }
    return true;
  }
  // 展现离开的提示的弹窗
  showModalSave = location => {
    this.setState({
      modalVisible: true,
      location,
    });
  }
  // 点击确认，进行页面保存操做，和保存成功后路由的跳转
  handleSaveAuto = () => {
    const { location } = this.state;
    const { history } = this.props;
    this.isSave = true;
    this.setState({
      modalVisible: false,
    });
    //进行保存操做的处理，这里能够换成本身点击确认后须要作的操做
    this.handleSavePaper('save','exit',location.pathname)
  }`

• 离开逻辑

`// 取消是的路由跳转
  gotoNewUrl(url){
    const {dispatch,history } = this.props
    dispatch(routerRedux.push({
      pathname:url,
    }));
  }
  // 点击取消关闭弹窗
  closeModalSave=()=>{
    const { location } = this.state;
    const {dispatch,history } = this.props
    this.isSave = true;
    this.setState({
      modalVisible: false,
    },()=>{
      this.gotoNewUrl(location.pathname)
    });
  }`

• html结构

`<Prompt message={this.handlePrompt}/>
 <Modal 
     title="舒适提示"
     visible={this.state.modalVisible}
     closable={false}
     centered
     onCancel={this.closeModalSave}
     footer={null}
 >
   <p>即将离开当前页面，是否保存当前修改？</p>
   <div style={{textAlign:'right'}}>
     <Button type='primary' onClick={this.handleSaveAuto}>保存</Button>
     <Button style={{marginLeft:'20px'}} onClick={this.closeModalSave}>取消</Button>
   </div>
 </Modal>`

结束语

• 遇到问题时候，应该先搜索引擎一波，准确的来讲，你的月薪在50K如下，都应该多考虑使用别人的轮子/改造别人的轮子，前端发展到如今已经技术基本稳定（实现业务逻辑层面）,前人也留下了不少宝贵经验,遇到问题，必定要先百度或者谷歌
• 感受对你有帮助，能够右下角点个在看，关注一波公众号:[前端巅峰]
• 另外欢迎收藏个人资料网站:前端生活社区:https://qianduan.life