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

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

成都创新互联公司主要从事网站设计制作、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务肃州,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

•  如果用户填写了很多数据此时
•  不小心点了其他a标签或者关闭了浏览器，不做判断，那么用户数据直接丢了

梳理需求

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

正式开始

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

实践一下

•  在微信公众号编辑器界面，输入一部分内容后，点击关闭tab页，此时出现弹窗   

• 删除所有内容后，回归初始进入的数据，点击关闭tab页，直接就关闭了，没有出现提示   

• 看插件显示，这个编辑器界面没有使用react和vue,应该是jq吧，测试下控制台，对的，一猜就中（小编太了，不点个关注？）

回到项目中，加入beforeunload事件

•  HTML文件中加入script标签 

 
 
 
 

  
  
  
  
  
  
  
  
  
       window.onbeforeunload = function () {  
  
  
  
  
           return "Leave this page?";  
  
  
  
  
       }  
  
  
  
  
    
 
 
 
 

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

•  那么问题来了，如果我通过a标签跳转呢？

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

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

 
 
 
 

  
  
  
  
import { Prompt } from 'dva/router';  
  
  
  
  
....  
  
  
  
  
render(){  
  
  
  
  
  return   
  
  
  
  
} 
 
 
 
 

•  引入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结构 

 
 
 
 

  
  
  
  
  
  
  
  
  

  
  
  
  
    title="温馨提示"  
  
  
  
  
    visible={this.state.modalVisible}  
  
  
  
  
    closable={false}  
  
  
  
  
    centered  
  
  
  
  
    onCancel={this.closeModalSave}  
  
  
  
  
    footer={null}  
  
  
  
  
>  
  
  
  
  
  
即将离开当前页面，是否保存当前修改？
 
  
  
  
  
    
  
  
  
  
    保存  
  
  
  
  
    取消