页面时提示,如何让用户选择是否离开当前页面?"/>
html 退出页面时提示,如何让用户选择是否离开当前页面?
写在开头
为什么要写这个文章,因为每个礼拜都有人问我这个问题...
抄一个微信公众号的编辑器的类似功能场景来实现
为什么要让用户选择是否离开页面
如果用户填写了很多数据此时
不小心点了其他a标签或者关闭了浏览器,不做判断,那么用户数据直接丢了
梳理需求
离开页面方式,被location.href,a标签,关闭浏览器或者当前tab页等...
需要判断数据是否跟初始化时一致(用户有无填写表单...)
用户选择离开就要继续逻辑,反之则不离开
正式开始
首先要知道一个事件:onbeforeunload,MDN的说明是:当浏览器窗口关闭或者刷新时,会触发beforeunload事件。当前页面不会直接关闭,可以点击确定按钮关闭或刷新,也可以取消关闭或刷新。
⚠️:HTML规范指出在此事件中调用window.alert(),window.confirm()以及window.prompt()方法,可能会失效
实践一下
在微信公众号编辑器界面,输入一部分内容后,点击关闭tab页,此时出现弹窗
删除所有内容后,回归初始进入的数据,点击关闭tab页,直接就关闭了,没有出现提示
更多推荐
html 退出页面时提示,如何让用户选择是否离开当前页面?
发布评论