Question

我有一个基于ajax的应用程序（即获取新数据时没有页面'重新加载'）。

最初，我想找到一种方法来防止在表单上存在未保存数据时导航。

我遇到了window.onbeforeunload。

单击a链接时（通过ajax加载内容，弹出/推送状态更改网址），这不起作用。

我添加了对a链接的一些处理，但需要使用默认的window.onbeforeunload来涵盖离开页面的标准方法（即手动输入新的URL或使用后退/前进按钮）。

以下代码适用于：

a链接
页面刷新
手动输入新网址

但使用后退按钮（在Chrome和Firefox中）时不会触发window.onbeforeunload。

下面的实现是否存在问题，或者使用后退按钮时是否window.onbeforeunload无意触发？

var save_state = true;

// on entering data into an input field, the save button fades in 
// and the save_state changes
$(document).on('keypress', '.class1 input', function() {
if (save_state) {
$(".save_button").fadeIn();
save_state = false;
};
// bind the click event to 'a' (overiding normal link behaviour)
$( "a" ).bind( "click", function(e) {
if (save_state == false) {
e.preventDefault();
alert("Save before leaving.");
// stop the other 'a' bound handlers from being triggered
e.stopPropagation();
return;
}
});
// also cover standard actions when user tries to leave page
// (back/forward or entering a new url manually etc)
window.onbeforeunload = function() {
return 'Save before leaving.';
};
}); 

// when clicking save, fade out the button and revert the save_state
$(document).on('click', '.save_button button', function(e) {
e.preventDefault();
$(this).parent().fadeOut();
save_state = true;
// 'unbind' onbeforeunload
window.onbeforeunload = null;
});

修改

阅读this post后，我认为它基于应用程序的ajax特性：

只要你留在你的应用程序中，因为它是一个单页应用程序，它根据定义没有卸载，因此没有beforeunload事件。

所以我想我可能需要查看其他方法来触发后退/前进按钮上的事件。

Answer 1

我试着在window.unload上触发popstate，但没有任何运气。

我最终更改了逻辑，以便一旦进行更改，它们就会保存在数据库中。

我使用selectize.js进行表单输入处理，只是添加了一些额外的调用。

在selectize.js（here）中：

if ($target.hasClass('create')) {
    self.createItem();
} else {
    value = $target.attr('data-value');

成为：

if ($target.hasClass('create')) {
    self.createItem();
    $(".saved_message_div").fadeIn(400).delay(2000).fadeOut(400); // new
    updateDatabaseFunction(); //  new
} else {
    value = $target.attr('data-value');
    $(".saved_message_div").fadeIn(400).delay(2000).fadeOut(400); // new
    updateDatabaseFunction(); // new

AND（here）：

while (values.length) {
    self.removeItem(values.pop());
}

self.showInput();

成为：

while (values.length) {
    self.removeItem(values.pop());
}

$(".saved_message_div").fadeIn(400).delay(2000).fadeOut(400); // new
updateDatabaseFunction(); // new
self.showInput();

在我自己的脚本中，删除selectize.js项的提示保持不变：

onDelete: function(values) {
confirm(values.length > 1 ? 'Are you sure you want to remove these ' + values.length + ' items?' : 'Are you sure you want to remove "' + values[0] + '"?');

如何在基于ajax的应用程序中使用后退按钮触发onbeforeunload？

1 个答案:

如何在基于ajax的应用程序中使用后退按钮触发onb​​eforeunload？

1 个答案:

如何在基于ajax的应用程序中使用后退按钮触发onbeforeunload？