Detect the closing of a window, when the user returns to the web

-1

On my website, users can press a button to make an action (from a window that opens). What I want to know is how to execute a function when the user closes it, or when it returns to the web.

The two forms serve me. This is only to check the time that has been in that window, since the user clicks the button (and the window opens) until the window is closed or return to the page.

  • The window opens YouTube, not a web of mine.
  • I do not open a tab, but a small window with window.open()
  • Better if it's with JavaScript and without jQuery (If there's no other option, nothing happens)
asked by ByBrayanYT - Tops y más 17.10.2018 в 17:04
source

2 answers

1

You can do it by saving a reference of the window you have opened and with a setInterval to see if it has been closed or not. Here is a function that you can use.

function openYoutube() {
    var ventana = window.open("https://youtube.com");
    var tiempo= 0;
    var interval = setInterval(function(){
         //Comprobamos que la ventana no este cerrada
        if(ventana.closed !== false) {
          //Si la ventana ha sido cerrada, limpiamos el contador
          window.clearInterval(interval)

         alert('Tiempo total: ${tiempo} s ')

        } else {
          //Mientras no se cierra la ventana sumamos los segundos
          tiempo +=1;
        }


    },1000)


}

You can see how it works here

    
answered by 17.10.2018 / 17:24
source
0

the same origin policy prevents Javascript from detecting such events. But there is a rather simple solution that allows you to detect the closing of such windows:

var openDialog = function(uri, name, options, closeCallback) {
    var win = window.open(uri, name, options);
    var interval = window.setInterval(function() {
        try {
            if (win == null || win.closed) {
                window.clearInterval(interval);
                closeCallback(win);
            }
        }
        catch (e) {
        }
    }, 1000);
    return win;
};

What it does: create a new window with the parameters provided and then set the function of the verifier with interval 1s. The function then verifies if the object of the window is present and has its property closed set to false. If either of these two is not true, this means that the window is (probably) closed and we should trigger the callback 'closeCallback function'.

This function should work with all modern browsers. Some time ago, Opera caused errors when verifying Windows properties in other domains, therefore, the try..catch block. But I've tried it now and it seems to work pretty well.

We use this technique to create 'Facebook style' login windows for sites that do not support them through the SDK (ehem ... Twitter ... ehem). This required a bit of additional work: we could not receive any Twitter messages, but Oauth redirected us to our domain, and then we could put some data in the object of the pop-up window that could be accessed from the opener. Then, in the closed callback function, we analyze that data and present the actual results.

One drawback of this method is that the callback is invoked AFTER the window has been closed. Well, this is the best I could achieve with the cross-domain policies implemented.

Source: link

I made a small example with the previous code like this:

const seCerro = () => {
      alert();
    }

    var openDialog = function(uri, name, options) {
        var win = window.open(uri, name, options);
        var interval = window.setInterval(function() {
            try {
                if (win == null || win.closed) {
                    window.clearInterval(interval);
                    seCerro();
                }
            }
            catch (e) {
            }
        }, 1000);
        return win;
    };
 openDialog("https://www.youtube.com","Youtube","width=500,height=300");

You can see it working here

    
answered by 17.10.2018 в 17:08