Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2320
  • Last Modified:

Need a script to close child windows

In my site, I have pop-up windows that come up to prompt the user for more information when they click on a button on a form.  I might have 3 or more windows that open to help the user out.  If we call these windows, PARENT, CHILD and GRANDCHILD, I am looking for a script that if the user is viewing the GRANDCHILD window, and without closing the window (through a button with the onClick="window.close();" method, or hitting the "X" for the window) they click to view the CHILD window, I want the GRANDCHILD window to automatically close.  I would imagine the code for the CHILD window to be something like the following
<BODY onFocus="{close any child windows that are tied to this window}">

The same would need to hold true for the PARENT window.  If the user switches to view the PARENT window, then any CHILD windows and and children of those child windows (GRANDCHILDREN) would be automatically closed (basically all pop-up windows closed).  Is there a simple way to do this?
0
bmccleary
Asked:
bmccleary
  • 4
  • 4
  • 3
  • +3
1 Solution
 
superslamwichCommented:
I assume you are using the window.open() script to open the windows:

child1=window.open('child','child.html')

make sure that you have a name for the window, in the case above child.  Then add this script to the opener window: either the child or parent.

<body onFocus='javascript:child.close;'>

this will work for one child.  For more than one, have the onFocus call a function:

<script language='javascript'>
<!--
  function closechildren()  {
    child1.close()
    child2.close()
    child3.close()
    child4.close()
  }
//-->
</script>

add as many childs as you have.
0
 
AlopederiiCommented:
If I understand correctly, you have two options that I can think of.  One, open a new window and simultaneously close the current window.  This is the option I would prefer, and you can accomplish it the following way:

-------------------------
<SCRIPT>
function openit(){
window.open("test.html","Child")
self.close()
}
</SCRIPT>
<BODY>
<A HREF="#" onClick="openit()">Open another window.</A>
</BODY>
-------------------------

The trick is window.open, followed by the self.close().

Hang on and I'll post the second option...
0
 
AlopederiiCommented:
I'm sorry superslamwich, you posted while I was typing! ;)

Anyways, the second option that I can think of is to use the line
<BODY onLoad="window.opener.close()">
if you want to close the window that opened the current window.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
superslamwichCommented:
no problem bmccleary, I've done that a few times myself.  Anyway, it's good to have a second opinion, it's very possible it'll work better than mine
0
 
bmcclearyAuthor Commented:
I added the following functions to my page

function openChildWindow(){
  var childWindow = open('childpage.asp','childDoc');
  childWindow.focus();
}

function closeChildWindow(){
  childWindow.close();
}
superslamwich,

And added the following BODY tag:
<body onFocus="closeChildWindows()">

But with this, I get an error, because when the page initially opens up, it tries to close the child window, which hasn't been opened up yet.  The child window is only opened up when the user hits a button with the onClick="openChildWindow();" attribute.  How can I tell it to close the window ONLY if it is currently open.  Also, is there any way that I don't have to explicitly call the name of the child window, instead have a function that loops through all the windows and if the window was opened by this page, then it is closed when this page gets the focus?
0
 
bmcclearyAuthor Commented:
Alopederii,
Thanks for the info, but I need to have the opener (PARENT window) stay open while the user is looking at the child window.  I just want the child window to automatically close if the opener window get the focus back without the child window being manually closed.
0
 
lil_puffballCommented:
I just thought I'd comment that though the two solutions above are great, they haven't really mentioned the thing about the 'grandchild' (I think this usage is very cute! :) )
To do this is a bit more complicated as the parent window loses connection with any grandchildren. There are different ways to do this, but I believe the easiest is below:

-Make them all childs. For example, have all the opening functions on the parent page. But when you want to open a page from the child, call the function from the parent page, like so:
<a href="#" onClick="window.opener.open_grandchild()">
THis will enable you to close the grandchild just like it were the child. Then, you can have the following onFocus for the child:

<script>
function close_gchild() {
window.opener.grandchild1.close()
}
</script>

<body onFocus='close_gchild()'
0
 
fritz_the_blankCommented:
One other possibility is as follows:

Parent uses var winChild=window.open to create child
Child uses var winGrandChild=window.open to create grandchild

and etc.

For each window, you add a command on the onUnLoad() that closes the window that it spawned. So, when you close one window, the onUnLoad will close the window that it spawned and cause a cascade reaction.

Does that make sense?

Fritz the Blank
0
 
bmcclearyAuthor Commented:
Those all make sense, but the problem still exists, that if I want to close child windows by calling a method from the onFocus event of the body tag, and if that child window hasn't already been openend up, that it causes an error.  This is because the child window isn't even intialized and the function doesn't have access to a "close" method of an uninitialized object.

What is the code to say "if the childWindow is a window object and it is open, then close it"?
0
 
kollegovCommented:
Works like a magic :)) Check this

