How to Open a Popup with JavaScript and Then Detect When the User Closes It

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

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

How to detect popup window close event

It does not work due to cross domain calls. To get the unload event you need to call a popup instead, which has the wanted url in an iframe.

document.querySelector('#share').onclick = function(){
var popup = window.open('popup.html', '', "width=400, height=400");

popup.onbeforeunload = function(){
console.log('unload');
}
};

popup.html

<iframe src = 'http://www.facebook.com/sharer/sharer.php?u=http://www.google.com'></iframe>

How to open a popup, detect its closure, and redirect the main window

  1. Pass a return URL to your own page to the Facebook login flow.
  2. In that page, use window.opener to get the window object (and global scope) of your original page.
  3. Use that to call a function in the original page to do whatever you want.

Capture the close event of popup window in JavaScript

Your example will work as long as the pop-up window url is in the same domain as the parent page, and you change the event to all lowercase:

var new_window = window.open('some url')
new_window.onbeforeunload = function(){ /* my code */ }

Javascript detect closing popup loaded with another domain

As mentioned, same origin policy prevents Javascript from detecting such events. But there's a quite simple solution which allows you to detect closure of such windows.

Here's the JS code:

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: it creates new window with provided parameters and then sets the checker function with 1s interval. The function then checks if the window object is present and has its closed property set to false. If either ot these is not true, this means, that the window is (probably) closed and we should fire the 'closeCallback function' callback.

This function should work with all modern browsers. Some time ago Opera caused errors when checking properties from windows on other domains - thus the try..catch block. But I've tested it now and it seems it works quite ok.

We used this technique to create 'facebook-style' login popups for sites which doesn't support them via SDK (ehem... Twitter... ehem). This required a little bit of extra work - we couldn't get any message from Twitter itself, but the Oauth redireced us back to our domain, and then we were able to put some data in popup window object which were accessible from the opener. Then in the close callback function we parsed those data and presented 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 was able to achieve with cross domain policies in place.

Can JavaScript detect a popup window when it closes and reopen it?

Recent improvements in browser security mean you kind of can't do what you want very well.

You can detect that the popup has closed:

var popupWindow;
var pop = function () {
popupWindow = window.open("example.html"); // has to be on same domain as original file
// setting a popupWindow.onclose event doesn't work (it
// fires immediately). You can fake it by observing some
// known property of the popup window, such as its location:
var fakeOncloseEvent = window.setInterval(function () {
if (!popupWindow.location) {
// The popup was closed.
window.clearInterval(fakeOncloseEvent); // tidy up
pop(); // <-- But this won't work!
}
}, 250);
}

Reopening the popup window will be prevented in most browsers, because you're only allowed to open a new window as a result of direct user action (i.e. a click). (You could use the above to guide the user towards reopening the popup on their own, perhaps by highlighting the "open the popup" link, but you can't open it for them.)

Alternatively you could tackle the problem from the other end, and put code in the popup window to prevent it from closing. But most browsers severely limit what you're allowed to do in an onbeforeunload event -- you're pretty much limited to throwing up a confirm dialog:

window.onbeforeunload = function() {
// Just return the string, don't return a confirm() here.
// Various browsers will include their own additional text
// in the confirm dialog, and some may ignore your added text altogether.
return "Are you sure you want to close this beautiful popup?";
}


Related Topics



Leave a reply



Submit