时间戳

首页 > 解决方案 > 在“重新加载站点？”上单击“取消” 在 chrome 中刷新页面

javascript - 在“重新加载站点？”上单击“取消” 在 chrome 中刷新页面

问题描述

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

<script>
        var buttonClicked = false;

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

buttonClicked如果用户单击Next并且未显示警告，则为 true。

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

奇怪的是，当 DevTools 打开时，Chrome 并没有刷新页面。

这是我的错误，我错了吗？

标签： javascriptasp.net-mvcgoogle-chrome

解决方案

根据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) 可能取消了对后两个选项的支持，并选择仅支持官方规范。

推荐阅读