Working with Windows: Window Names

Working with Windows

Window Names

When you create a frame-setting document, the NAME attribute of the <FRAME> tag specifies the name of each frame:

<FRAMESET>
  <FRAME NAME="left" SRC="toolbar.html">
  <FRAME NAME="right" SRC="index.html">
</FRAMESET>

The NAME attribute specifies the name of the frame. In our example, the document specifies two frames ("left" and "right"). Within the toolbar.html document, the toolbar's links would look like this:

<A HREF="about.html" TARGET="right">About Us</A>
<A HREF="feedback.html" TARGET="right">Feedback</A>

Note that the <FORM> tag also supports a TARGET attribute, which specifies the target window for the form's response. The <BASE> tag specifies a common target for all of the links (and forms) in a document:

<BASE TARGET="right">

The preceding tag defines a single target for all of the elements on the page. The following HTML elements support targets:

<A>
<AREA>
<FORM>

When used, the <BASE> element must appear within the HEAD of the document, before any elements that refer to an external source. If a <BASE> tag is specified, a link can override its default target by explicitly specifying a different target:

<HEAD>
<BASE TARGET="right">
</HEAD>
<BODY>
<A HREF="table.html" TARGET="_self">Table of Contents</A>
<A HREF="about.html">About Us</A>
<A HREF="feedback.html">Feedback</A> 
</BODY>

As you can see, the target of the first link is "_self" (with a preceding underscore). This special name loads the linked document into the same window the link was clicked in (the active window). The following table lists the special targets in HTML:

Target	Description
`_blank`	Loads the linked document into a new blank window. This window is not named.
`_parent`	Loads the linked document into the immediate parent of the document the link is in.
`_search`	Loads the linked document into the browser's search pane. Available in Internet Explorer 5 or later.
`_self`	Loads the linked document into the same window the link was clicked in (the active window).
`_top`	Loads the linked document into the topmost window.

Now that we know how to work with frame names, let's put them to work with windows. When you specify the target "_blank", a new window pops up. For example, if you want a link to load in a new window, use the following code:

<A HREF="newpage.html" TARGET="_blank">A New Page</A>

The new window isn't named. In other words, it cannot be referenced by TARGET attributes of other elements. But what happens when we use a standard target name? Take a look at the next definition:

<A HREF="newtip.html" TARGET="tip">A New Tip</A>

In this case, we are providing a specific name for the new window. The new window is named "tip", so any other link or form that specifies TARGET="tip" causes the page to load in the same window. If there is no frame or window that matches the specified target, a new window is opened for the link. Take a look at the following example:

<A HREF="https://www.docjs.com/" TARGET="_blank">Home</A>
<A HREF="https://www.docjs.com/tips/" TARGET="_blank">Recent Tips</A>

Go ahead and fool around with these links:

Home
Recent Tips

Click the first link to launch our front page in a new window. Now click the second link to view our latest JavaScript tips in a new window. If you click that link again, yet another window is launched. As you can see, a new window is opened for each click. Let's experiment with the following links:

<A HREF="https://www.docjs.com/" TARGET="main">Home</A>
<A HREF="https://www.docjs.com/tips/" TARGET="main">Recent Tips</A>

Here they are:

Home
Recent Tips

Click the first link to launch our front page in a new window. Now click the second link to view our latest JavaScript tips in the same window (the one that was just opened). The new window is named "main", so any link or form that specifies TARGET="main" loads in the same window.

The name Property

With JavaScript we can discover the name of a window through its name property (IE3+, N2+). We can also set the name property of a frame or window (IE3+, N3+). Let's take a look at the following HTML document (showname.html):

<HTML>
<HEAD><TITLE>Display Name</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
alert('The name of this window is: "' + window.name + '"');
// -->
</SCRIPT>
</BODY>
</HTML>

Take a look at the following links:

<A HREF="showname.html" TARGET="_blank">A New Window</A>
<A HREF="showname.html" TARGET="first">First Window</A>
<A HREF="showname.html" TARGET="second">Second Window</A>
<A HREF="showname.html" TARGET="third">Third Window</A>

The document showname.html consists of a script that displays the name of the window in an alert dialog box. Go ahead and test these links:

A New Window
First Window
Second Window
Third Window

The name property belongs to the window object. It can be used with any window object, including a frame. For example, the following statement sets the name of a frame window:

parent.frames[1].name = "right";

When working with frames, it's easy to access various levels of the window hierarchy. For more details, refer to Window References (November 7, 1999).

HTML doesn't provide a definition that assigns a name to the current window. In other words, it isn't possible to set the name of the current window by providing an HTML definition in the current page. Assigning a value to the window.name property (the name property of the window object) is the only way to set the name of the current window. Let's give it a try. The following code creates a simple button that sets the name of the window:

<FORM>
<INPUT TYPE="button" VALUE="Set Name to myWin" onClick="window.name = 'myWin'">
</FORM>

Now click the button:

Once you've clicked the button, the name of the current window becomes "myWin", and it remains the same unless we assign a different value to the name property. We can include links or forms in other windows that load in the current window by specifying TARGET="myWin". Click the following link to load a demonstration page in a new window:

Demonstration Page

If you previously set the name of the current window by clicking the button, the links in the new window should load in the current window. Here's the code for the links in the new window:

<A HREF="https://www.docjs.com/" TARGET="myWin">Home</A>
<A HREF="https://www.docjs.com/tips/" TARGET="myWin">Recent Tips</A>

For your convenience, use the following button to reset the name of the current window by setting its name property to an empty string (""):

You should be careful not to assign the same name to two different windows. If two windows are assigned the same name, the name is associated with one of the windows, and the other window's name is ignored.

Next: How to open a new window

Produced by Yehuda Shiran and Tomer Shiran

Created: April 10, 2000
Revised: April 10, 2000

URL: https://www.webreference.com/js/tutorial1/names.html

Working with Windows: Window Names

Working with Windows

Window Names

The name Property

Find a programming school near you