jQuery .unload() issue in Safari

Question

Im dynamically populating image into a container div, using the $.post() function. Whenever I have a different filtering for the images, I abort the current request, however, I have troubles when navigating to another page on my site. Ive realised, that I should abort the current request there as well, however, it struggles under Safari while not under Chrome.

Initialising the request:

var request = $.post( ... );

When running another one:

request.abort();
request = $.post( ... );

When navigating away, to another page:

$(window).unload(function() { request.abort(); });

Could there be any reason why it does not work or at least, not always under Safari? Thanks!

score 3 · Answer 1 · answered May 09 '13 at 21:09

Unfortunately Safari doesn't support unload event. Instead you should use pagehide.

Here you one example:

<html>
    <head>
    <script>

    function pageShown(evt)
    {
        if (evt.persisted)
            alert("pageshow event handler called.  The page was just restored from the Page Cache.");
        else
            alert("pageshow event handler called for the initial load.  This is the same as the load event.");
    }

    function pageHidden(evt)
    {
        if (evt.persisted)
            alert("pagehide event handler called.  The page was suspended and placed into the Page Cache.");
        else
            alert("pagehide event handler called for page destruction.  This is the same as the unload event.");
    }

    window.addEventListener("pageshow", pageShown, false);
    window.addEventListener("pagehide", pageHidden, false);

    </script>
    <body>
    <a href="http://www.webkit.org/">Click for WebKit</a>
    </body>
    </html>

I suggest you to read this: https://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/

And if it's possibile choose another solution, don't use unload!

well, i made this out of it, since i only want to handle situations occurring on tab closing, window closing or simply navigating away in the browser.. `window.addEventListener("pagehide", function(ev){if(!ev.persisted){alert('abort');request.abort();} }, false);` and it did not work.. even the alert did not show up.. and it did crash the browser couple of times. — ppseprus, May 09 '13 at 21:46
It doesn't work in pwa. Do you have any information about it? — Saeed J, Nov 28 '19 at 08:51

score 2 · Accepted Answer · edited May 23 '17 at 12:00

2

Please take a look at this question:
Why is jQuery unload not working in chrome and safari?

The unload function is not part of any standard, so you actually can't be sure if the unload function gets called in a browser.

Try:

$(window).on('beforeunload ',function() {
    request.abort();
});

instead.

UPDATE

Another solution can be the following. Your users probably navigate to another page with links. So, using jquery, update the onclick behaviour of links: first abort request, then navigate to the new page.

edited May 23 '17 at 12:00

Community

1
1

answered May 09 '13 at 21:08

Tamás Pap

17,777
15
70
102

that does not solve the problem created by closing a tab in the browser or simply closing the window. :( – ppseprus May 09 '13 at 21:45
UPDATE: your original solution works, but now it only works under Safari and not under Chrome.. sorry.. bad troubleshooting – ppseprus May 09 '13 at 21:50
so now the task at hand is to solve the same thing under Chrome – ppseprus May 09 '13 at 21:51
What you tried first (in your question) is working in Chrome? If yes, just detect the browser and use the solution for that browser. – Tamás Pap May 09 '13 at 21:52
I mean, in your question you said: `$(window).unload(function() { request.abort(); });` works in Chrome. Isn't it? – Tamás Pap May 09 '13 at 21:54
Actually.. Ive just realised that i messed something up with the troubleshooting and thats why i switched from `beforeunload` to `.unload()`.... but then I did not realise that Chrome blocks the alert windows and I was not checking the console..... SO! Back to the original `beforeunload` ... that works everywhere. Again: My fault. Sorry. – ppseprus May 09 '13 at 21:55
I catch onClick event of the anchor tag. Use e.preventDefault() with a global variable to avoid loop , do my stuff and then $(this).trigger('click') to use the default behaviour of the anchor but the trigger click does not work. any point on this? – Saeed J Nov 28 '19 at 08:59

score 0 · Answer 3 · answered May 09 '13 at 21:10

0

Try this:

window.onbeforeunload = function(e) {
    return 'Safari.';
};

answered May 09 '13 at 21:10

Bruno Sousa

480
3
12

jQuery .unload() issue in Safari

3 Answers3