Question

我正在尝试在卸载页面之前对服务器发帖，然后我跟着this并且它工作正常。我的问题是window.unt上的$ .post在>卸载后被强制触发。我尝试使用注销链接并检查我的日志，我得到以下内容：

Started GET "/signout" for 127.0.0.1 at 2012-11-22 00:15:08 +0800 Processing by SessionsController#destroy as HTML Redirected to http://localhost:3000/ Completed 302 Found in 1ms Started GET "/" for 127.0.0.1 at 2012-11-22 00:15:08 +0800 Processing by HomeController#index as HTML Rendered home/index.html.erb within layouts/application (0.4ms) Rendered layouts/_messages.html.erb (0.1ms) Completed 200 OK in 13ms (Views: 12.9ms) Started POST "/unloading" for 127.0.0.1 at 2012-11-22 00:15:08 +0800 Processing by HomeController#unloading as */* Parameters: {"p1"=>"1"} WARNING: Can't verify CSRF token authenticity Completed 500 Internal Server Error in 0ms NoMethodError (undefined method `id' for nil:NilClass): app/controllers/home_controller.rb:43:in `unloading'

第一部分是注销，然后用户被重定向到root 然后它运行帖子（'/ unloading'）。

有没有办法让'/ unloading'先执行然后执行卸载操作？

我将此作为我的jquery帖子

$(window).unload -> $.ajax { async: false, beforeSend: (xhr) -> xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content')) , url: '/unloading' , type: 'Post' , data: { p1: '1' } }

更新

所以我确实将ajax请求转移到beforeunload并且它正在工作但我必须执行return null删除出现的对话框，因为如果我不这样做，ajax仍然会在弹出对话框时触发（即使没有回答“是/否我想离开这个页面”）。结果如下：

window.onbeforeunload -> $.ajax { async: false, beforeSend: (xhr) -> xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content')) , url: '/unloading' , type: 'Post' , data: { p1: '1' } } return null

另外，我现在只在Chrome上试过它，它按预期工作。然而，尝试其他浏览器。

Answer 1

尝试beforeUnload事件

unload事件的确切处理因版本而异浏览器版本。例如，某些版本的Firefox触发了跟踪链接时的事件，但窗口关闭时不响应。在在实际使用中，应该在所有支持的浏览器上测试行为，与专有的前载事件形成鲜明对比。

https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload

<强>更新

卸载页面时会触发卸载事件。

https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#XMLHttpRequests_being_stopped

更新2

要停用Are you sure that you want to leave this page?弹出窗口，请尝试从null回调函数返回beforeUnload

How to show the "Are you sure you want to navigate away from this page?" when changes committed?

更新3

选中此选项以获得跨浏览器兼容性

http://jonathonhill.net/2011-03-04/catching-the-javascript-beforeunload-event-the-cross-browser-way/

Answer 2

正如@NickKnudson建议的那样，使用“beforeUnload”事件在卸载窗口之前回发表单数据：

window.onbeforeunload = function() {
  $.ajax {
    async: false,
    beforeSend: (xhr) ->
      xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))
    , url: '/unloading'
    , type: 'Post'
    , data: {
      p1: '1'
    }
  }
}

大约两周前完全相同的情况，切换到beforeUnload解决了问题。

Answer 3

问题是窗口的unload事件不会等待关闭窗口之前完成的AJAX调用（这是异步的）。此外，jQuery似乎没有beforeunload事件的内置处理 - 这就是为什么你需要恢复到本机JS代码来处理这个问题。见下文：

（注意：用 CoffeeScript 撰写）

window.onbeforeunload = function() {
    $.ajax {
        async: false, // Important - this makes this a blocking call
        beforeSend: (xhr) ->
            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))
      , url: '/unloading'
      , type: 'Post'
      , data: {
            p1: '1'
        }
    }
};

onbeforeunload - 卸载页面时在卸载事件之前触发的事件。

另请参阅Google Forum关于此主题的讨论。

Window.unload在卸载后触发

3 个答案: