Web Development Tutorials


Window Methods

Windows have methods that become available through the window object when a new window is opened. These methods are listed in the following table. The alert(), prompt(), and confirm() methods have been discussed previously. Several of the methods pertain to secondary windows and are discussed later.

Method Description
window.alert() Opens an alert message box and displays a text string.
window.prompt() Opens a prompt message box and returns entered value.
window.confirm() Opens a confirm message box and returns true or false.
window.open() Opens a secondary window.
window.focus() Brings focus to a window. When working with secondary windows, brings the window to the foreground.
window.blur() Removes focus from a window. When working with secondary windows, moves the window to the background.
window.close() Closes an open window.
window.print() Presents the print dialog box to print the window contents.

Figure 7-8. Methods of the window object.

Opening Windows

The open() method opens a new browser or secondary window. This method includes numerous parameter values that control the look and functionality of the newly opened window.

A secondary window overlays the main browser window. It is used for opening a different Web page or creating a new Web page under script control. Secondary windows are created with an open() statement in the following general format,

[var variable =] open("url","window_name","window_settings")
Figure 7-11. General format to open a secondary window.


variable a name assigned to the window for reference from a different window.
url the location of the XHTML document to load into the secondary window.
window_name a name you supply for the window. This name is used to reference the window within <iframe> and <a> (anchor) tags. You can code a null value ("") if this reference is not needed.
window_settings  characteristics of the window. If you do not include these settings, a standard browser window is created. Otherwise, you can include any of the following parameters, separated by commas and including no blank spaces in the list:
toolbar=yes|no - display the browser's toolbar
location=yes|no - display the browser's location, or address bar
directories=yes|no - display the browser's directory buttons bar
status=yes|no - display the browser's status bar
menubar=yes|no - display the browser's menu bar
scrollbars=yes|no - display necessary window scroll bars
resizable=yes|no - permit user to resize the window
width=n - horizontal width of the window in pixels
height=n - vertical height of the window in pixels
fullscreen=yes|no - open the window full screen with no features

The set of parameters you choose to code must be enclosed in a single set of quotes and separated by commas:


If you code any one of these settings, the remaining are considered to be voided and you need to specify any others you wish to use.

The following scripts give examples of opening secondary windows for display of a Web page.

Description and Script Result
Open a secondary window with full features.
Open a sized secondary window with only the menu bar showing.
  open("secondary.html", "", "width=300,height=100,menubar=yes");
Open a sized secondary window with only the tool bar and menubar showing.
  open("secondary.html", "", "width=400,height=200,toolbar=yes,menubar=yes,scrollbars=yes");
Open a secondary window and position it on the screen.
  var myWin = open("Secondary.htm", "", "width=200,height=100");

Open a full-screen secondary window with no features.
  open("secondary.html", "", "fullscreen=yes")

Figure 7-12. Examples of opening secondary windows.

By coding the window moveTo(h,v) method you can position the window at an exact horizontal (h) and vertical (v) pixel location on screen, measured from the top-left corner. This method is issued after the window is opened, and the window needs to be assigned a name for reference in the moveTo() method. Moving a window is illustrated in the fourth example above.

In all but the last example above, secondary windows are opened with a Title Bar and full chrome around the window, irrespective of other features that may be requested. When specifying fullscreen=yes in the window settings, however, the Web page occupies the entire screen without a title bar or border. Without the Title Bar there is no Close Box! There is no way to close the window to return to the original browser window. It is important, therefore, that you provide a way to close the window on the page itself.

You can created a button on the secondary page that closes the window. As shown in the following code, a button executes the window's close() method, referring to the window itself as the target for closure. This method is used on the page opened in all the example secondary windows.

<input type="button" value="Close Window" onclick="self.close()"/>

Writing to a Secondary Window

You can open a blank document in a secondary window for the purpose of writing to the window from a script with the document.write() method. The window must be assigned to a variable for script reference when writing.

Description and Script Result
Open and write to a secondary window; no existing document is loaded.
  function WinOpen6()
    var win6 = open("", "", "height=200,width=300");
    win6.document.write("<h3>Hello World</h3>");
    win6.document.write("<input type='button' value='Close' onclick='self.close()'/>");

