• FrontPage Index
• Related Topics:
  New Windows with HTML
  Mutiple Links in the Same Window

Sometimes lines of code can be very long! Where I have had to break a line of code to fit it on the page I have used the symbol to indicate that the line below is a continuation and that the code should be written as a single line

<Blah blah blah 
blah>

should be written:

<Blah blah blah blah>

Creating a New Window with JavaScript

JavaScript gives you the ability to control exactly what the new window looks like, its size, and even its position on the screen.

There are two ways to apply the JavaScript command. You can add a JavaScript function to the HTML of a regular hyperlink, or you can create a JavaScript function that is triggered by an event (such as a click) on an object (such as a piece of text or an image). The latter method is used by those wicked people who cause windows to pop-up all over the place when you leave their sites (grrr!). Let's see how it's done...

Using a Hyperlink

First of all consider the regular hyperlink...

This link will open in a new window created by HTML.

Here's the code...

<a href="testwindow1.htm" target="_blank">new window</a>

Try it out. It opens a page containing a picture and a hyperlink to close it.

You will notice that, using this simple method, the window opens at its default "restore" (i.e. not maximized) size with all its toolbars and other bits and pieces. 

Using Inline JavaScript

Now let's add some JavaScript...

This link will open in a new window created by HTML and JavaScript.

Here the code is a bit more complicated...

<span class="popup" onClick=javascript:window.open("testwindow1.htm", 
"blank","toolbar=no,width=250,height=250")>new window</span>

Although the text "new window" seems to be a hyperlink it isn't. It just looks and behaves like one. The text is enclosed not by the usual <a> tags but by <span> tags. These and the similar <div> tags are used to mark areas of the page that aren't unique in any other way, in this case a few words inside a paragraph, so that they can have attributes applied to them. In this case some formatting to color the text blue and make the mouse cursor display a hand when it is over the text (Find out how to do this!).

I wanted it to look like a hyperlink because it was going to behave like a hyperlink. I couldn't actually use a hyperlink because of what was going to happen next...

Atttached to the text is an onClick event that triggers one of the standard JavaScript functions, window.open. This function can have three parameters applied to it, and these control exactly what happens when the new window opens:

window.open("URL","name","attributes")

This is where you get to be creative with your windows. Here's what the various bits mean...

"URL": This is the address of the page that you want to open in the new window.

"name": This is a name of your choice. The purpose of providing a name is that you can then refer to it elsewhere. You might want a subsequent hyperlink to open in the same window you just created, replacing the earlier page. Your user doesn't have to shut down each window when they have finished with it. They just switch back when its contents change. You can leave out the name if you like, just type empty quotes: "". 

"attributes": These are a set of instructions that tell the browser how to display the window. In the above example I have used toolbar=no which, when used alone tells the browser to open a basic window without toolbars, scroll bars, status bars etc. I have also specified an exact size by including width=250 and height=250, the numbers referring to pixels.

Here is a list of the more commonly used window attributes:

You will find that when, for example, you specify toolbar=no that other objects (location, menubar, scrollbars etc.) get switched off too. If you want to see any of them in your new window you will have to ask for them specifically.

Now for some examples...

• This link will open a new window in fullscreen mode. Note that I have provided the user with a link to close the window (Find out how!) - very important for those who don't know their keyboard shortcuts! Here's the code...

<span class="popup" onClick=javascript:window.open("testwindow2.htm", 
"blank","fullscreen=yes")>new window</span>

This link will open a new window of a specific size at the top left corner of the screen. Here's the code...

<span class="popup" onClick=javascript:window.open("testwindow3.htm", 
"blank","toolbar=no,width=180,height=250,top=0,left=0")>new window</span>

Creating a New Window with a JavaScript Function

Sometimes it is more appropriate to put a JavaScript function in the HTML header, and then trigger it with something (such as an onClick event) in the body of the document itself. This has the advantage that the function can be activated from several different places on the page, but only has to be written once. It also allows you to be more creative with the JavaScript. Here's an example...

This link will open a new window created by a JavaScript function.

The link itself uses this code...

<span class="popup" onClick="makenew()">new window</span>

Nice and simple! A piece of text made to look like a hyperlink (it could have been a picture or some other object) calls a function that I've called makenew() when the user clicks it.

The function itself is contained in the head section of the HTML. You can put it anywhere between the <head> and </head> tags (but not inside any other pair of tags). Here's the function's code...

<script language="JavaScript">
<!--
function makenew()
{window.open("testwindow4.htm","blank","toolbar=no,width=250,height=250")}
--> 
</script>

So, now you know how it's done. Use it sparingly!