Question

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

<script>
        var buttonClicked = false;

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

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

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

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

这是我的错吗？

Answer 1

根据MDN docs：

根据规范，为了显示确认对话框，事件处理程序应在事件上调用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 before leaving the page

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

2 个答案: