JavaScript Window Function guide-open a new window

When you click a simple link to open a new window, you do not have any control over the new window. The browser opens a new window with the default function. In addition, you cannot use JavaScript to reference the window object of the new window, so you cannot manipulate the properties of the new window. Take a look at the following JavaScript statement:

Window. open ("http://www.docjs.com/", "win ");

This statement opens a new window, showing the page http://www.docjs.com /. The name of the new window is assigned "win ". The basic syntax of the open () method of the window object is:

Window. open (sURL, sName );

Both parameters are optional. If you do not want to specify a URL or window name, use an empty string ("").

SURL is a string that specifies the URL of the document to be displayed. If no URL is specified, an empty window is generated. SName is the defined window name, which is used for the TARGET attribute marked by <form> or <a>. In Internet Explorer 5 and later versions, if this value is defined as "_ search", sURL will be opened in the browser's search area.

If the window. open () method is executed twice with the same sName parameter, what will happen? Just like a window generated using HTML, if you define a name for an existing window, the open () method simply uses the existing window instead of opening a new one. Take a look at the following script program:

Window. open ("http://www.javascript.com/", "win ");

Window. open ("http://www.docjs.com/", "win ");

Execute the preceding statement. The browser opens a new window named "win" and displays the page www.javascript.com. The 2th sentence is replaced by a front window containing the webpage www.doc js.com. The following statements generate two different windows to display their respective content:

Window. Open ("http://www.javascript.com/", "win1 ");

Window. Open ("http://www.docjs.com/", "win2 ");

If the new window name is not specified, the browser automatically generates a new window. This applies to "_ blank", but empty strings are another thing. There are several important differences between Internet Explorer and Navigator:

Window. Open ("Http://www.cnn.com /"); Window. Open ("Http://www.usatoday.com /");
Internet Explorer	Navigator
Open two different windows	Open two different windows

Window. Open ("Http://www.cnn.com/", "_ blank"); Window. Open ("Http://www.usatoday.com/", "_ blank");
Internet Explorer	Navigator
Open two different windows	Open two different windows

Window. Open (Http://www.cnn.com /",""); Window. Open (Http://www.usatoday.com /","");
Internet Explorer	Navigator
Open two different windows	Only one window is opened and the name is blank ("")

The following line will not be used, but will be listed. If you want to name the window, give a name that is understandable (not ""). If you do not want to name it, simply do not specify this parameter, or use the special target location "_ blank ".

One important thing about the open () method is that the open () method is almost always called and executed in the form of window. open (), even if window represents a global object and can be completely omitted. Because the Document Object also has the open () method, it is necessary to specify the window object when we want to open a new window. In event processing, you must specify window. open (), rather than simply using open (). Because of the limited scope of static objects in Javascript, the open () call without specifying the object name is equivalent to document. open (). For example, when an HTML button event is processed, the range includes the button object, form object, document object, and window object. In this way, if such an event processor references the open () method, the reader will stop in the document object, and the event processor will open a new document instead of a new window.

Return Value
In order to reference the Child Window appropriately, the results of window. open () should be allocated to a variable. If the window is successfully created, window. open () returns the new window object, or null, indicating that the creation failed (for example, due to insufficient memory ). If your script needs to reference elements in the new window, the return value is very important. However, when a new window is opened, no "Parent-Child" relationship exists. Let's look at the following statement:

VaR recenttips = Window. Open ("http://www.docjs.com/tips/", "Tips ");

Here, we assign a variable value named recentTips to the window object in the new window. If you call the window. open () method in a function, remember to omit the var keyword because the variable should be global. Otherwise, the window is referenced in a local variable and cannot be accessed after the function is executed. The following statement shows the URL of the new window in an alert dialog box:

Alert (recentTips. location. href );

You can also change the URL of the new window through the following method:

RecentTips. location. href = "http://www.usatoday.com /";

In the previous section, you have seen how to use HTML links and forms to open a new window. By specifying the target attribute or assigning a value to the name attribute of the window object, we can name the window. But how can we use its html name to reference an existing window? The answer is simple. If you execute the URL parameter with an empty string and the window. open () method with the window name, the reference of this window will be returned. Take a look at the following link code:

<A href = "http://www.cnet.com/" TARGET = "news"> CNET </A>

When the following statement is executed, a reference to the new window is obtained:

Var latestNews = window. open ("", "news ");

Let's try again. Click the link CNET, but after it is loaded, click the following button:

This button actually retrieves the reference of the window named "news" and modifies the URL of the window. Note: If you do not click the link before clicking the button, a new and empty window will be loaded (because the specified window name does not exist ). Remember, no matter what the document is in the window, the window keeps its name. The following are the HTML and JavaScript code related to this button:

<Script language = "JavaScript">

<! --

Function changeurl (winname, newurl ){

Win = Window. Open ("", winname );

Win. Location. href = newurl;

}

// -->

</SCRIPT>

<Form>

<Input type = "button" value = "load zdnet"

Onclick = "changeurl ('News', 'HTTP: // www.zdnet.com/')">

</Form>

The preceding script shows how to obtain a reference with an existing window. If you only want to change the URL of a window, you can also directly use the URL of the target page to call the window. open () method:

Function changeurl (winname, newurl ){

Win = Window. Open (newurl, winname );

}