CODEWITHSUNDEEP
javascriptasp.netinternet-explorer-9
S M Kamran
S M Kamran

Reputation: 4503

Check if a popup window is closed

I am opening a popup window with 

var popup = window.open('...', '...');

This javascript is defined in a control. This control is then used from a web page. I want to reload the page which opens this popup when the popup is closed.

Basically user is required to input some denominations in the popup window and submit. These denominations are then stored in user sessions. And when user clicks submit I am closing the popup window and at the same time want to refresh the window which opens this popup to refetch the updates which user made in the popup.

I am trying to do 

var popup = window.open('...','...');
if (popup) {
  popup.onClose = function () { popup.opener.location.reload(); }
}

I guess I am doing it wrong coz this isn't seems to be working.

For testing the issue I've even tried this but no alert appeared.

if (popup) {
  popup.onclose = function() { 
    alert("1.InsideHandler");
    if (opener && !opener.closed) { 
      alert("2.Executed.");
      opener.location.reload(true); 
    } else { 
      alert("3.NotExecuted.");
    }
  }
}

Upvotes: 18

Views: 64014

Answers (5)

mplungjan
mplungjan

Reputation: 178403

Here's what I suggest (updated to newer code)

in the popup you should have:

const reloadOpener = () => {
  if (top.opener && !top.opener.closed) {
    try {
      opener.location.reload(1); 
    }
    catch(e) {
    }
    window.close();
  }
}
window.addEventListener("unload", () => {
  reloadOpener();
})

<form action="..." target="hiddenFrame">
</form>
<iframe style="width:10px; height:10px; display:none" name="hiddenFrame" src="about:blank"></iframe>

then assuming the same origin, the server process can return

<script> top.close(); </script>

NOTE: location.reload takes a boolean, add true if you want to not load from cache as in opener.location.reload(1);

Upvotes: 9

tsgrgo
tsgrgo

Reputation: 514

Solution for same origin popups

If your popup is from the same origin as the opener, you can attach an event listener to the popup like this:

const popup = window.open('...', '...');

popup.window.addEventListener('load', () => {
    popup.window.addEventListener('unload', () => {
        console.log('> Popup Closed');
        // window.location.reload();
    });
});

Note that the unload event listener needs to be added once the popup is loaded. This is because the unload event also fires on page load in popups.

Solutions for different origin popups

If your popup is not from the same origin as the opener, when you try to add the listeners, you will receive an error like this: Blocked a frame with origin from accessing a cross-origin frame. For security reasons, you can only access a limited set of properties from both opener and the opened window. More about that here.

Solution 1

If you have access to the origin in the popup, you could create the unload event listener in your popup and call window.opener.location.replace(OPENER_URL). The drawback of this is that you need the opener's URL. Instead of hardcoding, you could pass the OPENER_URL as a query string to the popup.

Note that window.opener.location.reload() is not allowed in a cross-origin scenario, so you have to use .replace(OPENER_URL)

Solution 2

You could simply create an interval in the opener to periodically check whether the window is open or not with the window.closed property.

const popup = window.open('...', '...');

const interval = setInterval(() => {
    if (popup.closed) {
        clearInterval(interval);
        console.log('> Popup Closed');
        // window.location.reload();
    }
}, 500);

This is probably the most flexible solution. It is also used by the PayPal API for payment popups (with a polyfill for the closed property)

Upvotes: 8

Ash Burlaczenko
Ash Burlaczenko

Reputation: 25475

Instead you should use a modal dialog like so

var popup = window.showModalDialog("page.html", "", params);

This would stop your at this line until the dialog is closed.

Somewhere in your page.html you would then code some javascript to set the window.returnValue which is what will be place the the popup variable.

Update

Window.showModalDialog() is now obsolete.

Upvotes: 0

Jcvv
Jcvv

Reputation: 1

Ok so what you do is as follows.

create a method "setWindowObjectInParent" then call that in the popup. var popupwindow;

function setWindowObjectInParent(obj)
{
popupwindow = obj;
}

Now you have an object that you can call focus on.

So in the popup add 

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

This will unset the obj when the popup is closed and set the object when it is opened.

Thus you can check if your popup is defined and then call focus.

Upvotes: 0

Amandeep
Amandeep

Reputation: 21

Try this:

window.opener.location.reload(true);

or

Into the popup before closing

window.opener.location.href = window.opener.location.href;
window.close();

Upvotes: 2

Related Questions