如何在基于Ajax的应用程序中使用后退按钮触发onb​​eforeunload? [英] How to trigger onbeforeunload with back button in an ajax based application?

问题描述

我有一个基于Ajax的应用程序(即获取新数据时没有页面重新加载").

I have an ajax based application (ie no page 'reloads` when getting new data).

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

Initially I wanted to find a way to prevent navigation when unsaved data was present on a form.

我遇到了window.onbeforeunload.

当单击a链接(通过ajax加载内容，并且pop/push状态更改URL)时，此操作无效.

That didn't work when clicking a links (where content is loaded via ajax and pop/push state changes the url).

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

I added some handling of the a links but need to use the default window.onbeforeunload to cover the standard means of leaving a page (ie manually entering a new URL or using the back/forwards buttons).

以下代码适用于:

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

• a links
• page refresh
• manually entering a new url

，但是使用后退按钮(在Chrome和Firefox中)时不会触发window.onbeforeunload.

But is not triggering window.onbeforeunload when using the back button (in Chrome and Firefox).

下面的实现是否有问题?或者使用后退按钮时window.onbeforeunload是否不应该被触发?

Is there something awry with the implementation below or is window.onbeforeunload not meant to be triggered when using the back button?

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性质:

After reading this post, I think it is based on the ajax nature of the app:

只要您停留在应用内(因为它是单页应用)， 根据定义，它不会卸载，因此没有beforeunload事件.

As long as you stay within your app, because it's a single-page app, it doesn't by definition unload, so there's no beforeunload event.

因此，我想我可能需要查看其他方法来在后退/前进按钮上触发事件.

So I think I may need to look at other ways to trigger the event on back/forwards buttons.

推荐答案

我查看了在popstate上触发window.unload的方法，但是没有运气.

I looked in to triggering window.unload on popstate but didn't have any luck with that.

我最终更改了逻辑，以便在进行更改后立即将其保存在数据库中.

I ended up changing the logic so that as soon as changes were made, they were saved in the database.

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

I was using selectize.js for the form input handling and just added some extra calls to it.

在selectize.js中(此处):

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(此处) :

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项的提示保持不变:

And in my own script, the prompt for deleting selectize.js items stayed the same:

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的应用程序中使用后退按钮触发onb​​eforeunload?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！