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

window.onbeforeunload = handler

这是可行的,但它会引发一个默认对话框,其中包含一个烦人的标准消息,其中包装了我自己的文本。我需要完全替换标准消息,这样我的文本是清晰的,或者(甚至更好)用jQuery的模态对话框替换整个对话框。

到目前为止,我失败了,我还没有找到其他似乎有答案的人。这可能吗?

Javascript在我的页面:

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

closeIt()函数:

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

使用jQuery和jqModal我已经尝试了这种事情(使用自定义确认对话框):

$(window).beforeunload(function () {
    confirm('new message: ' + this.href + ' !', this.href);
    return false;
});

这也不工作-我似乎不能绑定到beforeunload事件。


您不能修改onbeforeunload的默认对话框,因此最好的办法可能是使用它。

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

以下是微软对此的参考:

当一个字符串被赋值给window的returnValue属性时。事件时,将出现一个对话框,让用户选择是否停留在当前页面并保留分配给它的字符串。对话框中出现的默认语句,“您确定要导航离开此页吗?”... 按“确定”继续,或按“取消”保持在当前页面。”,不能删除或更改。

问题似乎是:

当onbeforeunload被调用时,它将接受处理程序的返回值作为window.event.returnValue。 然后它将返回值解析为字符串(除非它为空)。 由于false被解析为字符串,对话框将触发,然后将传递适当的true/false。

结果是,似乎没有办法将false赋值给onbeforeunload以防止它出现默认对话框。

jQuery的附加说明:

在jQuery中设置事件可能会有问题,因为这会允许其他onbeforeunload事件发生。如果你只希望你的卸载事件发生,我坚持用普通的JavaScript。 jQuery没有onbeforeunload的快捷方式,因此必须使用通用绑定语法。 美元(窗口)。Bind ('beforeunload', function() {});

编辑09/04/2018:自chrome-51以来,onbeforeunload对话框中的自定义消息已弃用(cf:发布说明)


使用专用版本的“绑定”命令“一”。事件处理程序第一次执行后,将自动将其作为事件处理程序删除。

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

对我来说,使用jQuery并在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;

You can detect which button (ok or cancel) pressed by user, because the onunload function called only when the user choise leaveing the page. Althoug in this funcion the possibilities is limited, because the DOM is being collapsed. You can run javascript, but the ajax POST doesn't do anything therefore you can't use this methode for automatic logout. But there is a solution for that. The window.open('logout.php') executed in the onunload funcion, so the user will logged out with a new window opening.

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

此代码在用户离开页面或关闭活动窗口时调用,用户通过'logout.php'退出。 注销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>

参考http://www.codeprojectdownload.com


虽然在某些情况下对该方框无能为力,但您可以拦截点击链接的人。对我来说,这对于大多数情况来说都是值得的,作为备用方案,我留下了unload事件。

我使用的是Boxy而不是标准的jQuery Dialog,它可以在这里获得:http://onehackoranother.com/projects/jquery/boxy/

$(':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.';
    }
};

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

我已经剪掉了代码,所以这可能无法正常工作。


1)使用onbeforeunload,而不是onunload。

2)重要的是避免执行return语句。我这么说不是为了避免从你的联络人那里回来。你可以返回,但你要确保你到达了函数的结尾,并且不执行return语句。在这些条件下,不会出现内置的标准对话框。

3) You can, if you use onbeforeunload, run an ajax call in your unbeforeunload handler to tidy up on the server, but it must be a synchronous one, and you have to wait for and handle the reply in your onbeforeunload handler (still respecting condition (2) above). I do this and it works fine. If you do a synchronous ajax call, everything is held up until the response comes back. If you do an asynchronous one, thinking that you don't care about the reply from the server, the page unload continues and your ajax call is aborted by this process - including a remote script if it's running.


尝试退货;而不是一个信息..对我来说,大多数浏览器都是这样。 (这只会阻止对话框的呈现)

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

这不能在chrome现在做,以避免垃圾邮件,参考javascript onbeforeunload不显示自定义消息了解更多细节。


Angular 9的方法:

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

浏览器支持并删除自定义消息:

Chrome在51分钟内删除了对自定义消息的支持 Opera在38分钟内删除了对自定义消息的支持 Firefox在44.0分钟内删除了对自定义消息的支持 Safari在9.1分钟内删除了对自定义消息的支持


试试这个

$(window).bind('beforeunload', function (event) {
            setTimeout(function () {
                var retVal = confirm("Do you want to continue ?");
                if (retVal == true) {
                    alert("User wants to continue!");
                    return true;
                }
                else {
                    window.stop();
                    return false;
                }
            });
            return;
        });