How to make a cross-browser on-window-unload request?

Question

I have a Flash game that I'm trying to save the state of when the user closes the browser tab. It is using the following jquery code:

//Called from Flash when window closes
function sendRequest(url, params) {
    $.ajax({
      type: "POST",
      async: false,
      url: url,
      data: params
    })
}

$(window).unload(function() {
  //Make Flash attempt to save the game when the window closes.
  //Flash gets the necessary data and calls sendRequest()
  document["flashGame"].saveBeforeUnload();
});

Firefox: Works correctly
Chrome: Works correctly when reloading but not when closing tabs or closing the browser
IE (all versions): Does not work at all

I want it to work in all browsers correctly, but most important is Chrome (not many of our users have IE).

Flash is correctly calling sendRequest (in all browsers, tested with an alert), so I don't believe the problems come from Flash, but it might.

I don't think you can nor do i think you should rely on .unload, if the user wants to close the browser they want to close the browser. Should your request take longer than a few ms to do the save should the browser wait? Why not save the game on say a 30 second timer so that the longest they'll be out is 30 seconds then you don't have to worry about the unload event — dstarh, Jul 03 '12 at 19:15
@dstarh: We already save the game on a timer. The purpose of this is to prevent players from losing those last few seconds of actions. Often, those last few actions are important. — Fragsworth, Jul 03 '12 at 19:32
so you're saying that a person clicking the X to close their browser window should expect that everything they've done in the last few seconds should be saved? I think training the user to click a save button and then close the browser is time better spent. We need to get users out of the mentality of "I pulled the power cord from the wall, why didn't everything save????!!!???" — dstarh, Jul 05 '12 at 14:20

score 6 · Accepted Answer · answered Sep 13 '12 at 08:47

The short answer is that you can't.

The onbeforeunload event was initially introduced by Microsoft to allow a standard confirmation dialog. It is now supported in the original form by most browsers and in most case a short, non interactive, function is allowed to execute (for example you may log your state in the localStorage). But, as described in the cross-browser jQuery API, this is unreliable :

The exact handling of the unload event has varied from version to version of browsers. For example, some versions of Firefox trigger the event when a link is followed, but not when the window is closed. In practical usage, behavior should be tested on all supported browsers, and contrasted with the proprietary beforeunload event.

As there are many potential security problems related to the execution of a task when the user asked to end the page (and thus the script), this will probably be unreliable until (and if) a serious normalization effort is done to precise what exactly can be done in a onbeforeunload callback.

For the predictable future, it's recommended to not depend on onbeforeunload but to use other schemes, for example constant background saving or a big "save" button.

score 1 · Answer 2 · answered Jul 03 '12 at 19:20

1

Try window.onbeforeunload. I found this in the jQueryBug Tracker as a possible solution:

window.onbeforeunload = function() { return "text"; }

answered Jul 03 '12 at 19:20

DaveB

9,308
4
36
60

How to make a cross-browser on-window-unload request?

2 Answers2

Linked