Javascript 用';在卸载之前';离开页面时,除非';提交';点击
如果用户试图离开包含未保存设置的页面,我希望显示一条警告,但如果用户试图保存这些设置,则显然不会显示警告 我想我的理解是错误的,因为我认为下面的内容应该有效,但事实并非如此。有人能告诉我我做错了什么吗?谢谢Javascript 用';在卸载之前';离开页面时,除非';提交';点击,javascript,onbeforeunload,Javascript,Onbeforeunload,如果用户试图离开包含未保存设置的页面,我希望显示一条警告,但如果用户试图保存这些设置,则显然不会显示警告 我想我的理解是错误的,因为我认为下面的内容应该有效,但事实并非如此。有人能告诉我我做错了什么吗?谢谢 $('input[name="Submit"]').off('onbeforeunload'); window.onbeforeunload = function closeEditorWarning(){ /** Check to see if the settings war
$('input[name="Submit"]').off('onbeforeunload');
window.onbeforeunload = function closeEditorWarning(){
/** Check to see if the settings warning is displayed */
if($('#unsaved-settings').css('display') !== 'none'){
bol_option_changed = true;
}
/** Display a warning if the user is trying to leave the page with unsaved settings */
if(bol_option_changed === true){
return '';
}
};
您可以尝试这样做:在单击提交按钮时设置一个标志,并使用该标志检查用户是否已单击提交或中途离开页面 伪代码:
var submit_clicked = false;
$('input[type="submit"]').click(function(){
submit_clicked = true;
});
window.onbeforeunload = function closeEditorWarning () {
/** Check to see if the settings warning is displayed */
if(($('#unsaved-settings').css('display') !== 'none') &&
submit_clicked === false) {
bol_option_changed = true;
}
/** Display a warning if the user is trying to leave the page with unsaved settings */
if(bol_option_changed === true){
return '';
}
};
您可以使用jquery.on()设置onbeforeunload,然后在表单提交中使用.off()
// Warning
$(window).on('beforeunload', function(){
return "Any changes will be lost";
});
// Form Submit
$(document).on("submit", "form", function(event){
// disable unload warning
$(window).off('beforeunload');
});
我遇到了这个问题,所以我想分享我的解决方案 Brent White的解决方案不适合我,因为我使用了jQuery验证插件。这意味着,如果用户提供了无效的输入,即使在他们单击submit按钮之后,他们仍然会停留在页面上。此时,如果他们离开或刷新页面,则不会显示警报消息
$(window).bind('beforeunload', function(evt) {
var isSubmitButton = (evt.srcElement.activeElement.type === "submit");
var isModified = ($form.data("isModified") === true);
if ( !isSubmitButton && isModified) {
return "You need to save your changes before you leave the page";
}
});
这是你问题的完美答案
document.querySelector('.send').addEventListener("click", function(){ // put a class="send" in submit button
window.btn_clicked = true; // if it is click onbeforeunload will not add dialog anymore
});
window.onbeforeunload = function(){
if(!window.btn_clicked){
var lot = $('#lot_no').val(); //getting values from form
if(!lot == ''){ //checking if it is not empty
return 'Changes you made not be saved!';
}
}
};
好主意,但遗憾的是它不起作用。首先会拾取单击,但仍会显示警告。谢谢。我需要添加
var bol\u option\u changed=false
到onbeforeunload
函数,因此现在一切正常。谢谢,回答得很好。比设置标志更简单。所以我实现了这个解决方案,效果非常好。但是Chrome刚刚发布了一个更新,改变了beforeunload的处理方式。它不再支持自定义消息。此外,如果您返回任何内容,包括“false”,它将显示消息。因此,我真正的解决方案是将这一点与在函数末尾删除“return false”相结合。