Open popup and refresh parent page on close popup

Advanced techniques for popup handling

To rally popup lifecycle events effectively maintains an undisturbed user experience. window.onunload should be used judiciously to prevent unexpected results for different browsers. Accoutre your tactics with the use of window.onbeforeunload, and stay alert for any popup blockers.

Failure-proof closure detection

The onunload event is not flawless due to its unpredictable behavior across different browsers. A fail-safe method would be:

function openPopupAndRefreshParent() {
  var popup = window.open('popup.html', 'Popup', 'width=600,height=600'),
      interval = setInterval(function() {
        if (popup.closed) {
          clearInterval(interval);
          window.location.reload(); // Fresh view!
        }
      }, 100); // Make this faster or slower, as you like
}


Responsible popup management

Design popups with the user's flow experience in mind. Add a button inside the popup that triggers a save or update action, leading to a page refresh:

function refreshParentAndClosePopup() {
  window.opener.location.reload(); // Clear the cobwebs!
  window.close(); // Bye-bye, popup
}


A jQuery equivalent:

$('#saveButton').click(function() {
  window.opener.location.reload();
  window.close();
});


Complying with Same Origin Policy

For security purposes, browsers enforce the Same Origin Policy (SOP). Make sure parent and popup domains match, unless you've set up secure cross-origin communication with postMessage().

The user experience of refreshing

A page refresh from a popup might seem jarring. Preserve user input and state as much as you can. To perform a hard refresh, use window.opener.location.reload(true) after significant popup changes.

Timed actions: The user first

Give your users a moment before an action occurs:

window.onbeforeunload = function() {
  setTimeout(function() {
    window.opener.location.reload();
  }, 1000); // Who doesn't enjoy a power nap?
};


Remember to test your solution in different browsers and for variations with onunload and window.close() events.

Tips to enhance popup interaction

Customize popup dimensions

Consider the size and position of the popup window for user experience. Parameters such as width, height, left and top set an optimized popup display.

Grabbing focus

Ensure your popup grabs the user's attention immediately after opening to prevent unintended interactions with the underlying page. Use popup.focus() right after window open.

Parent-guided popup closure

Sometimes, you want to close a popup programmatically from the parent. Keep a reference handy:

var popupRef;

function openPopup() {
  popupRef = window.open(...);
}

function closePopup() {
  if (popupRef) {
    popupRef.close();
    popupRef = null; // All gone!
  }
}


Substitute popups with modal dialogues

If popups pose more problems than they solve, consider modal dialogues built with HTML, CSS, and JavaScript. They fit nicely within the DOM structure of the main page and are less likely to be blocked.