最近有个需求,离开页面前提示用户保存。那么查询到浏览器离开前有个钩子可以调用,在事件中提示用户不就可以吗。但是写在函数中的提示都无法起作用。于是就到万能的MDN寻求正确的姿势。
终于Get到了正确的用法:
1.首先用户必须要在此页面有交互,点击或者输入,关闭或刷新才会触发。这也没啥,毕竟什么都不做也无需保存。
2.根据规范,要显示确认对话框,事件处理程序需要在事件上调用preventDefault()。
但是请注意,并非所有浏览器都支持此方法,而有些浏览器需要事件处理程序实现两个遗留方法中的一个作为代替:
(1)将字符串分配给事件的returnValue属性
(2)从事件处理程序返回一个字符串。
某些浏览器过去在确认对话框中显示返回的字符串,从而使事件处理程序能够向用户显示自定义消息。但是,此方法已被弃用,并且在大多数浏览器中不再支持。
也就是:
window.onbeforeunload=function(e){
console.log(e);e.preventDefault();
e.returnValue ="";
}
它的弹出窗内容是固定的,无法更改,给returnValue赋值也没啥效果。
3.HTML规范指出在此事件中调用window.alert(),window.confirm()以及window.prompt()方法,可能会失效。但是如果是使用组件的弹出框会在你点击取消刷新或关闭后执行。
4.将事件处理程序/监听器加到window或 document的beforeunload事件后,将阻止浏览器使用内存中的页面导航缓存,例如Firefox的Back-Forward缓存或WebKit的Page Cache。这个还真不知道有什么影响,有大佬遇到或者知道怎么回事可以私信我。
就上面这些啦,希望大家少踩坑。