is it possible to open a popup with javascript and then detect when the user closes it?

JavascriptJqueryPopup

Javascript Problem Overview


The question is pretty much all in the title.

Is it possible (and how?) to open a popup with javascript and then detect when the user closes it?

I am using jquery within the project so a jquery solution would be good. Cheers!

Javascript Solutions


Solution 1 - Javascript

If you have control over the contents of the pop-up, handle the window's unload event there and notify the original window via the opener property, checking first whether the opener has been closed. Note this won't always work in Opera.

window.onunload = function() {
    var win = window.opener;
    if (!win.closed) {
        win.someFunctionToCallWhenPopUpCloses();
    }
};

Since the unload event will fire whenever the user navigates away from the page in the pop-up and not just when the window is closed, you should check that the pop-up has actually closed in someFunctionToCallWhenPopUpCloses:

var popUp = window.open("popup.html", "thePopUp", "");
function someFunctionToCallWhenPopUpCloses() {
    window.setTimeout(function() {
        if (popUp.closed) {
            alert("Pop-up definitely closed");
        }
    }, 1);
}

If you don't have control over the contents of the pop-up, or if one of your target browsers does not support the unload event, you're reduced to some kind of polling solution in the main window. Adjust interval to suit.

var win = window.open("popup.html", "thePopUp", "");
var pollTimer = window.setInterval(function() {
    if (win.closed !== false) { // !== is required for compatibility with Opera
        window.clearInterval(pollTimer);
        someFunctionToCallWhenPopUpCloses();
    }
}, 200);

Solution 2 - Javascript

There is a very simple solution to your problem.

First make a new object which will open up a pop like this :

var winObj = window.open('http://www.google.com','google','width=800,height=600,status=0,toolbar=0');

In order to know when this popup window is closed, you just have to keep checking this with a loop like the following :

var loop = setInterval(function() {   
    if(winObj.closed) {  
        clearInterval(loop);  
        alert('closed');  
    }  
}, 1000); 

Now you can replace alert with any javascript code you want.

Have Fun! :)

Solution 3 - Javascript

Try looking into the unload and beforeunload window events. Monitoring these should give you an opportunity to call back when the DOM unloads when the window is closed via something like this:

var newWin = window.open('/some/url');
newWin.onunload = function(){
  // DOM unloaded, so the window is likely closed.
}

Solution 4 - Javascript

If you can use the jQuery UI Dialog, it actually has a close event.

Solution 5 - Javascript

To open a new window call:

var wnd = window.open("file.html", "youruniqueid", "width=400, height=300");

If you just want to know when that window is going to close, use onunload.

wnd.onunload = function(){
    // do something
};

If you want a confirmation from the user before the can close it, use onbeforeunload.

wnd.onbeforeunload = function(){
    return "are you sure?";
};

Solution 6 - Javascript

We do this in one of my projects at work.

The trick is to have a JS function in your parent page that you plan to call when the popup is closed, then hook the unload event in the popup.

The window.opener property refers to the page that spawned this popup.

For example, if I wrote a function named callingPageFunction on my original page, I would call it from the popup like this:

$(window).unload(function() {
    window.opener.callingPageFunction()
});

Two notes:

  1. This should be wrapped in a ready function.
  2. I have an anonymous function because you may want other logic in there

Solution 7 - Javascript

I thinks best way is:

const popup = this.window.open(url.toString());
popup.addEventListener('unload', ()=> console.log('closed'))

Solution 8 - Javascript

Yes, handle the onbeforeUnload event for the popup window and then call a function on the parent window using:

window.opener.myFunction()

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPabloView Question on Stackoverflow
Solution 1 - JavascriptTim DownView Answer on Stackoverflow
Solution 2 - JavascriptKshitij MittalView Answer on Stackoverflow
Solution 3 - JavascriptajmView Answer on Stackoverflow
Solution 4 - Javascripteje211View Answer on Stackoverflow
Solution 5 - JavascriptjAndyView Answer on Stackoverflow
Solution 6 - JavascriptPowerlordView Answer on Stackoverflow
Solution 7 - JavascriptSerginhoView Answer on Stackoverflow
Solution 8 - JavascriptTimSView Answer on Stackoverflow