当用户离开页面时,我需要提示用户保存他们的工作。我已经尝试使用onbeforeunload,但我需要显示一个样式美观的提示而非通常的对话框。Facebook已经实现了这一点(如果您有Facebook帐户,请编辑您的个人资料信息并转到另一个页面,未保存退出时会弹出一个样式美观的提示)。我还尝试了jquery unload,但似乎没有办法阻止卸载事件传播。
当用户离开页面时,我需要提示用户保存他们的工作。我已经尝试使用onbeforeunload,但我需要显示一个样式美观的提示而非通常的对话框。Facebook已经实现了这一点(如果您有Facebook帐户,请编辑您的个人资料信息并转到另一个页面,未保存退出时会弹出一个样式美观的提示)。我还尝试了jquery unload,但似乎没有办法阻止卸载事件传播。
仔细观察一下Facebook的做法:当在页面上点击一个链接时,会弹出提示,但在地址栏输入新的URL、点击书签或浏览器历史记录中返回时则没有任何提示。
如果这对你有用,那么很容易实现:只需为页面上的每个链接添加一个click
事件处理程序,并从中触发你的样式化确认框。由于这些处理程序将在页面内部触发的任何导航事件之前被调用,所以你几乎可以在处理程序中执行任何想做的事情——保存数据、取消事件,记录目标并推迟到确认后再进行导航...
然而,如果你需要或想要响应外部触发的导航事件,你就必须使用onbeforeunload
。是的,对话框看起来很烂,而且你无法取消事件——这是因为上世纪90年代所有滥用此类功能的可耻白痴们带来的代价。抱歉...
选定的答案很好,但我仍然不得不深入挖掘细节。 如果您想使用onbeforeunload事件,这里是一些示例代码:
<script>
window.onbeforeunload= function() { return "Custom message here"; };
</script>
$('.measurement_value').change(function() {
$(window).bind('beforeunload', function(){
return 'You have unsaved changes, are you sure you want to leave?';
});
$('#MeasurementAdminEditForm').submit(function(){
$(window).unbind('beforeunload');
});
$('#CancelButton').click(function(){
$(window).unbind('beforeunload');
});
});