---------- 1.html -----------
<script>
  var child =  window.open("2.html",'child','width=100,height=200');
  function doClose() {
     if(child!=null)  child.close()
  }
  window.onfocus = doClose;
</script>

---------- 2.html -----------
<script>  
    window.open('3.html',"Grandchild",'width=100,height=200');
</script>
second

---------- 3.html -------------
window 3
<script>
 function doClose() {
    self.close()
 }
 window.onblur=doClose
</script>
0
 
kollegovCommented:
Other way is combination of onunload and onfocus events
receiving focus close child and cascade do cloase all grands with child onunload

This solution is good for ANY depth

------- 1.html------------
<script>
  var child = window.open("2.html",'child2','width=100,height=200');
  function closeChild() {
    if(child!=null) child.close();
  }
  window.onfocus = closeChild
</script>


<body onUnload="closeChild()">
first one
</body>

------- 2.html------------
<script>
  var child = window.open("3.html",'child3','width=100,height=200');
  function closeChild() {
    if(child!=null) child.close();
  }
  window.onfocus = closeChild
</script>


<body onUnload="closeChild()">
first one
</body>

--------- 3.html ------
<body>
Cool this is last
</body>
0
 
fritz_the_blankCommented:
A clarification, please. Do you want the same functionality for each window down the line? Let's say that we have the following windows:

Grandparent==>Parent==Child=>Grandchild==>Greatgrandchild

Would you want it such that if Child got focus, Grandchild and Greatgrand child would close? Or are you just looking for all windows to close when Grandparent gets focus?

Fritz the Blank
0
 
fritz_the_blankCommented:
This solution combines both aspects of my last question:

***************
Granparent.htm
***************
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var winParent;
function newWindow(strWin,strURL,intX,intY,intWidth,intHeight){
winParent =window.open(strURL,strWin,'left=' + intX + ', screenX =' + intX + ', top=' + intY + ', screenY=' + intY + ', width=' + intWidth + ', height=' + intHeight + ', scrollbars=yes, toolbar=yes');
}
function closeParent(){
     if(winParent){
          winParent.close();
     }
}
//-->
</SCRIPT>

</HEAD>


<BODY onFocus="closeParent();">
<form>
<INPUT type="button" value="Open Window" name=button1 onClick=newWindow('winParent','parent.htm',0,0,200,200)>
<form>
</BODY>
</HTML>


************
parent.htm
************

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var winChild;
function newWindow(strWin,strURL,intX,intY,intWidth,intHeight){
winChild =window.open(strURL,strWin,'left=' + intX + ', screenX =' + intX + ', top=' + intY + ', screenY=' + intY + ', width=' + intWidth + ', height=' + intHeight + ', scrollbars=yes, toolbar=yes');
}
function closeChild(){
     if(winChild){
          winChild.close();
     }
}
//-->
</SCRIPT>

</HEAD>


<BODY onFocus="closeChild();" onUnLoad="closeChild()">
<form>
<INPUT type="button" value="Open Window" name=button1 onClick=newWindow('winChild','child.htm',100,100,200,200)>
<form>
</BODY>
</HTML>


**************
child.htm
***************

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var winGrandChild;
function newWindow(strWin,strURL,intX,intY,intWidth,intHeight){
winGrandChild =window.open(strURL,strWin,'left=' + intX + ', screenX =' + intX + ', top=' + intY + ', screenY=' + intY + ', width=' + intWidth + ', height=' + intHeight + ', scrollbars=yes, toolbar=yes');
}
function closeGrandChild(){
     if(winGrandChild){
          winGrandChild.close();
     }
}
//-->
</SCRIPT>

</HEAD>


<BODY onFocus="closeGrandChild();" onUnload="closeGrandChild();">
<form>
<INPUT type="button" value="Open Window" name=button1 onClick=newWindow('winGrandChild','grandchild.htm',200,200,200,200)>
<form>
</BODY>
</HTML>


****************
grandchild.htm
*****************

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>


<BODY>
I am the grandchild!
</BODY>
</HTML>



Fritz the Blank
0
 
kollegovCommented:
fritz_the_blank , Just curious why all your windows have Different code ?
Isn't it much easier to have  uniform code for  ( as it is in my second  post :)
Only popup name and URL need to be different ...

0
 
fritz_the_blankCommented:
@kollegov,

I tried your solution, but I couldn't get the window.onfocus = closeChild to work consistently. As for changing the code slightly for each page, my goal was more of a pedagogic than programmatic one.


Fritz the Blank
0
 
bmcclearyAuthor Commented:
To all,
Thanks for all the information.  That is exactly what I needed.  I am accepting Fritz's submission, because it was the most complete and it is what I used to lay the foundation for my code.  I didn't want to leave the rest of you out though, so the following are links for you all to get points as well.

Thanks again!

Kolegov -
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20555315.html

Lil_puffbal -
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20555304.html

Alopederil -
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20555303.html

Kolegov -
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20555299.html
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 4
  • 4
  • 3
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now