Click here to Skip to main content
13,352,161 members (75,411 online)
Click here to Skip to main content
Add your own
alternative version


21 bookmarked
Posted 12 Sep 2008

JavaScript to close child windows

, 12 Sep 2008
Rate this:
Please Sign up or sign in to vote.
How to close open child windows when parent window is closed, using JavaScript.

How to Close Child Windows When the Parent Window Closes

The Motivation

When moving an application from Windows to web, I noticed that certain functionality available only in a Windows Form is expected to be carried over to the web form. Unfortunately, sometimes, achieving the said functionality can be a bit more difficult than expected.

The Objective

Being object oriented in nature, I wanted a drop in solution on the client side to achieve closing child windows. Doing a bit of research told me that the call to would return a window object that I could then (at a later time) call close on. The question to be answered was how to store each window object upon opening, and how to detect the browser closing in order to close the child windows.

Note: There are more than a few articles out there on creating objects in JavaScript, and it is beyond the scope of this article.

The Code

Persisting Window Handles

The first thing, persist the window object returned by the open function call. I achieved this by storing it as a private Array within my object.

function windowController(){
  //Note: The absence of "this" indicates private
  var loadedWindows = new Array()
} //Note: Yes, in JavaScript an object
  // is declared similar to a function.


Now that I have a nifty array, I need a public method that would wrap the function to capture the returned object and add to my array.

this.popUpWindow = function(wndUrl, wndName, wndWidth, wndHeight){
var windObj = null;
  //set default width 
  if(typeof wndWidth == 'undefined') wndWidth=500;
  //set default height
  if(typeof wndHeight == 'undefined') wndHeight=250;
  windObj =, 
    //misc options to open a window, again mostly optional 
    wndName, 'toolbar=0,menubar=0,resizable=0,location=0,
  windObj.registerID = wndName; //this is the key to the window
  loadedWindows[loadedWindows.length] = windObj;
  //add the window to our collection.
catch(ex) { 
  alert('WindowController.popUpWindow: ' + 
        'Exception occured, message: ' + ex.message)
} //oops, looks like we are cross domain scripting.
return windObj;

Further Enhance Encapsulation

Since I am wrapping, I decided to only allow a single instance of each handle ID to be opened, by checking the ID against each window handle already loaded, and if it exists, I simply call focus (this is similar to what is expected from Windows Forms).

this.popUpWindow = function(wndUrl, wndName, wndWidth, wndHeight){
  var windObj = null;
    windObj = findWindow(wndName);
    if (windObj != null)

where the findWindow function simply iterates the array, and returns null if not found.

function findWindow(winHandle){
  for (var i=0; i< loadedWindows.length; i++){
  if (loadedWindows[i].closed == true){
    if (loadedWindows[i].registerID == winHandle)
      return loadedWindows[i];
  return null;

Pulling it all Together

Finally, I needed a way to know when the browser was closing in order to close all my child windows. Of course, IE, compared to other browsers, has different ways to register to events, so I created a generic method to achieve this.

function WireEvent(elem,target,func){
  if (elem.addEventListener)
    elem.addEventListener(target, func, false); //FF
  else if (elem.attachEvent)
    elem.attachEvent(target, func); //IE

where the onunload function is handled as follows:

this.closeAllWindows = function(){
  for(var x = 0; x < loadedWindows.length; x++){
    catch(err) {
      alert('WindowController.closeAllWindows: ' + 
            'Exception occured, message: ' + err.message)
  } //oops, cross domain scripting or window already closed etc...

Looks like all is in place, the last thing I needed was the ability to init the object so it would be available from code, so I added the call at the top of the js file, as follows….

var _windowController = new windowController();

Using the Object

Now, if the file is included, we have access to the window controller, so as long as all opened child windows are done through this object, we can be certain they will close upon browser exit as long as we are not cross domain.

_windowController.popUpWindow('ChildForm.aspx', 'ChildForm');


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
United States United States
Ah, just another dev living the life of Dilbert. Smile | :)

You may also be interested in...

Comments and Discussions

QuestionWhen I run your code, no popup window is closed when I close the main browser Pin
Member 813707623-May-17 5:51
memberMember 813707623-May-17 5:51 
QuestionNeed a sample code with pages Pin
Member 103865067-Nov-13 4:26
memberMember 103865067-Nov-13 4:26 
QuestionHow to wait for child Pin
Greg Bergeron4-Aug-11 6:15
memberGreg Bergeron4-Aug-11 6:15 
GeneralNice article! Pin
Sandeep Mewara23-Mar-10 9:02
memberSandeep Mewara23-Mar-10 9:02 
GeneralExcellent code Pin
Edwill Leighton25-Jun-09 6:35
memberEdwill Leighton25-Jun-09 6:35 
Generalgood Pin
axkiller3-Jun-09 0:34
memberaxkiller3-Jun-09 0:34 
GeneralNice article but incomplete solution Pin
Member 159112725-Nov-08 0:07
memberMember 159112725-Nov-08 0:07 
GeneralPrb downloading your sample Pin
pMeric15-Sep-08 21:01
memberpMeric15-Sep-08 21:01 
GeneralRe: Prb downloading your sample Pin
MCF.Goodwin16-Sep-08 1:20
memberMCF.Goodwin16-Sep-08 1:20 
GeneralRe: Prb downloading your sample Pin
pMeric16-Sep-08 2:19
memberpMeric16-Sep-08 2:19 
GeneralInteresting article Pin
o_theophilus15-Sep-08 7:29
membero_theophilus15-Sep-08 7:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180111.1 | Last Updated 12 Sep 2008
Article Copyright 2008 by MCF.Goodwin
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid