专栏首页跨平台全栈俱乐部如何让用户选择是否离开当前页面?

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

写在开头

  • 为什么要写这个文章,因为每个礼拜都有人问我这个问题...
  • 抄一个微信公众号的编辑器的类似功能场景来实现

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

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

梳理需求

  • 离开页面方式,被kk,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.kk= "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以下,都应该多考虑使用别人的轮子/改造别人的轮子,前端发展到现在已经技术基本稳定(实现业务逻辑层面),前人也留下了很多宝贵经验,遇到问题,一定要先百度或者谷歌

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 50行javaScript代码实现简单版的 call , apply ,bind 【中级前端面试基础必备】

    其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,这就是精髓。最关键所在

    Peter谭金杰
  • 如何从JavaScript跨越到TypeScript [基础进阶知识点]

    一致,都会导致报错。 建议使用npm 全局安装typeScript 然后使用 tsc *.ts 进行编译TS文件

    Peter谭金杰
  • 1500行TypeScript代码在React中实现组件keep-alive

    例如后端用到的Kafka , redis , sql事务写入 ,Nginx负载均衡算法,diff算法,GRPC,Pb 协议的序列化和反序列化,锁等等,都可以在前...

    Peter谭金杰
  • 再也不用被this苦恼了

    前端编程对于this再熟悉不过了,今日来个老调重弹温故知新,肯定有很多大佬已经完全吃透了this原理,敬请出门左拐。对于理解this似懂非懂的同学可以借鉴一波

    Jack Chen
  • JQuery笔记(一)

    this与$(this)   在事件处理中,想用this来代表事件的对象,却不能成功。原来,this是html的元素,是javascript的对象,要用jque...

    用户1075292
  • Vue 折腾记 - (8) 写一个挺靠谱的多地区选择组件

    本来想写个props映射下regionName,regionId,child; 但是感觉作用不大,就没写了,(一般公司的地区JSON格式定下来了之后变动的可能性...

    CRPER
  • 微信小程序之SelectorQuery

    在开发小程序展开全文组件时需要用到节点查询API - wx.createSelectorQuery() 来查询全文内容的高度。

    IMWeb前端团队
  • 从零开始学 Web 之 JavaScript 高级(一)原型,贪吃蛇案例

    由来:构造函数的问题。如果一个构造函数中有一个匿名方法,那么每实例化一个对象,然后在对象调用这个方法的时候,由于每个对象的方法都是各自的,所以每次调用这个方法的...

    Daotin
  • PHP示例演示发送邮件给某个邮箱

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对ZaLou.Cn的支持。

    砸漏
  • ECMA-262-3 详解:3、This

    从来没有深入了解ECMA,网上找了一下,发现早在2010年就有大佬 Dmitry Soshnikov 总结了ECMA中的核心内容,我这里只是翻译记录,加深自己的...

    踏浪

扫码关注云+社区

领取腾讯云代金券