window.onbeforeunload 不生效解决方案

1.解决方案

如题，省流，先直接上解决方案：

window.onbeforeunload 方法里面，加一行 return ''; 即可解决

/*禁止刷新、关闭页面快捷键*/
// 如 F5、Ctrl+R、Ctrl+W、Ctrl+F5、Alt+F4等
function forbiddenRefresh(e:BeforeUnloadEvent) {
    e.preventDefault();
    return '';
}

// 挂载
onMounted(()=>{
    window.onbeforeunload = forbiddenRefresh;
})
// 卸载
onBeforeUnmount(()=>{
    window.onbeforeunload = null;
})

2.查找原因

近段时间遇到，想阻止用户因为误触键盘快捷键导致页面刷新、关闭页面的操作；

f5、ctrl+r 可以监听到，但是ctrl+w监听不了，查了下资料，似乎是浏览器的优先级高于js的监听，不向下保留（浏览器任务是‘危险’的操作）；

没有办法，只好用 window.onbeforeunload 来做处理；

但是遇到的情况是，不同浏览器上不一定生效！！！

刚开始是这样写的：

/*禁止刷新、关闭页面快捷键*/
// 如 F5、Ctrl+R、Ctrl+W、Ctrl+F5、Alt+F4等
function forbiddenRefresh(e:BeforeUnloadEvent) {
    e.preventDefault();
}

// 挂载
onMounted(()=>{
    window.onbeforeunload = forbiddenRefresh;
})
// 卸载
onBeforeUnmount(()=>{
    window.onbeforeunload = null;
})

查阅了下资料，MDN上的解释如下 ：developer.mozilla.org/zh-CN/docs/…

emmm~~ 浏览器的体质（版本）可能不太一样

最简单的处理方法是，在函数处理那里，最后 return 个空字符串即可，如开头所见。

完整demo如下

效果：