Welcome to WebmasterWorld Guest from 34.231.21.123

Forum Moderators: open

Message Too Old, No Replies

What's the code for opening a new window?

     
2:22 pm on Oct 30, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Mar 27, 2004
posts:276
votes: 0


I know this one is simple I just cant remember the code to do it. I want to open a new window when you click on a link. Can anyone post the code here for me. I have the one for closing the window just not forcing a new one.
Pat
3:06 pm on Oct 30, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 1, 2003
posts:630
votes: 0


<a href="http://www.widgets.com/" target="new"></a>

or with java,

<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=400,height=500,scrollbars=yes');
return false;
}
//-->
</SCRIPT>

The java above goes in head

<a href="http://www.widgets.com/" onClick="return popup(this, 'notes')">

3:12 pm on Oct 30, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Mar 27, 2004
posts:276
votes: 0


Thank-you very much i could not remember if it was new or blank or what
Pat
3:42 pm on Oct 30, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 1, 2003
posts:630
votes: 0


Your welcome!
4:21 pm on Oct 30, 2005 (gmt 0)

Senior Member

joined:May 21, 2002
posts:762
votes: 0


<a href="http://www.widgets.com/" target="_blank"></a>

... works as well.

8:12 pm on Oct 30, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Many JS open commands have two downfalls, one, if Javascript is disabled, the visitors get nothing. Two, if you leave the first pop-up open and go back to the main window and click another pop-up link, the new URL/image loads in the same window which is now BEHIND the main window (thus invisible,) leaving the visitor with "nothing happened, what the heck" in their head.

The solution to the first is to use a regular link to the resource, and put the call to the routine in an onClick event and return false after the call. This tells Javascript NOT to actually allow the page to move to the resource. If Javascript is disabled, the inverse will happen and at least they can access your content.

The solution to the second is to make sure windowname is a unique value. This feature is far underused. By basing the new window name (which is really a window ID) on a value we get from the current time, a new window will open EVERY time the link is clicked.

Additionally you can structure your link so it can pass an image OR a URL, and the parameters (width, height, etc) do not need to be specified as true or false, yes or no. Include them if you want them, leave them out if you don't, as in

scrollbars,resizable

instead of

scrollbars=yes,resizable=yes

And always ALWAYS include the resizable parameter, there are many other worlds than these.* :-)

<!--
pass size OR image, a window size, and a TITLE (not window name.)
Note in the first the param for image is blank,
in the second the param for url is blank.
If the resource is an image, pass the size of the large image - the window will be padded by the JS
-->

<a href="myurl.html" onClick="newWin('my_url.html','','My Title',500,500); return false;">My URL</a> <br>

<a href="my_image.jpg" onClick="newWin('','my_image.jpg','Title of my Image',600,450); return false;"><img src="my_image_thumbnail.jpg" width="150" height="75" border="0" alt="Click to see enlargement"></a> <br>

<script language="text/javascript">
function newWin(url,img,title,w,h) {

if (! (url) &&! (img)) { return; } // squelch errors
// Create a unique window name based on client time
var day= new Date();
var id = day.getTime();
// Add some space from the passed w and h parameters
var ww = w+75;
var wh = h+125;

// You will get less errors by putting the params
// in a variable, like so

var params = 'width='+ww+',height='+wh+',scrollbars,resizable';

// A little flexibility: this can be used to pass
// either a plain image or a url. If a plain image,
// build a little document to hold it in:

if (img!='') {
var msg='<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN" "http:\/\/www.w3.org/TR\/html4\/loose.dtd">\n'+
'<meta http-equiv="Content-Type" content="text\/html; charset=iso-8859-1">\n'+
'<html><head><title>'+img+'<\/title><\/head>'+
'<style type="text\/css">\n'+
' html,body { font-family: Arial,Helvetica,Sans-Serif; text-align: center; }\n'+
'<\/style><body>\n'+
'<h3>'+title+'<\/h3>\n <div align="center"><img src="'+img+'" width="'+w+'" height="'+h+'" border="0" alt="'+title+'"><br>\n'+
<hr width="100%" size="1"><form><input type="button" onClick="javascript:window.close();" value="Close Window">\n'+
'<hr width="100%" size="1"><\/form><\/div><\/body><\/html>\n';

var win = open('',id,params);
win.document.write(msg);
win.document.close();
}
else { var win = open(url,id,params); }

}
</script>

*The Gunslinger, Dark Tower Series

8:28 pm on Oct 30, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


Just to add some more information, the W3C declared 4 "reserved" names for the target attribute, all beginning with an underscore character: "_blank", "_new", "_self" and "_top". These reserved names are associated with specific browser behaviors needed for framesets.

Note the W3C recommendation for for target="_blank"

The user agent should load the designated document in a new, unnamed window.

[w3.org...]

If you use target="new" -- or any other name that's not one of the four reserved target names -- then the browser will load the url into a window with that name. If such a window already exists, then its content gets replaced. If such a window does not exist, a new window will be opened for the url in the anchor and given the name that the target attribute designates.

So you can get a new window with target="new" or target="_new" but it is a NAMED window. If you open the new window with target="blank" it will be an UNNAMED window.