Home > Articles > Javascript Articles > How to close child window when parent window is closed using JavaScript in asp.net application?

How to close child window when parent window is closed using JavaScript in asp.net application?

by Thamil   on Sep 01, 2013   Category: Javascript  | Level: Intermediate  |  Views: 15222    |  Points: 100   
Like this article? Bookmark and Share:
In this article I will explain how to close child popup window when parent window is closed using JavaScript in asp.net applications.

Introduction


Sometime we may have a functionality to close child window when parent window is closed in asp.net application. In general we open a child or popup window to display the help information or getting input from user.When we retrieve the input from popup or child window, we block the interaction with parent window until child or popup window is closed but when we display the help information on child window we never block the interactions with parent window, in this case when we close the parent window, child window still open separately, so follow the below simple steps to close the child window in this scenarios.

Prepare the aspx as like below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CloseChildWindow._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Close child window when parent window is closed</title>
    <style type="text/css">
        .style1
        {
            font-style: italic;
            text-decoration: underline;
        }
    </style>
    <script language="javascript" type="text/javascript">
        var Popup_Wind = new Array();
        function DisplayHelp() {
            var Child_Window = window.open("help.aspx", "Help_file", "width=100,height=100");
            Popup_Wind[Popup_Wind.length] = Child_Window;
       }
       function CloseChildWindow() {
           if (Popup_Wind.length != 0) {
               for (var i = 0; i < Popup_Wind.length; i++) {
                   Popup_Wind[0].close();
               }
           }
       }
    </script>
</head>
<body onunload="CloseChildWindow();">
    <form id="form1" runat="server">
    <div>
        <i><b>Close child window when parent window is closed using JavaScript</b></i>
    </div>
    <div>
        <br />
        <span class="style1">Open child window</span>
        <br />
        <br />
        <a href="#" onclick="DisplayHelp();">Open Help file</a> (Click to open child window)
    </div>
    </form>
</body>
</html>



In the above code we have hyperlink to open child window by using DisplayHelp() javascript method and store the reference to the Popup_Wind array. Now we need to close the child window when parent window closed, by using onunload event in the body we can close the child window. Call the CloseChildWindow() function on onunload event and close all popups by using references which are stored in the array earlier.

That’s it, by using above simple javascript code we can close child windows when parent window is closed also we can use showModalDialog method to open popup windows and this method will not allow to interact parent window until child window is closed. So we can use this method whenever we required instead of using window.open method.

Thanks for reading this article. I hope you enjoyed this article, provide your suggestions and comments.

 



Like this article? Bookmark and Share:

Most viewed Articles

User Comments


No response found, be the first to review this article.

Submit feedback about this article

Please sign in to post feedback

Latest Posts