Opening Windows

Cool Stuff with Windows

Whenever you see a web page, you are seeing a window. Every web page contains one or more windows. You can create new windows with different sizes and control the contents of each individual window with JavaScrpt. In this lesson, we will learn about the window location, how to open new windows like remote controls and learn a little about functions.

The Window
In order to load a window with JavaScript you simply specify a location of one you want to open. You change the current URL when you change the location property of the current window. Location is a property of the window which as you can see in is written in JavaScript as window.location. The following script opens a new browser window just the same as if you typed in the url into your browser's location box.

It is a pretty useless script but it does show you the basic structure of how to load a window. All the other scripts in this chapter will be based upon this simple foundation. It transfers you to a page that you specify. Here in this simplest example, we are opening a new window for the site www.modemswitch.com.

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT>

Click a Button
It is easy to open a new window with a form and an event handler. Although most expert designers wouldn't use clunky buttons unless they had some compelling reason to do so, they still can be useful. Maybe if you are creative you can find some cool uses for them. They do load fast because there are no graphics to load and they do scream "CLICK ME." Event handlers on the other hand are something you use all the time. Here we show an example of how to use the onClick event handler. Anyway...here's how you open a new window with a form and an event handler:

<HTML>
<BODY>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Go to ModemSwitch"
onClick="window.location='http://www.modemswitch.com'";
</FORM>
</BODY>
</HTML>

The Missing Link
Of course, you are wondering by now..."How do you open a new window with a link using JavaScript?" right? Is there a method in this madness? One way to open a window with a link is to use a JavaScript method. This time the event handler is separated from the script so there are two steps to make it happen. The first thing we need to do is to write the JavaScript in the head of the document:

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Then in the body we use the link:

<A HREF="#" onClick="openWin();">
Go to Example</A>

or if you prefer you can use:

< A HREF="javascript:openWin();">
Got to Example</A>

The first thing we do is need to do write the function openWin() which we will use later in the BODY of the document with the event handler to open the new window. Instead of using the property window.location like we did in the last example, we use window.open() which is a method of the current window. A method is similar to a function except it is attached to an object. The object in this example is the current window . The method which opens the window is window.open(). We can also pass other properties to the window such as the size, whether we want toolbars or scrollbars, as well as other things as we will see in a minute. Initially I just kept it simple to make the concept easier to grasp. We will keep adding to this basic structure. In the next example, we will size the window:

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

In order to specify the height and the width of the window we want to open, we have to give it a target to go to. Here I used "rob", which is my name ( I could have used any name for the target).

In the next example, I added a toolbar (toolbar is a property of window.open() ) and made the windows height and width 250 pixels so we could see it.

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

The properties of window.open() are:

Properties Value Examples Controls

File name the name of the file http://www.modemswitch
index.html The file to be opened in the window.

Target name the name of the target _top
mytarget The name of the target window.

menubar yes/no yes
no
1
0 If the new window has a menubar or not.

resizable yes/no yes
no
1
0 Whether or not the visitor is allowed to resize the window or not.

scrollbars yes/no yes
no
1
0 If the new window will have scrollbars or not

status yes/no yes
no
1
0 If the window will have a status bar at the bottom or not.

toolbar yes/no yes
no
1
0 If the new window has a toolbar or not.

width number 200
300
278 How many pixels the new window is wide.

height number 200
300
278 How many pixels the new window is tall.

Here is an example of the same script except the link uses the <A HREF="javascript:open();">Open</A> to open the page.

Tip: With Netscape 4+ browsers, you can create a window that is always "on top" by adding the code alwaysRaised=yes to the window opening code in the same place as we defined the width and height.

Two windows with one argument
What if you want to open two different urls from two different links? It's easy. All we need to do is to modify the argument so it takes the name of the page as an argument. In the upcoming example we name it URL. In the previous example we included the URL of the page we wanted to open. Here, instead of including the URL, we put a variable in its place. The variable URL is placed where the static URL was. Since we pass the name of the page to the function as the variable URL, it will load the page we call openWin() in the links on our page. Here is the code:

<HTML>
<TITLE>Two Pages</TITLE>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</HEAD>
<BODY>

<A HREF="#" onClick="openWin('rob1.html');">
Go to Rob 1</A>

<A HREF="#" onClick="openWin('rob2.html');">
Go to Rob 2</A>

</BODY>
</HTML>

There are undoubtedly different ways of opening windows but I hope this simple examples will give you some experience to build on.

Properties	Value	Examples	Controls
File name	the name of the file	http://www.modemswitch index.html	The file to be opened in the window.
Target name	the name of the target	_top mytarget	The name of the target window.
menubar	yes/no	yes no 1 0	If the new window has a menubar or not.
resizable	yes/no	yes no 1 0	Whether or not the visitor is allowed to resize the window or not.
scrollbars	yes/no	yes no 1 0	If the new window will have scrollbars or not
status	yes/no	yes no 1 0	If the window will have a status bar at the bottom or not.
toolbar	yes/no	yes no 1 0	If the new window has a toolbar or not.
width	number	200 300 278	How many pixels the new window is wide.
height	number	200 300 278	How many pixels the new window is tall.