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!


The only way i can think of at the moment is to create a function on your parent page that has a timeout in it which calls itself after 10 seconds. In the function you could also check for the value of a cookie to see whether it's true or false. When the popup window closes set a cookie to true.

Hope this helps.

Ash Burlaczenko
Ignore this. AJM's way is much easier. +rep
Ash Burlaczenko
+2  A: 

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 ='/some/url');
newWin.onunload = function(){
  // DOM unloaded, so the window is likely closed.
Thanks ajm looks great. Is there anyway to get the url of a popup by any chance?
This won't work cross browser. You need to handle the `unload` event in the pop-up.
Tim Down
Unload fires with every new request, not just when the window closes.
Josh Stodola
Yeah, YMMV with unload. Likely, you'll need a combination of unload and beforeunload to cover the IEs. @Josh - Unload should fire whenever the Document of the child window unloads from the browser independent of requests; what behavior are you seeing?
@ajm For instance, if there are hyperlinks within the popup window, clicking them will fire `unload`.
Josh Stodola
+3  A: 

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

jQuery isn't the solution to every problem :).
True, true. I should have begun my answer with the word "if" as in "If you can use the jQuery UI Dialog" and not just *assumed* it was possible. Hey! Wait a second...
And, when it comes to JavaScript, jQuery is never really a solution to problems, but is often a huge, HUGE, **HUGE** shortcut to the solution, whatever it may be. You learn more by taking the scenic route, but, in many cases, I and most people prefer the (huge, HUGE, **HUGE** ) jQuery shortcut.

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

+1  A: 

To open a new window call:

var wnd ="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?";
This won't work cross browser. You need to handle the `unload` event in the pop-up document.
Tim Down
Unload fires with every new request, not just when the window closes.
Josh Stodola

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() {

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
R. Bemrose
+2  A: 

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) {

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 ="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, you're reduced to some kind of polling solution in the main window. Adjust interval to suit.

var win ="popup.html", "thePopUp", "");
var pollTimer = window.setInterval(function() {
    if (win.closed) {
}, 200);
Tim Down