在注销时自动保存“卸载”事件和ajax调用:操作顺序导致问题

我在在线编辑器上使用AutoSavefunction。

当用户离开页面(使用unloadbeforeunload事件检测到)时,我发送一个AJAX请求(async = false)来保存数据。

我有时在Chrome浏览器中遇到问题,因为有一系列事件正在发生:

  • 事件被解雇
  • 请求发送
  • 页面更改,用户断开连接
  • 请求分析服务器=>问题!
  • 请求浏览器收到的响应

当然,由于用户已断开连接,因此无法处理“保存”请求。

有没有一种与所有浏览器兼容的方法,在页面实际更改之前等待AJAX​​调用的响应?

ori的回答是正确和完整的。

但从你的情况来看,你可以使用一种解决方法。

您可能感兴趣的有两个JavaScriptfunction:localStorage和sessionStorage(除了第二个在浏览器关闭时清除,所以你可能会选择第一个)

我们的想法是将数据保存到localStorage,其中包含一些元数据,说明是否保存了更改。 如果用户离开页面但转到服务中的另一个页面,甚至稍后返回 – 您可以再次发送数据,其中包含由于页面卸载而未保存的一些信息。

概念certificate代码:

 $(window).bind('unload', function() { localStorage.setItem('unsavedData',data); localStorage.setItem('unsaved',true); }); $(document).ready(function(){ if(localStorage.getItem('unsaved')){ //ajax send localStorage.setItem('unsaved',false); } }); 

[编辑]

我已成功使用JSONP unload它似乎大部分时间都可以工作,但我没有在负载和慢速网络上测试它。

不可以。您只能向用户显示确认对话框:

 $(window).bind('beforeunload', function() { // AJAX return 'STRING'; }); 

STRING将显示在对话框中,然后您可能有时间让响应在用户做出反应之前返回。

但这是阻止页面卸载的唯一方法,因此不会收到ajax响应。

如果您的页面顶部有一个固定的透明div,还有一个hover事件来触发保存? 只是从创造性的角度思考…保留你现在的保存,但作为一个故障保护,我在想如果普通用户要离开,首先他们会将鼠标移动到地址栏,后退按钮或关闭按钮。 如果您捕获DOM窗口的顶部,可能会获得一些更成功的最后一分钟保存?

此外,您可以在setTimeout()上推送更改,但听起来您正在寻找比我的两个解决方案更有限的东西。

将async变为false将更容易。

否则,您可以使用async:true调用服务器,当它成功返回或出错时,您可以为注销/重定向/错误消息引发自定义事件。

可以使用hover透明div来保持用户等待服务器响应。

我正在使用onbeforeunload来获得类似的东西,但是我的数据有效负载非常小(一个guid),而且我不需要任何返回值,所以它是火和忘记。 它可以在95%的时间内工作,但不同的浏览器以不同的方式实现onbeforeunload,onunload等。

您可以使用未保存的数据弹出另一个窗口,然后在您的请求被触发后关闭该窗口,但此处的关键元素是“pop” – 可能会被阻止。 可以使用上面的本地存储答案。

当然,第一个解决方案 – 询问用户,然后让他们保存可能是最好的。 也许他们正在关闭以防止保存自上次保存以来的任何变化?