Write to an existing secondary window. Window is assigned to a global variable for reference from different functions. The focus() method brings the secondary window to top of all open windows. Click the write button several times.
  var win7;
  function winOpen7()
    win7 = open("", "", "height=200,width=300");
    win7.document.write("<h3>Hello World</h3>");
  function winWrite7()
    win7.document.write("Write some more.<br/>");

Close a secondary window from main window.
  var win8;
  function winOpen8()
    win8 = open("", "", "height=200,width=300");
    win8.document.write("<h3>Hello World</h3>");
  function winClose8()

Figure 7-13. Examples of writing to secondary windows.

Writing to an Opener Window

A reference back to the original window from a secondary window is through window.opener, a reference to the window from which the secondary window is opened. Scripts can write from a secondary window back to this opener window.

Figure 7-14. Writing to an opener window.


function init()
var btnWriteBack = document.getElementById("btnWriteBack");

function WinOpen9( )
  var Win9 = open("", "", "height=200,width=300,status=yes");
  var Page = "<!DOCTYPE HTML>"+
	"<html>" +
	"<head>" +
	"<title>Secondary Window</title>" +
	"</head><body>" +
    "<h3>Hello  World</h3>" +
    "<input type='button' value='Write to Opener' " +
    "onclick='window.opener.document.getElementById(\"MSG\").innerHTML=" +
    "\"Goodbye World\"'" +

<input type="button" value="Write Back" id="btnWriteBack">
<span id="MSG" style="color:red; font-size:1.2em; font-weight:bold"></span>

Listing 7-9. Code to write to an opener window.

The secondary page is created entirely with script in variable Page. Three comments are in order. First, the backslash characters surrounding \"MSG\" and \"Goodbye World\" when constructing the page string are required because of the nested quoting. The Page string itself uses double quotes to enclose the <input> tag that it writes to the page. The onclick event hander inside this tag, in turn, uses single quotes to differentiate from these outer double quotes. Therefore, the quotes surrounding strings inside these string have to be preceded by the escape character "\" to differentiate from the enclosing single quotes and enclosing double quotes.

Second, the object reference to the <span> message area on the orginal page, document.getElementById(\"MSG\").innerHTML, must be prefixed with window.opener to identify the window to whose document to write. Without this prefix, text is written to the default secondary window rather than the opener window.

Detecting Popup Blockers

If users have enabled popup blockers in their browsers, then secondary windows may not open properly, being blocked by the software. Certain browsers may indicate this condition through an information bar appearing at the top of the browser window. A choice is provided to temporarily override the blocking, in which case the secondary window is permitted to open.

A script also can check for a blocked secondary window and produce a personalized response to the situation. The following script gives an example of attempting to open a secondary window and encountering a popup blocker.

function OpenWindow()
  var WinTest = window.open("Secondary.htm", "", "");
  if (! WinTest) {
    alert("A popup blocker was detected. Please\n" +
          "disable popup blocker to open window.");

Listing 7-10. Code to detect popup blocker.

The opened window is assigned to a variable (WinTest). If the window is not blocked, then the variable is created; if the window is blocked, the variable is not created. The if statement tests for the absence of the variable and displays an alert message if the window was not created. The test if (! WinTest) reads, in effect, "if WinTest does not exist."

After clearing the alert message the user can choose to permit blocked windows and retry display of the secondary window. Otherwise, the window does not get displayed and an alternate to secondary windows may be provided for these users.

Window Focus

When a new window is opened using the open() method, the window.focus()method can be used bring focus to the window or bring the current window to the foreground.

var NewWindow = window.open();

Window Blur

The blur()method can be used to remove focus from a window or bring the current window to the background.

var NewWindow = window.open();

Printing Pages

Printing of the current Web page can be activated under script control. The print() method opens the standard printer dialog box in the same way that it is chosen from the browser's File menu.

Often times a "printer friendly" version of a page is provided as an alternative to the page as viewed in the browser using CSS media types. When the print() method is run, the print dialog box is displayed permitting the user to print the "printer friendly" version.

Closing a Window

The close()method can be used to close a secondary window.

var NewWindow = window.open();

TOP | NEXT: The location Object