我需要在用户离开页面之前警告他们关于未保存的更改(这是一个非常常见的问题)。
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:发布说明)
虽然在某些情况下对该方框无能为力,但您可以拦截点击链接的人。对我来说,这对于大多数情况来说都是值得的,作为备用方案,我留下了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.';
}
};
您可以附加到另一个事件,并根据单击的锚的类型筛选更多内容,但这对我和我想做的事情都有效,并可作为其他人使用或改进的示例。我想把这个分享给那些想要这个解决方案的人。
我已经剪掉了代码,所以这可能无法正常工作。