1

I'm trying to run some JS code when a user closes my page. I found this on the internet:

window.addEventListener('beforeunload', (event) => {
      event.returnValue = null
      console.log("unload")
    });

When I try to close my page with this code in my document, Chrome gives me a dialog and asks "Leave site? Changes that you made may not be saved", with the options "Leave" and "Cancel". It also runs the console.log, so it seems to work fine right? However, the console.log runs at the same time that the prompt appears. So I don't know that the user actually closed the site, because they could have clicked cancel for all I know. And I only want to run my code if I know for a fact that the user actually closed the page.

I would really prefer to avoid using WebSockets, or doing some sort of continuous polling to check if the user is still on the page, if possible. However, if there is really no other way to do it, I might resort to one of these methods, but I am really hoping there is another way to do it.

Any ideas?

EDIT: I don't actually care about what triggers the beforeunload event. Like, the user might click the close button in their browser, they might refresh the page, they might click a link, or they might type another url into their browser. I don't care. I just don't want to run my code if they click cancel on the prompt that appears, because then they aren't actually going to unload the page after all. Also, I'm not doing anything intrusive, just some database stuff behind the scenes, so it's fine if the code somehow runs after the page has been closed (I think I remember some stuff about sendBeacon or something being able to do it, but I'm not sure), or it's also fine if no prompt appears at all, and it just runs my code and then closes the page.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Christoffer Corfield Aakre
  • 627
  • 1
  • 8
  • 20
  • 1
    There is no way from window api's to distinguish if tab is being closed or what is triggering the unload. What is your specific use case? – charlietfl May 11 '20 at 05:39
  • Ah, maybe i should have been more clear. I don't care what triggers it, e.g. i don't care if the user actually clicked the little close button, or if they clicked another link, or they refreshed, etc. I want to run my code in all those cases, as long as my document will unload. However, I don't want to run the code if they click cancel on the prompt that appears, because then they obviously have not actually unloaded the page. Do you see what I mean? – Christoffer Corfield Aakre May 11 '20 at 05:40
  • Did you try unload even ? Not sure but cancelling the prompt would not fire unload event. https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event – kay May 11 '20 at 05:42
  • 1
    Are you trying to send data to a server? If so the newer `navigator.sendBeacon()` used in unload event might be of interest – charlietfl May 11 '20 at 05:42
  • @charlietfl I think ``sendBeacon`` might just be what I'm looking for. I am indeed looking to send data to a server. I will look into it. Thanks. – Christoffer Corfield Aakre May 11 '20 at 05:44
  • 1
    OK...check browser compatibility but when compatible it is far more reliable than ajax requests in unload – charlietfl May 11 '20 at 05:45
  • @charlietfl I think ``sendBeacon`` and ajax would work, but I found an easier way. I accepted another answer. – Christoffer Corfield Aakre May 11 '20 at 05:49
  • 1
    Missing the point...using ajax in unload is not reliable at all – charlietfl May 11 '20 at 05:50
  • oh, sorry I misread your comment. Yes, I see what you mean now. Yeah, I'll look into ``sendBeacon`` after all. Thanks for being persistent. This app i'm working on right now is just a fun game i will only play with friends, so I am not too concerned, I am just looknig to get it working asap, but I will look into ``sendBeacon`` later. Thanks – Christoffer Corfield Aakre May 11 '20 at 05:51

2 Answers2

2

There is no straight way to detect if the browser is closed, however you can check if the tab is closed. You can use onunload & onbeforeunload these events.

For more info: Detect browser or tab closing .net core cookies authentication on browser close

In your case you can use $(window).off('beforeunload');

For more info: http://forums.mozillazine.org/viewtopic.php?f=38&t=2083577

Ganesh Thorat
  • 492
  • 1
  • 7
  • 19
1

As the name suggests, this event happens before the page is unloaded, and allows the user to cancel the unload.

Use an unload event listener to detect when the page is actually being unloaded. If you have both event listeners, this will only run if the user selected Leave.

Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Thanks! This worked for me. I used one event listener for ``beforeunload``, and one for ``unload``, and put the code I want to run on page close in the ``beforeunload`` listener. Now there is no prompt at all, which is fine for my purposes. – Christoffer Corfield Aakre May 11 '20 at 05:48