How to refresh parent window after user closes popup window?

Question

There are many exactly similar questions here on SO, but none give the correct answer, hence forcing me to ask this as a new question. Please consider this before marking my question as a duplicate.

I tried the answers posted in the other questions and none of them work correctly for me. Here is the code I have:

In the parent window:

  <a href="createfolder.htm" onClick="return popup(this, 'createfolder', 600, 200);">Create new folder</a>

In the Javascript file:

function popupClosed() {
  //alert('About to refresh');
  window.location.href = window.location.href;
 //window.opener.location.reload();
}

function popup(mylink, windowname, w, h)
{
  //if (! window.focus) return true;
  var href;
  if (typeof(mylink) == 'string')
    href = mylink;
  else
    href = mylink.href;

  var left = (window.innerWidth/2)-(w/2);
  var top = (window.innerHeight/2)-(h/2);

  var win = window.open(href, windowname, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);

  win.onunload = function() {
    popupClosed();
  }

  return false;
}

The problem I am having is that it is refreshing the parent window as soon as the link is clicked - which is not desired. It does also refresh the parent window after the popup is closed. However I want to avoid the refresh that occurs when the link is clicked.

Answer 1

I don't know if they changed it, but in the past, the window had no events to call on, so you had to start a interval and check the closed state.

CODE

var win = window.open('http://www.google.com','google','width=800,height=600,status=0,toolbar=0');   
var timer = setInterval(function() {   
    if(win.closed) {  
        clearInterval(timer);  
        alert('closed');  
    }  
}, 1000);

Source: https://stackoverflow.com/a/15769630/2424541

Instead of alerting something, you can refresh the page.

window.location.reload();

Also if you want to prevent the href part of the anchor directing you to the page, you have to prevent the default behaviour. You can do this with the following:

<a href="createfolder.htm" id="popopener" onClick="return popup(this, 'createfolder', 600, 200);">Create new folder</a>

<script>
    document.getElementById('popopener').onclick = function(e) {
        e.preventDefault();
    }
</script>

At this part, you can remove the "onClick" part and put it under the e.preventDefault(); part. This is much cleaner than using onClick .

Answer 2

you should disable the default click event behavior of a link by event.preventDefault();

Edit:

<a href="createfolder.htm" onClick="return popup(event, this, 'createfolder', 600, 200);">Create new folder</a>


function popup(event, mylink, windowname, w, h)
{
  event.preventDefault();
  if (! window.focus) return true;
  var href;
  if (typeof(mylink) == 'string')
    href = mylink;
  else
    href = mylink.href;

  var left = (window.innerWidth/2)-(w/2);
  var top = (window.innerHeight/2)-(h/2);

  var win = window.open(href, windowname, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);

  win.onunload = function() {
      window.parent.popupClosed();
  };

  return false;
}