?
Solved

Need a script to close child windows

Posted on 2003-03-13
16
Medium Priority
?
2,308 Views
Last Modified: 2010-08-05
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
Comment
Question by:bmccleary
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 3
  • +3
16 Comments
 
LVL 3

Expert Comment

by:superslamwich
ID: 8132845
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
 
LVL 5

Expert Comment

by:Alopederii
ID: 8132882
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
 
LVL 5

Expert Comment

by:Alopederii
ID: 8132911
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Expert Comment

by:superslamwich
ID: 8132991
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
 

Author Comment

by:bmccleary
ID: 8133184
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
 

Author Comment

by:bmccleary
ID: 8133195
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
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8133292
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
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8133392
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
 

Author Comment

by:bmccleary
ID: 8133545
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
 
LVL 10

Expert Comment

by:kollegov
ID: 8134031
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
 
LVL 10

Expert Comment

by:kollegov
ID: 8134091
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
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8136452
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
 
LVL 46

Accepted Solution

by:
fritz_the_blank earned 2000 total points
ID: 8136666
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
 
LVL 10

Expert Comment

by:kollegov
ID: 8142011
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
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8142435
@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
 

Author Comment

by:bmccleary
ID: 8162293
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question