在 chrome 中单击"重新加载网站?"上的"取消"会刷新页面

Question

我有一个简单的代码，当用户离开或刷新页面时显示

<script>
var buttonClicked = false;
window.onbeforeunload = function () {
if (buttonClicked) {
buttonClicked = false;
}
else {
return "WARNING";
}
};
</script>

如果用户单击">下一步"并且不显示警告，则buttonClicked为 true。

单击重新加载时，此警告仍按预期显示，但单击取消仍会刷新页面，丢失表单中输入的所有数据。这只发生在谷歌浏览器77中。我在Firefox和Edge上尝试过，但这没有发生。

奇怪的是，当DevTools打开时，Chrome不会刷新页面。

这是我这边有什么错误，我弄错了什么吗？

Answer 1

根据 MDN 文档：

根据规范，为了显示确认对话框，事件处理程序应调用事件preventDefault()。

但请注意，并非所有浏览器都支持此方法，有些浏览器需要事件处理程序来实现以下两种旧方法之一：

• 将字符串分配给事件的 returnValue 属性
• 从事件处理程序返回字符串。

似乎官方规范希望您称Event#preventDefault.但是，某些较旧的浏览器可能不遵守这一点，并要求事件处理程序返回字符串或设置事件的returnValue属性。

const $preventReload = document.getElementById('prevent_reload');

window.onbeforeunload = (ev) => {
if ($preventReload.checked) {
ev.preventDefault();
ev.returnValue = 'prevented';
return 'prevented';
}
}

<lable for="prevent_reload">Prevent reload</lable> <input id="prevent_reload" type="checkbox" />
<button onclick="location.reload()">Reload page!</button>

因此，最新版本的chrome(chrome 77(可能删除了对后两个选项的支持，并选择仅支持官方规范。

Answer 2

尝试使用这样的东西：

<script>
var buttonClicked = false;
window.onbeforeunload = function () {
if (buttonClicked) {
buttonClicked = false;
}
else {
var answer = confirm("WARNING");
if (answer)
{
//code for when user leaves
alert("bye");
}
else
{
window.location = "http://www.example.com";
}
}
};
</script>

这应该询问用户是否要在退出时离开页面。

来源：离开页面前的JavaScript