如何在用户选择对话框上的按钮之前防止页面刷新？

Question

我的网络应用正在监听页面刷新。

我正在尝试这样做：

window.onbeforeunload = dialogBox;

这个想法是显示一个对话框，以防止页面刷新，直到用户选择两个按钮中的任何一个来确定他们是继续刷新还是取消刷新。

不幸的是，页面显示对话框一秒钟，然后继续刷新。无论如何我可以使用“onbeforeunload”来阻止页面继续刷新并显示我的对话框？

使用'onbeforeunload'是不可能实现的吗？

我的对话框的代码：

function dialogBox()
{
    $("#dialog").html("");
    $("#dialog").append("There appears to be some unsaved changes");
    $( function() {
        $( "#dialog" ).dialog({
            modal: true,
            buttons: {
                Cancel: function() {
                    $(this).dialog( "close" );

                },

                "Save": function() {

                },
            },
        })
    });
}

感谢大家的宝贵时间。

编辑：我不想阻止用户刷新。我不想显示使用 onbeforeunload 时出现的通用弹出框，而是想通过调用生成该对话框的函数来显示自定义对话框。我可以在几秒钟内显示它，而不是永久地显示，直到有人做出选择。然后，该选择应继续刷新或通过选择“取消”将其完全刷新一半。

如果有帮助，我将使用 Google Chrome 作为我的首选网络浏览器。

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

页面声明

注意：为了防止不需要的弹出窗口，浏览器可能不会显示在 beforeunload 事件处理程序中创建的提示，除非该页面已与之交互。有关特定浏览器的列表，请参阅浏览器兼容性部分。

自 2011 年 5 月 25 日起，HTML5 规范规定在此事件期间可能会忽略对 window.alert()、window.confirm() 和 window.prompt() 方法的调用。有关详细信息，请参阅HTML5 specification。

从 firefox v4.0 和 Chrome v51.0 开始，浏览器甚至不支持默认提示中的自定义消息，因此考虑自定义设计的提示只是 Window.unbeforeunload 事件的一种无法实现的功能。

直接报价：-

备注

当此事件返回（或将 returnValue 属性设置为）除 null 或 undefined 以外的值时，系统会提示用户确认页面卸载。在某些浏览器中，事件的返回值显示在此对话框中。从 Firefox 4、Chrome 51、Opera 38 和 Safari 9.1 开始，将显示不受网页控制的通用字符串，而不是返回的字符串。例如，Firefox 显示字符串“此页面要求您确认是否要离开 - 您输入的数据可能不会保存。”

语法

window.onbeforeunload = funcRef

funcRef 是对函数或函数表达式的引用。 该函数应为 Event 对象的 returnValue 属性分配一个字符串值并返回相同的字符串。 示例

window.onbeforeunload = function(e) {
  var dialogText = 'Dialog text here';
  e.returnValue = dialogText;
  return dialogText;
};

Answer 2

尝试使用history.go(-1);在调用你的函数之前