离开浏览器事件beforeunload不起效果?你使用的方式不对而已

最近有个需求,离开页面前提示用户保存。那么查询到浏览器离开前有个钩子可以调用,在事件中提示用户不就可以吗。但是写在函数中的提示都无法起作用。于是就到万能的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。这个还真不知道有什么影响,有大佬遇到或者知道怎么回事可以私信我。

就上面这些啦,希望大家少踩坑。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值