JavaScript: create a popup window and update parent on close

Tweet

I use popup windows rarely because most of today browsers try to block them. However sometimes they are handy and - let me say - beautiful. I've used them in a web application where detail information of a record are displayed and modified through a popup. In this situation, what I needed was to open the window in the centre of the screen and to update the parent window when the popup is closed.

First of all we prepare some parameters to open the popup:

<script type="text/javascript">
<!--
 var left = (screen.width  - 500)/2;
 var top = (screen.height - 600)/2;
 var params = 'width=500, height=600, scrollbars=yes';
 params += ', top='+top+', left='+left;
// -->
</script>

In the little script all the relevant parameters are set.
Left and top variables are used to determine the exact position of the window using the screen.width and screen.height properties to detect the screen resolution. Starting from the screen size, we subtract  the popup window width and height and divide by 2, obtaining the exact left and top positions.

The parameters are then used when opening the popup.

onClick="window.open('popupfilename.asp','nameOfWindow',params);return false;"

You can place the window.open function wherever you like. In my page it is placed in a <a> tag using onclick.

Now you should be able to open the new page exactly at the centre of the stage.
The tricky part is done when you need to refresh the parent window. In my application, the popup window is used to update or delete the record details. After doing so I needed to update the data in the parent window (just to be clear, the one from which I opened the popup). To do so, we need a small function:

<script language="JavaScript">
<!--
function load(file,target) {
  if (target != '')
   target.window.location.href = file;
  else
   window.location.href = file;
}
//-->
</script>

As you can see we used the top.opener. The opener is the source window that opened the popup by calling the open method (see above). Now we only need to decide when to call the function and to update the parent window. In my page I do it when the popup window unloads:

onUnload="javascript:load('parentfilename.asp',top.opener)"

Actually you can call the load function whenever and wherever you like.
In the end, you need to close the popup window in order to trigger the onUnload event. To do so use:

response.write ("<script language='javascript'>self.close()</script>")

For more info on top.opener and window in JavaScript please refer to the Sun documentation site.