Javascript 如何覆盖OnBeforeUnload对话框并将其替换为我自己的对话框？

我需要在用户离开页面之前警告他们未保存的更改（这是一个非常常见的问题）

这是可行的，但它会引发一个默认对话框，其中包含一条恼人的标准消息，包装了我自己的文本。我需要完全替换标准消息，使文本清晰，或者（甚至更好）使用jQuery将整个对话框替换为模式对话框

到目前为止，我失败了，我还没有找到任何其他人似乎有答案。有可能吗

我的页面中的Javascript：

<script type="text/javascript">   
    window.onbeforeunload = closeIt;
</script>

使用jQuery和jqModal，我尝试过这种方法（使用自定义确认对话框）：

---

这也不起作用-我似乎无法绑定到

beforeunload

事件。

您无法修改

onbeforeunload

的默认对话框，因此您最好使用它

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

要从Microsoft获取此信息，请执行以下操作：

将字符串分配给window.event的returnValue属性时，会出现一个对话框，使用户可以选择保留当前页面并保留分配给它的字符串。无法删除或更改对话框中出现的默认语句：“是否确实要导航到此页面？…按“确定”继续，或按“取消”停留在当前页面。”

问题似乎是：

调用

onbeforeunload

时，它将处理程序的返回值作为

window.event.returnValue

然后，它将返回值解析为字符串（除非为null）

由于

false

被解析为字符串，对话框将启动，然后将传递相应的

true

/

false

结果是，似乎没有办法将

false

指定给

onbeforeuload

，以防止它出现在默认对话框中

关于jQuery的补充说明：

• 在jQuery中设置事件可能会有问题，因为这也会导致其他

  onbeforeunload

  事件发生。如果您只希望卸载事件发生，我会坚持使用普通的ol'JavaScript
• jQuery没有

  onbeforeunload

  的快捷方式，因此必须使用通用的

  bind

  语法

  $(window).bind('beforeunload', function() {} );
  

---

编辑2018年4月9日：onbeforeunload对话框中的自定义消息已被弃用，因为chrome-51（cf:）

如何使用专用版本的“绑定”命令“一”。一旦事件处理程序第一次执行，它将作为事件处理程序自动删除

$(window).one("beforeunload", BeforeUnload);

在IE8、Chrome和Firefox中使用和测试，对我有效的是：

$(window).bind("beforeunload",function(event) {
    if(hasChanged) return "You have unsaved changes";
});

---

如果不需要提示，则不要返回任何内容，这一点很重要，因为IE与此处的其他浏览器行为之间存在差异。

我遇到了相同的问题，我可以在邮件中找到自己的对话框，但我遇到的问题是： 1） 它在所有导航上都给出了消息，我只想在单击“关闭”时使用它。 2） 使用我自己的确认消息，如果用户选择“取消”，它仍会显示浏览器的默认对话框

以下是我在母版页上找到的解决方案代码

function closeMe(evt) {
    if (typeof evt == 'undefined') {
        evt = window.event; }
    if (evt && evt.clientX >= (window.event.screenX - 150) &&
        evt.clientY >= -150 && evt.clientY <= 0) {
        return "Do you want to log out of your current session?";
    }
}
window.onbeforeunload = closeMe;

函数关闭时间（evt）{
如果（evt的类型==‘未定义’）{
evt=window.event；}
如果（evt&&evt.clientX>=（window.event.screenX-150）&&
evt.clientY>=-150&&evt.clientY您可以检测哪个按钮（确定或取消）被用户按下，因为onunload函数仅在用户选择离开页面时调用。虽然在该函数中，可能性是有限的，因为DOM正在折叠。您可以运行javascript，但ajax POST不会执行任何操作，因此您不能使用此方法自动注销。但是有一个解决方案在onunload函数中执行window.open（'logout.php'），因此用户将在打开新窗口时注销

function onunload = (){
    window.open('logout.php');
}

当用户离开页面或关闭活动窗口并通过“logout.php”注销时，调用此代码。
当注销php时，新窗口立即关闭，包括以下代码：

window.close();


window.onbeforeunload=函数（evt）{
var message='您确定要离开吗？'；
如果（evt的类型==‘未定义’）{
evt=window.event；
}       
如果（evt）{
evt.returnValue=消息；
}
返回消息；
} 

请参阅
虽然在某些情况下无法对该框执行任何操作，但您可以拦截单击链接的人。对我来说，在大多数情况下，这是值得付出努力的，作为一种回退，我保留了卸载事件

我使用了Boxy而不是标准的jQuery对话框，它在这里可用：

您可以附加到另一个事件，并对单击的锚类型进行更多筛选，但这对我和我想做的事情都有效，并作为其他人使用或改进的示例。我想我会将此分享给那些想要此解决方案的人

我已经删除了代码，所以这可能无法正常工作。
1）使用onbeforeuload，而不是onunload

2） 重要的是避免执行return语句。我的意思不是说，避免从处理程序返回。返回正确，但确保到达函数末尾且不执行return语句。在这些情况下，不会出现内置标准对话框

3） 如果使用onbeforeunload，可以在unbeforeunload处理程序中运行ajax调用来整理服务器，但它必须是同步的，并且必须等待并处理onbeforeunload处理程序中的回复（仍然遵守上述条件（2））。我这样做，效果很好。如果执行同步ajax调用，则所有操作都会暂停，直到响应返回。如果执行异步调用，则认为不关心服务器的响应，页面卸载将继续，ajax调用将中止
function closeMe(evt) {
    if (typeof evt == 'undefined') {
        evt = window.event; }
    if (evt && evt.clientX >= (window.event.screenX - 150) &&
        evt.clientY >= -150 && evt.clientY <= 0) {
        return "Do you want to log out of your current session?";
    }
}
window.onbeforeunload = closeMe;

function onunload = (){
    window.open('logout.php');
}

window.close();

 <script type="text/javascript">
        window.onbeforeunload = function(evt) {
            var message = 'Are you sure you want to leave?';
            if (typeof evt == 'undefined') {
                evt = window.event;
            }       
            if (evt) {
                evt.returnValue = message;
            }
            return message;
        } 
    </script>

$(':input').change(function() {
    if(!is_dirty){
        // When the user changes a field on this page, set our is_dirty flag.
        is_dirty = true;
    }
});

$('a').mousedown(function(e) {
    if(is_dirty) {
        // if the user navigates away from this page via an anchor link, 
        //    popup a new boxy confirmation.
        answer = Boxy.confirm("You have made some changes which you might want to save.");
    }
});

window.onbeforeunload = function() {
if((is_dirty)&&(!answer)){
            // call this if the box wasn't shown.
    return 'You have made some changes which you might want to save.';
    }
};

window.onbeforeunload = function(evt) {            
        //Your Extra Code
        return;
}

constructor() {
    window.addEventListener('beforeunload', (event: BeforeUnloadEvent) => {
     if (this.generatedBarcodeIndex) {
      event.preventDefault(); // for Firefox
      event.returnValue = ''; // for Chrome
      return '';
     }
     return false;
    });
   }