Open new window with JS

[Peter Aitken]

I want to include a button that has rollover effects and also is a link to a
page that will open in a new window. Here's the code I am using:

<A
HREF="javascript:window.open('email_me.htm','','scrollbars=0,menubar=0,heigh
t=260,width=400,toolbar=0');"
ONMOUSEOVER="changeImagesX('EmailMe_Layer_1',
'images/EmailMe_Layer-1-over.gif'); return true;"
ONMOUSEOUT="changeImagesX('EmailMe_Layer_1', 'images/EmailMe_Layer-1.gif');
return true;">
<IMG NAME="EmailMe_Layer_1" SRC="images/EmailMe_Layer-1.gif" BORDER=0
width="140" height="25"></A>

Everything works OK - the rollovers work and when the button is clicked the
new window opens. The problem is that the original window goes blank and
displays only the text [object]. How can I do what I want and have the
original window retain its contents?

You can see this at http://www.pgacon.com/testpage.htm

 

[Lee]

Peter Aitken said:

I want to include a button that has rollover effects and also is a link to a
page that will open in a new window. Here's the code I am using:

<A
HREF="javascript:window.open('email_me.htm','','scrollbars=0,menubar=0,heigh
t=260,width=400,toolbar=0');"
ONMOUSEOVER="changeImagesX('EmailMe_Layer_1',
'images/EmailMe_Layer-1-over.gif'); return true;"
ONMOUSEOUT="changeImagesX('EmailMe_Layer_1', 'images/EmailMe_Layer-1.gif');
return true;">
<IMG NAME="EmailMe_Layer_1" SRC="images/EmailMe_Layer-1.gif" BORDER=0
width="140" height="25"></A>

Everything works OK - the rollovers work and when the button is clicked the
new window opens. The problem is that the original window goes blank and
displays only the text [object]. How can I do what I want and have the
original window retain its contents?

The HREF attribute tells the link what to display in the current
window. You're telling it to display the value returned by the
javascript method "window.open(...)". That value is a window
object, which displays as "[object]".

If you don't want to display the value of a Javascript expression,
don't use the "javascript:" protocol. If you don't want to change
the contents of the current window at all, have the onclick handler
of the link return false.

This also makes it possible for people to use the link if they
don't have Javascript enabled.

<a href="email_me.htm"
onclick="window.open('email_me.htm','validName','height=260,width=400);return
false"
onmouseover="changeImagesX('EmailMe_Layer_1','images/EmailMe_Layer-1-over.gif');
return true;"
onmouseout="changeImagesX('EmailMe_Layer_1','images/EmailMe_Layer-1.gif');
return true;"><img
name="EmailMe_Layer_1"
src="images/EmailMe_Layer-1.gif"
border="0"
width="140"
height="25"></A>

 

[Peter Aitken]

Peter Aitken said:

I want to include a button that has rollover effects and also is a link to a
page that will open in a new window. Here's the code I am using:

<A
HREF="javascript:window.open('email_me.htm','','scrollbars=0,menubar=0,heig

h

t=260,width=400,toolbar=0');"
ONMOUSEOVER="changeImagesX('EmailMe_Layer_1',
'images/EmailMe_Layer-1-over.gif'); return true;"
ONMOUSEOUT="changeImagesX('EmailMe_Layer_1', 'images/EmailMe_Layer-1.gif');
return true;">
<IMG NAME="EmailMe_Layer_1" SRC="images/EmailMe_Layer-1.gif" BORDER=0
width="140" height="25"></A>

Everything works OK - the rollovers work and when the button is clicked the
new window opens. The problem is that the original window goes blank and
displays only the text [object]. How can I do what I want and have the
original window retain its contents?

The HREF attribute tells the link what to display in the current
window. You're telling it to display the value returned by the
javascript method "window.open(...)". That value is a window
object, which displays as "[object]".

If you don't want to display the value of a Javascript expression,
don't use the "javascript:" protocol. If you don't want to change
the contents of the current window at all, have the onclick handler
of the link return false.

This also makes it possible for people to use the link if they
don't have Javascript enabled.

<a href="email_me.htm"
onclick="window.open('email_me.htm','validName','height=260,width=400);retur
n

false"

onmouseover="changeImagesX('EmailMe_Layer_1','images/EmailMe_Layer-1-over.gi
f');
return true;"
onmouseout="changeImagesX('EmailMe_Layer_1','images/EmailMe_Layer-1.gif');
return true;"><img
name="EmailMe_Layer_1"
src="images/EmailMe_Layer-1.gif"
border="0"
width="140"
height="25"></A>

Thanks for the info, Lee - it helped but it is still not right - the new
page opens in the original browser window instead of a new window. Here's
the code:

<a href="email_me.htm"
onclick="window.open('email_me.htm','validName','height=260,width=400);retur
n false;"
onmouseover="changeImagesX('EmailMe_Layer_1','images/EmailMe_Layer-1-over.gi
f');return true;"
onmouseout="changeImagesX('EmailMe_Layer_1','images/EmailMe_Layer-1.gif');re
turn true;">
<img name="EmailMe_Layer_1"
src="images/EmailMe_Layer-1.gif"
border="0"
width="140"
height="25"></A>

The test page is still at www.pgacon.com/testpage.htm

Any other ideas? Thanks-

 

[Lee]

Peter Aitken said:

Thanks for the info, Lee - it helped but it is still not right - the new
page opens in the original browser window instead of a new window. Here's
the code:

<a href="email_me.htm"
onclick="window.open('email_me.htm','validName','height=260,width=400);retur
n false;"
onmouseover="changeImagesX('EmailMe_Layer_1','images/EmailMe_Layer-1-over.gi
f');return true;"
onmouseout="changeImagesX('EmailMe_Layer_1','images/EmailMe_Layer-1.gif');re
turn true;">
<img name="EmailMe_Layer_1"
src="images/EmailMe_Layer-1.gif"
border="0"
width="140"
height="25"></A>

I made a typo that causes the window.open() call to fail, which
causes the "return false" to never be executed, allowing the
link to be followed, opening the page in the current window.

There should be a closing single-quote after the window attributes:

window.open('email_me.htm','validName','height=260,width=400');returen false

 

[Richard Cornford]

Lee wrote:

<a href="email_me.htm"

onclick="window.open('email_me.htm','validName','height=260,width=400);
^ ^
Error: unterminated string constant.

return false;"

Any other ideas?

Read (and understand) the error messages that the browser generates.

Richard.

 

[Peter Aitken]

Peter Aitken said:

r
i
e

I made a typo that causes the window.open() call to fail, which
causes the "return false" to never be executed, allowing the
link to be followed, opening the page in the current window.

There should be a closing single-quote after the window attributes:

window.open('email_me.htm','validName','height=260,width=400');returen false

Yikes, I should have caught that myself! Thanks a lot - it's been a big
help.

 

[Peter Aitken]

onclick="window.open('email_me.htm','validName','height=260,width=400);
^ ^
Error: unterminated string constant.



Read (and understand) the error messages that the browser generates.

Richard.

Ah, but it did not generate any error messages! In any event the problem is
fixed now.

 

[Mick White]

Peter Aitken wrote:

Ah, but it did not generate any error messages! In any event the problem is
fixed now.

Yes it did.
Mick