Javascript 在基于ajax的应用程序中，如何使用back按钮触发onbeforeunload？

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

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

我在卸载之前遇到了window.on

当单击

a

链接（内容通过ajax加载，弹出/推送状态更改url）时，这不起作用

我添加了一些对

a

链接的处理，但需要使用默认的

窗口。onbeforeuload

覆盖离开页面的标准方式（即手动输入新URL或使用后退/前进按钮）

以下代码适用于：

• a

  链接
• 页面刷新
• 手动输入新url

但在使用后退按钮（在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;
});

编辑：

阅读后，我认为这是基于应用程序的ajax特性：

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

---

因此，我想我可能需要在后退/前进按钮上寻找其他触发事件的方法

我查看了触发

窗口。在
popstate
上卸载
，但没有任何运气

我最终改变了逻辑，这样一旦做出了改变，它们就会保存在数据库中

我使用的是表单输入处理，只是添加了一些额外的调用

在
中选择.js
（）：

成为：

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

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

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

和（）：

成为：

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

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] + '"?');

您是在寻找禁用的“后退”按钮，还是希望在用户按下“后退”按钮时出现在同一页面上？设置间隔检测location.href更改的函数？window.onpopstate？是的，tho。