Creating a New Window with JavaScript

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", code continues on next line
"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:

menubar Specifies whether or not to display a menu bar at the top of the window.Value = yes or no, 1 or 0.
toolbar Specifies whether or not to display the main toolbar (with the back, forward, stop etc. buttons).Value = yes or no, 1 or 0.
location Specifies whether or not to display the location bar (the Address Bar in Internet Explorer) – where URLs are typed and displayed.Value = yes or no, 1 or 0.
directories Specifies whether or not to display any additional toolbar (e.g the Links Bar in Internet Explorer).Value = yes or no, 1 or 0.
status Specifies whether or not to display the status bar at the foot of the window.Value = yes or no, 1 or 0.
scrollbars Specifies whether or not to display the horizontal and vertical scrollbars that normally appear when the page content is larger than the screen.Value = yes or no, 1 or 0.
height Specifies the height of the window in pixels.Value = number
width Specifies the width of the window in pixels.Value = number
left Specifies the distance in pixels of the new window from the left edge of the screen. (This applies to Internet Explorer. For Netscape Navigator use screenX).Value = number
top Specifies the distance in pixels of the new window from the top edge of the screen. (This applies to Internet Explorer. For Netscape Navigator use screenY).Value = number
resizable When enabled, allows the user to manually resize the window by dragging its edges or corners.Value = yes or no, 1 or 0.
fullscreen When enabled causes the window to open in full-screen mode (Internet Explorer only.)Value = yes or no, 1 or 0.

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.

Advertisements

1 thought on “Creating a New Window with JavaScript”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s