JavaScript Primers #11

Use these to jump around or read it all

The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment

The Concept

This is the first of two primers on opening a new window. This first primer will deal with the JavaScript commands you would use to open a new window. The new window will display a second HTML document.

The second primer will offer you the same effect of the new window, but will show you how to open the window as a function so that the same page contains both windows. You won't have to rely on two HTML pages. One HTML page and a JavaScript will do it all.

Let's get started with the basics.

The Script

window.open('opened.html', 'joe', config='height=300,width=300')

</SCRIPT>

The Script's Effect

You saw the script's effect when the page first loaded. The second window that popped up with the link to HTML Goodies and the link that closed it are what you'll get.

Please note: The script you'll get here will only open the window. The links that appeared were written on the HTML page that filled the new window. I'll get to the links and how they are written to control the main window, as well as close the window itself later.

Deconstructing the Script

PlacementLet's start by talking about the placement of this script. Until now I have always said it's good to place scripts up high in the document so they can run first. When you're dealing with a function, the script goes up in the HEAD commands. Here, I'd like to make a different suggestion.

If you're going to open a second window, put the commands that do it down pretty low in the HTML document. In fact, make them last. The reasoning is simple: the page loads then the new window pops up. If you have the commands first, then the new window pops up before the viewer gets to see what's there. There's a greater chance of the window being closed before it can be used.

That's just my opinion. You can actually place this anywhere in the document. It'll run from anywhere. I think that if the window pops up last, it's more beneficial to your viewers.

window.openIt couldn't be more blatant than that: "window" is the object and "open" is the method that acts upon it. That's the easy part. Now we get to configuring the window.

Configuring the WindowThis is all that good stuff in the instance of the command (that's the parentheses, remember?) Here's the format you need to follow:

('URL of document in window', 'New Window Name', config='New Window Parameters')

Now, here's the command, from above, with the correct elements:

('/legacy/primers/jsp/opened.html', 'joe', config='height=300,width=300')

opened.html is the URL of the page that will appear in the new window. If the page is off of your server you'll need to add the http:// stuff.
joe is the name of the new window. This will be important in a moment.
config= denotes that what follows will configure the window.

The config CommandsThe config commands above will open a new window that is 300 pixels wide by 300 pixels high.

By the way, always make your window a little larger than you need. Many people have screens set at smaller resolutions than you do and the window that fits perfectly for you may not for them.

Note that the "height" and "width" commands above are separated by a comma with no space in between. See how the single quotes surround both the height and width commands? The reason is that those two items are actually subcommands of config, so it all has to run together. If there is a space, the browsers thinks the command has ended. Error.

There are numerous subcommands that work under the config command. "Height" and "width" you already know. They work by adding the number wide by number high in pixels. The remainder of these commands all work by using a "yes" or a "no" to denote whether you want them or not. (You can also use "1" for yes and "0" for no, if you want to write in true JavaScript form, but it's not necessary.)

Here are the commands and what they do. Remember, even if you use every one of these, be sure to run them all together just like the height and width. A space equals an error.

toolbar= denotes if there will be a toolbar on the newly opened window.
The toolbar is the line of buttons at the top of the browser window that contains BACK, FORWARD, STOP, RELOAD, etc.
menubar= denotes if there will be a menubar.
The menubar is the line of items above labeled FILE, EDIT, VIEW, GO, etc.
scrollbars= denotes if there will be scrollbars or not. I wouldn't make a new window that would need scrollbars anyway. I think it kills the effect.
resizable= denotes if the user can change the size of the window by dragging or not.
location= denotes if there will be a location bar on the newly opened window.
The location bar is the space at the top of the browser window where the page URL is displayed.
directories= denotes if there will be a directories bar on the new window.
This is the bar at the top of the browser window that has bookmarks and such.
status= denotes if there will be a status bar.

In case you're wondering whether you can lose the title bar or not, the answer is no. That's a given. You get it, like it or not.

You may be wondering if these commands are properties. No, they're not. If thinking of them as properties helps you remember them, great, think of it that way. But in reality, these little gems are called features. A feature is something that acts as a parameter of a JavaScript event. These little pups are features of the new window that the script opened up.
Still with me? Their names are not as important as your knowing how to use them.

Tags In The New WindowThe new window that pops up is little more than a frame for the HTML document that is posted inside. As you can see from the new window on this page, I made the background a nice greenish blue. Then there were two links.

The first link opened the HTML Goodies page in the main window. This is the code that made it happen:

Whether you knew it or not, the big window has a name, "main". That's why I've been calling main all the way through this primer. There's no need for you to name it main, it's already done from the start for you. It's the default name.

All I did was add the command TARGET="--" to the HREF command and enter "main" for where the page should load.

But what if I wanted the page to load in the small window? Well, what is the name of the small window? In this primer, it's called "joe." Remember that from above? You would simply write the HREF link command so that target pointed to "joe."

You can actually have multiple windows by adding multiple "window.open" commands. Just make sure to give each window a different name. You can have links from window to window as long as you continue to target the links correctly.

Closing The WindowThe second link on the new window closed it. Here's the format to do that:

<A HREF="" onClick="self.close">Click To Close</A>

It's a basic HREF link that points to nothing. See the empty quotes above? Setting it so that the link points to nothing prevents another page from loading. The command that actually closes the window is the onClick="self.close."
"self" is a property of whatever it happens to be sitting on. In this case, it's the new window. The command "close" is a property that does the dirty work.

One More ThingLet's say you wanted to open a window on command rather than having it occur when the person logs in. You can do it and here's the command:

<A HREF="jsp_11.html" onClick="window.open('opened.html', 'joe',
config='height=300,width=300')">Click To Open 'joe'</A>

And here's what you get (if you haven't already, close the second window as this link will attempt to open it):

Click To Open 'joe'

The format is an HREF link pointed toward itself. You see, this main window will stay open. It needs to have a page to load. So, make it reload itself. (I'll show you an even smoother way of doing it when we talk about buttons.)

The onClick command does the work and the instance contains the parameters.

Next primer, we'll get into a very slick way of making one page into two.

What You Have Learned

Your Assignment

I didn't get a chance to show you all the extra little functions that are available in action. So, your assignment is to write a script that opens a new window, incorporating every one of those features. Please make the window 300 pixels high by 500 pixels wide.

There should be two links:

One opens a new page in the main window.
The second should open a new page in the same window.
The page that opens in the same small window should have the links to close the window.

Oh, and make the background yellow (ffff00).

Here's a possible answer
(this will open a new window)

The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment

On To JavaScript Primer #12