I am new to DOM and need a little help. I have opened a named page with window.open. Later when the user clicks on the link from the parent page that was used to open the child window, they are confused because they think the function doesn't work. Of course, the page is already open. All I need is the code to bring the child window back to the front. I assume I will need to use focus() and have tried everything I can think of. Do I need an if statement on the function that opens the child window to determine if the child window is already open and what is the DOM code i.e. window.childWindowName.focus()? Thanks in advance for your help!
JC4QLx3 0 Newbie Poster
~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster
When the button is clicked, check to see if the window is already open using the 'window.closed' property which returns a boolean. If the child window is open, just give it the focus using the function 'focus()' and if it isn't then open a new one.
<html>
<head>
<script>
var wnd = null;
function openit()
{
if(!wnd || wnd.closed)
wnd = window.open("http://www.google.com");
else
wnd.focus();
}
</script>
</head>
<body>
<form>
<input type="button" value="Open" onclick="openit();" />
</form>
</body>
</html> JC4QLx3 0 Newbie Poster
I truly appreciate your help. I modified my script per your sample (I think), but it doesn't work. With what I have here the window doesn't open. Do you or anyone else see the problem?
<SCRIPT>
var name = null;
function openWindow(url,name)
{
if(!name || name.closed)
{
var windowHeight,windowWidth,windowTop,windowLeft
windowHeight = screen.availHeight;
windowWidth = screen.availWidth;
windowTop = 0;
windowLeft = 0;
var varStore = "";
varStore = varStore + "width=" + windowWidth;
varStore = varStore + ",height=" + windowHeight;
varStore = varStore + ",resizable=" + "1";
varStore = varStore + ",scrollbars=" + "0";
varStore = varStore + ",menubar=" + "0";
varStore = varStore + ",toolbar=" + "0";
varStore = varStore + ",directories=" + "0";
varStore = varStore + ",location=" + "0";
varStore = varStore + ",status=" + "1";
varStore = varStore + ",left=" + windowLeft;
varStore = varStore + ",top=" + windowTop;
varStore = varStore + ",ScreenX=" + windowLeft;
varStore = varStore + ",ScreenY=" + windowTop;
window.open(url,name,varStore)
}
else
{
name.focus();
}
}
</SCRIPT>
<P align="center"><A href="javaScript:openWindow('member_panel.php?page=BO_Home','BO_Home')"><IMG src="http://qlx3.net/images/home.png" alt="Home" width="256" height="217"></A></P> ~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster
Your code does not run because you ignore the important aspects of the code posted by me. You have a global variable called 'name' and at the same time have a local variable 'name'. Because of this the local one hides the global one. Change the name of the function variable to something else than 'name'.
The second mistake you make is of not assigning the reference of the newly opened window to the variable 'name'. See my previous example for more info and post your code if it still doesn't work.
JC4QLx3 0 Newbie Poster
I do not see the difference between what you did and what I did. Anyway, would you like to earn money for your advice. We have need for a developer with these skills. Please send your contact info to gojimgo@insightbb.com. If you do that, please send your response with read receipt, so I don't just throw it away.
~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster
Do something like this:
<SCRIPT>
var name = null;
function openWindow(url, named)
{
if(!name || name.closed)
{
var windowHeight,windowWidth,windowTop,windowLeft
windowHeight = screen.availHeight;
windowWidth = screen.availWidth;
windowTop = 0;
windowLeft = 0;
var varStore = "";
varStore = varStore + "width=" + windowWidth;
varStore = varStore + ",height=" + windowHeight;
varStore = varStore + ",resizable=" + "1";
varStore = varStore + ",scrollbars=" + "0";
varStore = varStore + ",menubar=" + "0";
varStore = varStore + ",toolbar=" + "0";
varStore = varStore + ",directories=" + "0";
varStore = varStore + ",location=" + "0";
varStore = varStore + ",status=" + "1";
varStore = varStore + ",left=" + windowLeft;
varStore = varStore + ",top=" + windowTop;
varStore = varStore + ",ScreenX=" + windowLeft;
varStore = varStore + ",ScreenY=" + windowTop;
name = window.open(url,name,varStore)
}
else
{
name.focus();
}
}
</SCRIPT>
<P align="center"><A href="javascript:openWindow('member_panel.php?page=BO_Home','BO_Home')"><IMG src="http://qlx3.net/images/home.png" alt="Home" width="256" height="217"></A></P>Oh and BTW, get into the habit of using lowercase alphabets for tag names as we are now in the XHTML era.
MidiMagic 579 Nearly a Senior Poster
Actually, you should not use html attributes as variable names.
~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster
Good point, I missed that one. But considering there are no attributes having the name 'name' in the global namespace (window), there is no harm as such. I for one, don't prefer using such names as my variable names.
JC4QLx3 0 Newbie Poster
Thanks, you are being so helpful! We are very close. The only problem left to resolve is that the user cannot open the 3 different windows at the same time, which we want. The reason is that we need to set name to 'null' for every attempt. The following was my attempt to do that, but it creates an error. Note that I moved the var name = null; to within the function call.
<SCRIPT>
function openWindow(url, named)
{
var name = null;
name = named;
if(!name || name.closed)
{
var windowHeight,windowWidth,windowTop,windowLeft
windowHeight = screen.availHeight;
windowWidth = screen.availWidth;
windowTop = 0;
windowLeft = 0;
var varStore = "";
varStore = varStore + "width=" + windowWidth;
varStore = varStore + ",height=" + windowHeight;
varStore = varStore + ",resizable=" + "1";
varStore = varStore + ",scrollbars=" + "0";
varStore = varStore + ",menubar=" + "0";
varStore = varStore + ",toolbar=" + "0";
varStore = varStore + ",directories=" + "0";
varStore = varStore + ",location=" + "0";
varStore = varStore + ",status=" + "1";
varStore = varStore + ",left=" + windowLeft;
varStore = varStore + ",top=" + windowTop;
varStore = varStore + ",ScreenX=" + windowLeft;
varStore = varStore + ",ScreenY=" + windowTop;
name = window.open(url,name,varStore)
}
else
{
name.focus();
}
}
</SCRIPT> JC4QLx3 0 Newbie Poster
Good point, I missed that one. But considering there are no attributes having the name 'name' in the global namespace (window), there is no harm as such. I for one, don't prefer using such names as my variable names.
This still isn't working. Can someone help?
<SCRIPT>
<!--
// create a custom window
function openWindow(url, wnd)
{
var theName = null;
theName = wnd;
if(!theName || theName.closed)
{
var windowHeight,windowWidth,windowTop,windowLeft
windowHeight = screen.availHeight;
windowWidth = screen.availWidth;
windowTop = 0;
windowLeft = 0;
var varStore = "";
varStore = varStore + "width=" + windowWidth;
varStore = varStore + ",height=" + windowHeight;
varStore = varStore + ",resizable=" + "1";
varStore = varStore + ",scrollbars=" + "0";
varStore = varStore + ",menubar=" + "0";
varStore = varStore + ",toolbar=" + "0";
varStore = varStore + ",directories=" + "0";
varStore = varStore + ",location=" + "0";
varStore = varStore + ",status=" + "1";
varStore = varStore + ",left=" + windowLeft;
varStore = varStore + ",top=" + windowTop;
varStore = varStore + ",ScreenX=" + windowLeft;
varStore = varStore + ",ScreenY=" + windowTop;
theName = window.open(url,theName,varStore)
}
else
{
theName.focus();
}
}
//-->
</SCRIPT>
<P align="center"><A href="javascript:openWindow('member_panel.php?page=BO_Home','BO_Home')"><IMG src="http://qlx3.net/images/home.png" alt="Home" width="256" height="217"></A></P> ~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster
> This still isn't working. Can someone help?
I am sorry to say this, but you have lost the ability to see things as they are. My first post pointed out the mistakes in your code, my second post was a piece of working code and you still come back and say it isn't working?
If you plan on ignoring our posts and advice, do let us know in advance.
JC4QLx3 0 Newbie Poster
I am sorry. Maybe you missed what I said.
Your code did work fine, but only for one window, not 3. We have 3 windows that the user may choose to have open at the same time. That is why I needed to make a change. I did say that I am a novice and what seems obvious to you is extremely difficult for me. Not only did I NOT ignore you, I also took the advice from the other person and changed 'name' to theName. I must have something wrong, but for the life of me, I can't find it.
<SCRIPT>
<!--
// create a custom window
function openWindow(url, wnd)
{
var theName = null;
theName = wnd;
if (!theName || theName.closed)
{
var windowHeight,windowWidth,windowTop,windowLeft
windowHeight = screen.availHeight;
windowWidth = screen.availWidth;
windowTop = 0;
windowLeft = 0;
var varStore = "";
varStore = varStore + "width=" + windowWidth;
varStore = varStore + ",height=" + windowHeight;
varStore = varStore + ",resizable=" + "1";
varStore = varStore + ",scrollbars=" + "0";
varStore = varStore + ",menubar=" + "0";
varStore = varStore + ",toolbar=" + "0";
varStore = varStore + ",directories=" + "0";
varStore = varStore + ",location=" + "0";
varStore = varStore + ",status=" + "1";
varStore = varStore + ",left=" + windowLeft;
varStore = varStore + ",top=" + windowTop;
varStore = varStore + ",ScreenX=" + windowLeft;
varStore = varStore + ",ScreenY=" + windowTop;
window.open(url,theName,varStore)
}
else
{
theName.focus();
}
}
//-->
</SCRIPT> ~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster
So maybe next time you should place the entire requirement instead of letting us guess whether you want 2 or 3 windows....
<html>
<head>
<script>
var wnd = new Array();
function openit(id)
{
if(!wnd[id] || wnd[id].closed)
wnd[id] = window.open("http://www.google.com");
else
wnd[id].focus();
}
</script>
</head>
<body>
<form>
<input type="button" value="Open1" onclick="openit(0);" /><br/>
<input type="button" value="Open2" onclick="openit(1);" /><br/>
<input type="button" value="Open3" onclick="openit(2);" /><br/>
</form>
</body>
</html> JC4QLx3 0 Newbie Poster
I want to thank you, albeit you were not very friendly, you did continue to help me through creating a successful script. I finally narrowed down the problem to the code regarding the varible for the window attributes (see earlier samples). You did not include that in your second working sample. Normally that code works fine, but not with the code you created. Thanks again!
<script>
var wnd = new Array();
function openWindow(url,id)
{
if(!wnd[id] || wnd[id].closed)
wnd[id] = window.open(url,"","width=screen.availWidth,height=screen.availHeight,resizable=1,scrollbars=0,menubar=0,toolbar=0,directories=0,location=0,status=1,left=0,top=0,ScreenX=0,ScreenY=0");
else
wnd[id].focus();
}
</script> ~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster
The code you pasted above seems to be working for me. What problems do you experience?
<html>
<head>
<script>
var wnd = new Array();
function openWindow(url,id)
{
if(!wnd[id] || wnd[id].closed)
wnd[id] = window.open(url,"" + id, "width=" + screen.availWidth +
",height=" + screen.availHeight +
",resizable=1,scrollbars=0,menubar=0,toolbar=0,directories=0," +
"location=0,status=1,left=0,top=0,ScreenX=0,ScreenY=0");
else
wnd[id].focus();
}
</script>
</head>
<body>
<input type="button" value="Button1" onclick="openWindow('http://www.google.com', 1);" />
<input type="button" value="Button2" onclick="openWindow('http://www.google.com', 2);" />
<input type="button" value="Button3" onclick="openWindow('http://www.google.com', 3);" />
</body>
</html> JC4QLx3 0 Newbie Poster
No problem at all. Yes, it works very well. I was simply thanking you and informing you of our success with the code.
~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster
Glad I could be of some help.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.