Closing Child Popup Windows When Parent Window is Closed

Few days ago a friend of mine emailed me asking how to close the child popup windows when the parent window is closed. Although this seems to me as an unusual requirement but it needs to be implemented. In this article I will explain how to perform the closing of child windows when the parent is closed.

Introduction:

Few days ago a friend of mine emailed me asking how to close the child popup windows when the parent window is closed. Although this seems to me as an unusual requirement but it needs to be implemented. In this article I will explain how to perform the closing of child windows when the parent is closed.

Why Not Use Dependent = “Yes”?

When opening a new window using JavaScript you can make use of the “Dependent = yes” property which makes the child window close when its parent is closed. The problem is that this property can only be used when using Netscape browser (Yikes!).

Scenario:

The scenario is really simple. We will have two links on the page. Each link will open a new popup. When the parent window is closed all the child popups will automatically be closed.

Opening Popup Windows:

Opening a new window is as simple as opening a can of soda. Here is the code to open a new window:

<div>

    <a href="#" onclick="openPopUp('PopUp1.aspx','PopUp1')">Open PopUp1</a>
    <br />
    <a href="#" onclick="openPopUp('PopUp2.aspx','PopUp2')">Open PopUp2</a>

    </div>

And here is the openPopUp JavaScript function:

function openPopUp(url,name)
{
    var popUp = window.open(url,name,"width=100,height=100");
}

In the above code the variable popUp will contain a reference to the new popup window. Since, we will be opening multiple popups we need an array to hold their references. Check out the code below which inserts the popup window object to an array.

// create an array of popup window object. This is a global variable
var popups = new Array();

function openPopUp(url,name)
{
    var popUp = window.open(url,name,"width=100,height=100");
    popups.push(popUp);
}

Now, we have references to all the popups that are created using our parent page.

Closing the PopUps:

The onunload event will be responsible for closing the popups.

Please note that this is not a perfect solution since onunload is also fired when the page is refreshed. Hence, when the page is refreshed all the popups will be closed.

<body onunload="destroyPopUps()">

In the code above the onunload event is tied to the body element of the page. Here is the implementation of the destroyPopUps function.

function destroyPopUps()
{
    if(popups.length == 0) return;

    for(i=0; i<popups.length; i++)
    {
        popups[i].close();
    }
}

The destroyPopUps function simply iterates through the popUp array and closes them one by one.

Conclusion:

In this article we learned how to close the child popup windows when the parent window is closed. Netscape uses a simple “dependent = yes” attribute. Maybe some day all the major browsers will support this attribute and make things easier.

I hope you liked the article happy coding!

[Download Sample]