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

91,810

Solution 1

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

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

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

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

Solution 5

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
Share:
91,810

Related videos on Youtube

Pablo
Author by

Pablo

Updated on July 05, 2022

Comments

  • Pablo
    Pablo over 1 year

    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!

    • DA.
      DA. over 13 years
      define "pop-up". Are we talking some sort of on-page rendered modal box? A javascript alert? A new browser window?
    • Pablo
      Pablo over 13 years
      A new browser window... sorry for my lack of clarity
  • Pablo
    Pablo over 13 years
    Thanks ajm looks great. Is there anyway to get the url of a popup by any chance?
  • Tim Down
    Tim Down over 13 years
    This won't work cross browser. You need to handle the unload event in the pop-up.
  • Tim Down
    Tim Down over 13 years
    This won't work cross browser. You need to handle the unload event in the pop-up document.
  • Josh Stodola
    Josh Stodola over 13 years
    Unload fires with every new request, not just when the window closes.
  • Josh Stodola
    Josh Stodola over 13 years
    Unload fires with every new request, not just when the window closes.
  • s4y
    s4y over 13 years
    jQuery isn't the solution to every problem :).
  • eje211
    eje211 over 13 years
    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...
  • eje211
    eje211 over 13 years
    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.
  • ajm
    ajm over 13 years
    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?
  • Josh Stodola
    Josh Stodola over 13 years
    For instance, if there are hyperlinks within the popup window, clicking them will fire unload.
  • Jonathon Hill
    Jonathon Hill almost 12 years
    I recommend the polling solution instead of the unload event since it is compatible with more browsers (see opera-bugs.jottit.com).
  • Tim Down
    Tim Down almost 12 years
    @JonathonHill: Agreed. I alluded to the Opera problem earlier in the answer, but I should have made the point more clearly. Thanks for the edit. Btw, what's the reason for requiring window.closed !== false in Opera?
  • Jonathon Hill
    Jonathon Hill almost 12 years
    It is a workaround for a bug in Opera. I discovered it from opera-bugs.jottit.com.
  • Tim Down
    Tim Down almost 12 years
    @JonathonHill: Yes, I read the page. I was hoping for more detail. Don't worry, I'll look it up.
  • Shrike
    Shrike almost 11 years
    'closed' property is not a part of DOM specification.
  • Tim Down
    Tim Down almost 11 years
    @Shrike: No. I'm surprised it hasn't been standardized in HTML5 because it is implemented in all major browsers, as far as I'm aware.
  • codo-sapien
    codo-sapien almost 8 years
    In any case, if using the polling option, be absolutely sure not to forget the window.clearInterval() call. If it's not included, the original page will continue to poll... over and over and over...
  • Romowski
    Romowski over 7 years
    @TimDown: this is realy working solution (I used pollTimer). How to implement it in "for" loop? I have the list of links and I need open every link in new window (with its own js) in "for" loop and wait until this new window will be closed and then continue loop
  • Romowski
    Romowski over 7 years
    Found the way: jobTimerId = setTimeout(function run() {job(); jobTimerId = setTimeout(run, 100); }, 0);
  • Stephen Smith
    Stephen Smith over 5 years
    I get this event firing twice, once when the popup window opens, and once when it closes. The first time, this is about:blank, and the second time, this is the actual window object corresponding to the page. I am checking this.url for being undefined to work around this.