html 退出页面时提示,如何让用户选择是否离开当前页面？

写在开头

为什么要写这个文章，因为每个礼拜都有人问我这个问题...

抄一个微信公众号的编辑器的类似功能场景来实现

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

如果用户填写了很多数据此时

不小心点了其他a标签或者关闭了浏览器，不做判断，那么用户数据直接丢了

梳理需求

离开页面方式，被location.href,a标签,关闭浏览器或者当前tab页等...

需要判断数据是否跟初始化时一致(用户有无填写表单...)

用户选择离开就要继续逻辑，反之则不离开

正式开始

首先要知道一个事件:onbeforeunload,MDN的说明是：当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。

⚠️：HTML规范指出在此事件中调用window.alert()，window.confirm()以及window.prompt()方法，可能会失效

实践一下

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

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