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.
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.
where:
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:
"toolbar=yes,scrollbars=yes,height=400,width=300"
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("secondary.html");
|
|
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");
myWin.moveTo(400,350);
|
|
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.moveTo(200,200);
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.moveTo(200,200);
win7.document.write("<h3>Hello World</h3>");
}
function winWrite7()
{
win7.document.write("Write some more.<br/>");
win7.focus();
}
|
|
Close a secondary window from main window.
var win8;
function winOpen8()
{
win8 = open("", "", "height=200,width=300");
win8.moveTo(200,200);
win8.document.write("<h3>Hello World</h3>");
}
function winClose8()
{
win8.close();
}
|
|
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.
window.onload=init;
function init()
{
var btnWriteBack = document.getElementById("btnWriteBack");
btnWriteBack.onclick=WinOpen9;
}
function WinOpen9( )
{
var Win9 = open("", "", "height=200,width=300,status=yes");
Win9.moveTo(200,200);
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\"'" +
"</body></html>";
Win9.document.write(Page);
}
<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();
NewWindow.focus();
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();
NewWindow.blur();
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();
NewWindow.close();