10

I am developing an HTML5 app specifically for Android and Chrome. The problem I have stems from the requirement to track open browser tabs. I do this by creating a unique ID stored in each tab's sessionStorage. I then track the open tabs by registering each ID in a localStorage array that each tab has access to.

The problem is that I cannot remove the ID from localStorage when closing a tab by using the window.onunload event. The code works fine in desktop Chrome but I cannot get it working in Android.

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

function removeWindowGUID() {
    var guid = sessionStorage.getItem("WindowGUID");
    var tmp = JSON.parse(localStorage.getItem("WindowGUIDs"));
    tmp = tmp.remove(guid);  // remove is a custom prototype fn
    localStorage.setItem("WindowGUIDs", JSON.stringify(tmp));
}

This event will fire when reloading a page, which is fine, just not on closing. I have also tried using the pagehide event.

Kinlan
  • 16,315
  • 5
  • 56
  • 88
sreimer
  • 4,913
  • 2
  • 33
  • 43
  • Does this answer your question? [Mobile browsers don't trigger \`beforeunload\`/\`unload\` when closing browser](https://stackoverflow.com/questions/62934848/mobile-browsers-dont-trigger-beforeunload-unload-when-closing-browser) – Vega Jul 26 '23 at 14:55

2 Answers2

3

Depends on the browser. Some use .onunload, some use onbeforeunload.

Quickest solution is

window.onunload = window.onbeforeunload = function() {
    var guid = sessionStorage.getItem("WindowGUID");
    var tmp = JSON.parse(localStorage.getItem("WindowGUIDs"));
    tmp = tmp.remove(guid);  // remove is a custom prototype fn
    localStorage.setItem("WindowGUIDs", JSON.stringify(tmp));
});

Tested on gingerbread, ICS & jelly bean using native android browser.

Ohgodwhy
  • 49,779
  • 11
  • 80
  • 110
  • 1
    as mentioned, it works only in desktop, not mobile chrome. It's as if onunload and onbeforeunload or onpagehide never fire when I close a tab. – sreimer Jul 09 '13 at 13:25
  • I've got this same problem - any solution or workaround to this? It's only mobile devices that don't trigger the event. – seasick Aug 25 '15 at 21:58
  • For what it's worth, binding both events to the same function worked for me. Tested on Samsung Galaxy Tab 3, running Android 4.4.2 (Chrome browser). – OscuroAA Apr 21 '16 at 00:12
  • @OscuroAA Absolutely. Chrome has better support for it. Mostly this is a fallback solution for browsers that don't support one or the other. Doing it in this way *should* ensure that *desktop* browsers correctly execute the `onunload()` event. – Ohgodwhy Apr 21 '16 at 00:37
  • I'm struggling to see why binding both events to one function would fix the problem that neither gets fired. I'm not receiving either event on Chrome on Android. Also, they do different things - onbeforeunload gives the opportunity to cancel an unload (depending on whether that's supported). You wouldn't want to do the same thing in both functions, or twice. – Rogerborg Dec 12 '16 at 07:58
  • @Ohgodwhy Any solution that work in mobile browser ? – Jalpa Jun 23 '17 at 12:03
0

I did something similar, the errors were exactly the same. I noticed if call window.close() programmatically, the event is called. I just added my own 'close' button on the page.

  • 1
    Take a look again at [answer]. If there are ways to debug the issue, it would be helpful to see that code in your answer – camille Apr 14 '20 at 19:09