使用javascript检测页面卸载
我有一个cancel按钮,它执行ajax操作,然后刷新页面内容,当导航离开时,我想触发该按钮,但我不希望它刷新UI中的任何内容 我曾想过使用一个全局变量,放在window对象中,但这似乎不是很好:使用javascript检测页面卸载,javascript,jquery,Javascript,Jquery,我有一个cancel按钮,它执行ajax操作,然后刷新页面内容,当导航离开时,我想触发该按钮,但我不希望它刷新UI中的任何内容 我曾想过使用一个全局变量,放在window对象中,但这似乎不是很好: $(".cancel").bind("click", function(e) { e.preventDefault(); tellTheServerThatUserCanceled(); // ajax call if (!isUnloading) refreshUI(); }
$(".cancel").bind("click", function(e) {
e.preventDefault();
tellTheServerThatUserCanceled(); // ajax call
if (!isUnloading) refreshUI();
});
$(window).bind("unload", function(e) {
isUnloading = true; // this is disgusting, I don't want to do this
$(".cancel").trigger("click");
}
是否有任何官方的方法,或者其他更优雅的方法,或者我不应该担心使用全局变量
编辑:
unload
事件代码不知道它必须做什么,因为页面可以有多个编辑面板和多个取消按钮。它只知道它必须触发每个面板的取消按钮。我发现最好不要在jQuery的匿名函数中运行代码,而是让它们调用可共享的函数。类似的内容说明了总体思路:
function doCancel(e, isUnloading){
e.preventDefault();
tellTheServerThatUserCanceled(); // ajax call
if (!isUnloading) refreshUI();
}
$(".cancel").bind("click", function(e) {
doCancel(e, false);
});
$(window).bind("unload", function(e) {
doCancel(e, true);
}
遗憾的是,卸载事件无法绑定到特定的取消函数。该页面由多个面板组成,在编辑模式下有取消按钮。。。卸载事件必须在编辑模式下取消所有面板,并调用每个面板特定的取消功能。