Question

I am trying to make a JSONP call to a server on the beforeunload event. This all works great until I start playing with the back button. If I navagate away from the page and then press back next time the beforeunload event gets called it appears to make the JSONP request but the server never receives it.

Note(1): This has been tested on IE and FF (problem appears on both).

Note(2): I have also tested using jQuery.getJSON method and it had the same problem so I assume the makeJSONPCall funciton is correct. (I could be wrong)

Any ideas anyone?

Some code for context:

JSONP CALL:

makeJSONPCall( http://serverurl.mvc/method?args=  + data,  callbackfunction );      

function makeJSONPCall(url, callbackname)
{                
  if (url.indexOf("?") > -1) url += "&jsonp=" 
  else url += "?jsonp=" 
  url += callbackname + "&";
  url += new Date().getTime();
  var script = document.createElement("script");            
  script.setAttribute("id", "JSONP");
  script.setAttribute("src",url);
  script.setAttribute("type","text/javascript");                
  if (document.head) document.head.appendChild(script);
  else document.body.appendChild(script);    
}

Thanks

Answer 1

That event is kind of quirky. You might ultimately decide not to use it. First thing, make sure you are making a synchronous post. Next, you will probably need to present a UI to the user in order to keep the browser from changing location too quickly. I used something like the below once and it worked but I ended up doing things a different way.

    window.onbeforeunload = function() {
               // stuff do do before the window is unloaded here.
               if(IsDirty()) {
            //i only want to call ajax if I need to.
                setTimeout(function(){
                    DoAjaxSaveSynchronously (); // this was important
                    ClearDirty();
                        }, 500);
//this return value causes the browser to pop a modal window.
                return "You have unsaved work. Please stay on this page to save your work.";
               }
            }

Answer 2

I am working on a similiar problem - I have to send data in response to the user leaving a site and my code is there as an external resource inside somebody s page. I can t popup anything and I have to make the call. And I have to use JSONP which can t be synchronous.

What I was able to figure out is:

onbeforeunload handler is blocking the browser from destroying the current page
if you don t return anything, the popup does not appear.

So your code will be working as long as the event handler runs.

Pseudocode:

window.onbeforeunload = function() {
  startAsynchronousSending();
  //do lots of slow and synchronous stuff to delay destroying the window//
  //return statement deliberately missing
}

At the moment it already works for me, but the delay part is just a CPU intensive loop. It does make a difference (there s enough time for the request to be sent) but I am looking for a better delay.

See also: http://forums.thedailywtf.com/forums/t/24374.aspx

I would appreciate comments with ideas on what to put in the loop. I am taking some options into account:

wasting CPU on come math on large numbers
accessing localstorage (synchronous call, IO operation)
accessing DOM
synchronous ajax call (but I don t want to include code for ajax in a script that doesn t use it)

Any ideas?

友情链接