0

I've read other posts, saying that developers has little to no control over the browser messages when they're about to leave a page, or refresh, I get that. My question is: Is there a way I can listen to what the user chooses when the alert pops up?

My use case is the following: I'm playing a video, if the user wants to leave the page, I want to:

  1. Pause the video
  2. Wait for the user to select whether they wanna leave or stay in the page
  3. If they wanna stay, I want to play the video
  4. If they decided to leave, I want to send some info to my API

Can anyone help?

For the record, this is what I have, and it certainly pops a message warning the user, but I can't react accordingly tyo user's selection (Leave or Stay)

window.addEventListener("beforeunload", function (e) {

try {
    if (currentAction !== 'new' && currentAction !== 'pause' && currentAction !== 'ended') {

        _dotnetMainLayoutObjRef.invokeMethodAsync('CloseVideoWhenExitSite')

        var confirmationMessage = "\o/";

        (e || window.event).returnValue = confirmationMessage;

        return confirmationMessage;
    }

} catch (e) {

    errorTrack(e.message, "video_actions.js", "beforeunload event in video");
}

});

Oscar Cabrera Rodríguez
  • 211
  • 2
  • 14
  • https://stackoverflow.com/a/31914247/1169519 . To send something to your server when a user really leaves the page, you can do it with a synchronous XHR call or rather using [navigator.sendBeacon](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) in an `onunload` event handler. – Teemu Dec 15 '20 at 15:54
  • Interesting, will try that @Teemu – Oscar Cabrera Rodríguez Dec 15 '20 at 15:57
  • Last i checked, synchronous XHR was deprecated (and may well be blocked now). you used to be able to do this, but more modern applications use beacon technology. a poor mans (meaning the basic, simple solution you can DIY) implementation of this would be to setup a web socket server, and every time some info changes, you would send it to your server, always saving only the last message. once the client has disconnected and doesn't reconnect after some time (say 10 seconds), you know they have left your site and can save that chunk of data. – r3wt Dec 15 '20 at 16:01
  • @r3wt Only a sync XHR call on the main thread is deprecated, you can still make it in an event handler. Just make a property check, if there's no `sendBeacon` in `navigator`, then make an async call. No bacon, no deprecated XHR call either. – Teemu Dec 15 '20 at 16:02
  • @Teemu one point regards to your mention of `navigator.sendBeacon`, that page says in the opening sentence that it shouldn't be used in `beforeunload`. – r3wt Dec 15 '20 at 16:04
  • @r I didn't suggested to use it in `beforeunload`, I suggested it to be used in `onunload`. Hmm ... That seems to be on the list too, I'd recall there was even an example of how to use `sendBeacon` with `onunload` earlier ... – Teemu Dec 15 '20 at 16:05
  • @Teemu the docs say to use it in `visibilitychange` event, and let the browser take care of it. beforeunload and unload are both the wrong events. i think we should unlock this question and you should add the answer using these new api's. – r3wt Dec 15 '20 at 16:08
  • @r3wt Actually, I'm using it in `unload` event, works fine, though the amount of the send data is minimal, only a couple of bytes. – Teemu Dec 15 '20 at 16:10
  • 1
    iOS hits once again, "_the unload/beforeunload events are not fired_". Dang, it's a new IE ... @mplungjan What do you think about r3wt's suggestion? Actually it's only a partial dup, in that my answer there's nothing about how to send data to the server when a user really leaves the page. – Teemu Dec 15 '20 at 16:19
  • [More difficulties](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event): "_Safari doesn’t fire visibilitychange as expected when the value of the visibilityState property transitions to hidden; so for that case, you need to also include code to listen for the pagehide event._" The correct event seems to be [pagehide](https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event). – Teemu Dec 15 '20 at 16:44
  • 1
    @Teemu [Enough examples](https://www.google.com/search?q=beacon+beforeunload+site:stackoverflow.com) – mplungjan Dec 15 '20 at 21:53

0 Answers0