window.document
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
Syntax
Creates Instance of Document Object.
window.document.event
window.document.method()
window.document.property
Description
The document property, which is a child object of the Window object, is a core JavaScript object that is created when instances of the <body> tag are encountered. The properties, methods, and events associated with this object are in Table 8.40.
Table 8.40 Event Handlers, Methods, and Properties Used by the Window.document Property
See the entries in this chapter for the Document object for more information on each of these events, methods, and properties.
Example
Listing 8.529 uses the write() method of the document property to write text to the user’s page.
Listing 8.529 Accessing Methods of the document Property
<script language="JavaScript" type="text/javascript">
<!--
// Simply writes out the Hello, World! text
window.document.write("Hello, World!");
// -->
</script>
window.enableExternalCapture()
JavaScript1.2+
Nav4+
Syntax
window.enableExternalCapture(event)
Description
The enableExternalCapture() method of the Window object enables external event capturing of the event that is passed to the method. This method provides the capturing of events in frames loaded from a different server. Before you can enable the capturing of these external events, you must first obtain UniversalBrowserWrite privilege. Obtaining this privilege will send a security dialog box to the user to decide whether to accept the request.
After it has been obtained and the method has been invoked, you use the Window.captureEvents() method to specify the events you want to capture. To remove the ability to capture these events, you can invoke the Window.disableExternalCapture() method. The types of events that can be captured are as follows:
• Event.ABORT
• Event.BLUR
• Event.CHANGE
• Event.CLICK
• Event.DBLCLICK
• Event.DRAGDROP
• Event.ERROR
• Event.FOCUS
• Event.KEYDOWN
• Event.KEYPRESS
• Event.KEYUP
• Event.LOAD
• Event.MOUSEDOWN
• Event.MOUSEMOVE
• Event.MOUSEOUT
• Event.MOUSEUP
• Event.MOVE
• Event.RESET
• Event.RESIZE
• Event.SELECT
• Event.SUBMIT
• Event.UNLOAD
Example
Listing 8.530 enables external event capturing when the document loads.
Listing 8.530 Enabling External Event Capturing
<script language="JavaScript1.2" type="text/javascript">
<!--
// Ask the user for permission to enable the UniversalBrowserWrite
// privilege.
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
// Enable the external capturing of events.
window.enableExternalCapture();
// Specifically capture submit events.
window.captureEvents(Event.SUBMIT);
// -->
</script>
window.find()
JavaScript1.2, JScript3.0
Nav4, IE4
Syntax
window.find()
Description
The find() method of the Window object displays a find dialog box when invoked. This allows a user to search for a string in the page from which it was invoked.
Example
Listing 8.531 has a function that pops up a Find box when it is called.
Listing 8.531 A Find Box That Can Be Used to Search for Text in the Document
<script language="JavaScript1.2" type="text/javascript">
<!--
// Displays the Find window.
function mySearch(){
window.find();
}
// -->
</script>
window.focus()
JavaScript1.1+, JScript1.0+
Nav3+, IE3+, Opera3+
Syntax
window.focus()
Description
The focus() method of the Window object places focus on the window. Be careful when using this method in conjunction with the blur() method of objects. It can lead to a focus/blur loop, where the browser blurs a focus as soon as it is done, and vice versa.
Example
Listing 8.532 has a button. When the user clicks the Open button, a second, smaller window is opened, and the focus is placed back on the parent window.
Listing 8.532 Using the focus() Method to Remove Focus from a Window
<html>
<head>
</head>
<script language="JavaScript" type="text/javascript">
<!--
// Define the openWin() function.
function openWin(){
// Create variables to hold the various options that can be set
// when a new Window instance is created.
var myBars = 'directories=no,location=no,menubar=no,status=no';
myBars += ',titlebar=no,toolbar=no';
var myOptions = 'scrollbars=no,width=400,height=200,resizeable=no';
var myFeatures = myBars + ',' + myOptions;
// Open a child window.
newWin = open('', 'myDoc', myFeatures);
newWin.document.writeln('Here is the child window'),
// Close the stream to the document.
newWin.document.close();
// Return focus to the parent window.
self.focus();
}
// -->
</script>
<body>
<form>
<input type="button" value="Open" onclick='openWin()'>
</form>
</body>
</html>
window.forward()
JavaScript1.2+, Jscript3.0
Nav4+, IE4+
Syntax
window.forward()
Description
The forward() method of the Window object simulates the user clicking the Forward button on the browser. It returns the browser’s page or frame to the next page or frame in its history.
Example
Listing 8.533 has two buttons. One of the buttons takes the browser back one page and the other button takes it forward. Note that there has to be a back and forward page during your session for the button to have somewhere to go.
Listing 8.533 Using the forward() Method to Take the User to the Next Page in His History
<html>
<body>
<form>
<input type="button" value="Back" onclick="window.back()">
<input type="button" value="Forward" onclick="window.forward()">
</form>
</body>
</html>
window.frames
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
Syntax
window.frames["frameName"]
window.frames[num]
Description
The frames property of the Window object contains an array that stores each frame instance, created with the <frame> tag, in a document. Array entries of the child frame can be referenced either by index number or by the name assigned by the name attribute of the <frame> tag.
Example
Listing 8.534 uses the length property of frames array and a for loop to access the name of each frame in the window. This information is then written to the document window.
Listing 8.534 Example of Using the frames Property
<script language="JavaScript" type="text/javascript">
<!--
// Use a for loop to write out the name of each frame.
for(var i = 0; i <= window.frames.length; i++){
newWin.document.write("The name of frame #" + i);
newWin.document.write(" is " + window.frames[i].name + "<br>");
}
// -->
</script>
window.frames.length
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
Syntax
window.frames["frameName"].length
window.frames[num].length
Description
The length sub property of the frames property of the Window object contains the number of frame instances in a document created with the <frame> tag.
Example
Listing 8.535 uses the length property of the frames array and a for loop to access the name of each frame in the window. This information is then written to the document window.
Listing 8.535 Using the length Property
<script language="JavaScript" type="text/javascript">
<!--
// Use a for loop to write out the name of each frame.
for(var i = 0; i <= window.frames.length; i++){
newWin.document.write("The name of frame #" + i);
newWin.document.write(" is " + window.frames[i].name + "<br>");
}
// -->
</script>
window.handleEvent()
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
Syntax
window.object.handleEvent(event)
Description
The handleEvent() method of the Window object invokes the handler for the event specified of the specified object. This method was added in JavaScript 1.2.
Example
Listing 8.536 has a single text box. The script tells the browser that it wants to intercept all Click events and that it wants the myClickHandler function to handle them. Within this function, the handleEvent() method of the text box has been specified to handle the click.
When the user clicks anywhere on the page, the onClick event handler in the <input type="text"> tag calls a function to change the text in the text box. The change is nothing more than a simple number that is incremented, counting the number of times the page has been clicked.
Listing 8.536 Using the handleEvent() Method of a Window Object to Handle All Clicks on a Page
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Define a click counter variable.
var counter = 0;
// Tell the browser you want to intercept ALL click events
// on the page. Then define a function to handle them.
window.captureEvents(Event.CLICK)
window.onClick = myClickHandler;
// Define the myClickHandler function to handle click events.
function myClickHandler(e){
// Pass all click events to the onClick event of the text box.
window.document.myForm.myText.handleEvent(e);
}
// Function is called by onClick of text box. Displays the number
// of clicks that have occurred.
function changeText(){
document.myForm.myText.value = counter++;
}
// -->
</script>
</head>
<body>
<form name="myForm">
<input type="text" size="2" value="" name="myText" onclick='changeText()'>
</form>
</body>
</html>
window.history
JavaScript1.1+, JScript1.0+
Nav3+, IE3+, Opera3+
Syntax
window.history[num]
window.history.method()
window.history.property
Description
The history property of the Window object is actually one of the core JavaScript objects. This object contains an array of the names and URLs of the pages the window has visited. A specific URL in the history array can be accessed by specifying the indexed location,num, that represents the URL about which you want to retrieve information.
Also, as defined in the syntax definition, the methods and properties of this object are also accessible for programming use. Table 8.41 has a list of each of these, followed by a description.
Table 8.41 Methods and Properties Used by the Window.history Property
For more information on the History object and its properties and methods, see its entry in this chapter.
Example
Listing 8.537 has two buttons that allow a user to move forward and back in his history.
Listing 8.537 Using the history Array to Access Pages Visited
<html>
<body>
<form>
<input type="button" value="Back" onclick="window.history.back()">
<input type="button" value="Forward" onclick="window.history.forward()">
</form>
</body>
</html>
window.home()
JavaScript1.2+, JScript3.0
Nav4+, IE4+
Syntax
window.home()
Description
The home() method of the Window object simulates the user clicking the Home button on the browser. It takes the browser to the user’s specified home page.
Example
Listing 8.538 has a single button that, when clicked, takes the browser to the user’s home page.
Listing 8.538 Using the home() Method to Go to the User’s Home Page
<form>
<h3>Home James!</h3>
<input type="button" value="Home" onclick="window.home()">
</form>
window.innerHeight
JavaScript1.2+
Nav4+
Syntax
window.innerHeight
Description
The innerHeight property of the Window object references the pixel height of the document within the browser’s frame. This does not include any of the toolbars or other “chrome” that makes up the frame itself.
Example
Listing 8.539 has a button that, when clicked, opens up a second, smaller window. The innerHeight property is written to this new window.
Listing 8.539 Using the innerHeight Property
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Define a function to open a small window.
function openWin(){
// Create variables to hold the various options that can be set
// when a new Window instance is created.
var myBars = 'directories=no,location=no,menubar=no,status=no';
myBars += ',titlebar=no,toolbar=no';
var myOptions = 'scrollbars=no,width=400,height=200,resizeable=no';
var myFeatures = myBars + ',' + myOptions;
// Open the window. Give the window instance the name newDoc and
// name the document in the window myDoc.
var newWin = open('', 'myDoc', myFeatures);
// Write the window height and width properties to the new window.
newWin.document.writeln('<h4>Properties for this Window</h4>'),
newWin.document.writeln('innerHeight: ' + newWin.innerHeight + '<br>'),
newWin.document.writeln('innerWidth: ' + newWin.innerWidth + '<br>'),
newWin.document.writeln('outerHeight: ' + newWin.outerHeight + '<br>'),
newWin.document.writeln('outerWidth: ' + newWin.outerWidth + '<br>'),
newWin.document.writeln('<form>'),
newWin.document.writeln('<input type="button" value="Close"'),
newWin.document.writeln(' onclick="window.close()">'),
newWin.document.writeln('</form>'),
// Close the stream to the document.
newWin.document.close();
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Open" onclick="openWin()">
</form>
</body>
</html>
window.innerWidth
JavaScript1.2+
Nav4+
Syntax
window.innerWidth
Description
The innerWidth property of the Window object references the pixel width of the document within the browser’s frame. This does not include any of the toolbars or other “chrome” that makes up the frame itself.
Example
Listing 8.540 has a button that, when clicked, opens up a second, smaller window. The innerWidth property is written to this new window.
Listing 8.540 Using the innerWidth Property
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Define a function to open a small window.
function openWin(){
// Create variables to hold the various options that can be set
// when a new Window instance is created.
var myBars = 'directories=no,location=no,menubar=no,status=no';
myBars += ',titlebar=no,toolbar=no';
var myOptions = 'scrollbars=no,width=400,height=200,resizeable=no';
var myFeatures = myBars + ',' + myOptions;
// Open the window. Give the window instance the name newWin and
// name the document in the window myDoc.
var newWin = open('', 'myDoc', myFeatures);
// Write the window height and width properties to the new window.
newWin.document.writeln('<h4>Properties for this Window</h4>'),
newWin.document.writeln('innerHeight: ' + newWin.innerHeight + '<br>'),
newWin.document.writeln('innerWidth: ' + newWin.innerWidth + '<br>'),
newWin.document.writeln('outerHeight: ' + newWin.outerHeight + '<br>'),
newWin.document.writeln('outerWidth: ' + newWin.outerWidth + '<br>'),
newWin.document.writeln('<form>'),
newWin.document.writeln('<input type="button" value="Close"'),
newWin.document.writeln(' onclick="window.close()">'),
newWin.document.writeln('</form>'),
// Close the stream to the document.
newWin.document.close();
}
// -->
</script>
</head>
<body>
<form>
input type="button" value="Open" onclick="openWin()">
</form>
</body>
</html>
window.length
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
Syntax
window.length
Description
The length property of the Window object represents the number of frames within a window. This returns the same results as Window.frames.length.
Example
Listing 8.541 shows a function that can be used to return the number of frames in a window.
Listing 8.541 Using the length Property of the Window Object
<script language="JavaScript" type="text/javascript">
<!--
// Define a function to return the number of frames in the
// window passed.
function numFrames(win){
return win.length;
}
// -->
</script>
window.location
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
Syntax
window.location
Description
The location property of the Window object returns the current URL of the document in the window.
Example
Listing 8.542 pops up an alert box that contains the URL of the current window.
Listing 8.542 Using the location Property of the Window Object
<script language="JavaScript" type="text/javascript">
<!--
// Display the current URL in an alert box.
alert(window.location);
// -->
</script>
window.locationbar
JavaScript1.2+
Nav4+
Syntax
window.locationbar.property
Description
The locationbar property of the Window object is, to some degree, an object itself. The real use of this property is to access its visible property to determine whether the location bar is visible to the user.
Example
See the example of Window.locationbar.visible for an example of using the locationbar property.
window.locationbar.visible
JavaScript1.2+
Nav4+
Syntax
window.locationbar.visible
Description
The visible subproperty of the locationbar property of the Window is used to determine whether the location bar is visible to the user. If it is visible, the property returns true. It returns false if the bar is not visible.
Example
Listing 8.543 determines whether several of the browser bars are displayed. In the example, you will see whether the location bar is visible by using the visible property.
Listing 8.543 Using the visible Property of locationbar
<script language="JavaScript" type="text/javascript">
<!--
// Write the browser's bar status to the page. If the value
// is true, then it is displayed.
document.writeln('<h3>Browser Chrome Status</h3>')
document.writeln('Menu Bar: ' + window.menubar.visible + '<br>'),
document.writeln('Tool Bar: ' + window.toolbar.visible + '<br>'),
document.writeln('Location Bar: ' + window.locationbar.visible + '<br>'),
document.writeln('Personal Bar: ' + window.personalbar.visible + '<br>'),
document.writeln('Scroll Bars: ' + window.scrollbars.visible + '<br>'),
document.writeln('Status Bar: ' + window.statusbar.visible + '<br>'),
// Close the stream to the document.
document.close();
// -->
</script>
window.menubar
JavaScript1.2+
Nav4+
Syntax
window.menubar.property
Description
The menubar property of the Window object is, to some degree, an object itself. The real use of this property is to access its visible property to determine whether the menu bar is visible to the user.
Example
See the example of Window.menubar.visible for an example of using the menubar property.
window.menubar.visible
JavaScript1.2+
Nav4+
Syntax
window.menubar.visible
Description
The visible subproperty of the menubar property of the Window is used to determine whether the menu bar is visible to the user. If it is visible, the property returns true. It returns false if the bar is not visible.
Example
Listing 8.544 determines whether several of the browser bars are displayed. In the example, you will see whether the menu bar is visible by using the visible property.
Listing 8.544 Using the visible Property of menubar
<script language="JavaScript" type="text/javascript">
<!--
// Write the browser's bar status to the page. If the value
// is true, then it is displayed.
document.writeln('<h3>Browser Chrome Status</h3>')
document.writeln('Menu Bar: ' + window.menubar.visible + '<br>'),
document.writeln('Tool Bar: ' + window.toolbar.visible + '<br>'),
document.writeln('Location Bar: ' + window.locationbar.visible + '<br>'),
document.writeln('Personal Bar: ' + window.personalbar.visible + '<br>'),
document.writeln('Scroll Bars: ' + window.scrollbars.visible + '<br>'),
document.writeln('Status Bar: ' + window.statusbar.visible + '<br>'),
// Close the stream to the document.
document.close();
// -->
</script>
window.moveBy()
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
Syntax
window.moveBy(numHorz, numVert)
Description
The moveBy() method of the Window object moves the specified window by the number of pixels passed to the method. As shown in the syntax definition, the first numeric value passed to the method represents the number of horizontal pixels you want to move the window, whereas the second numeric value represents the vertical number of pixels.
If the numbers passed are positive, the window is moved to the right horizontally, and down vertically. Negative numbers move the window in the opposite direction.
Example
Listing 8.545 has four buttons: Up, Down, Right, and Left. If you click these buttons, the window the document is loaded in will move one pixel at a time in that direction.
Listing 8.545 Using the moveBy() Method to Move the Location of a Window
<html>
<head>
</head>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Define a function to handle the window movement.
function moveWin(dir, dist){
// Define variables to hold the movement values.
var myVert;
var myHorz;
// Determine the type of movement.
if(dir == "vert"){
myHorz = 0;
myVert = dist;
}else{
myHorz = dist;
myVert = 0;
}
// Move the window.
window.moveBy(myHorz, myVert);
}
// -->
</script>
<body>
<form>
<table border=0>
<tr>
<td></td>
<td><input type="button" value=" Up " onclick="moveWin('vert',-1)"></td>
<td></td>
</tr>
<tr>
<td><input type="button" value=" Left " onclick="moveWin('horz',-1)"></td>
<td></td>
<td><input type="button" value="Right" onclick="moveWin('horz',1)"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Down" onclick="moveWin('vert',1)"></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
window.moveTo()
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
Syntax
window.moveTo(numX, numY)
Description
The moveTo() method of the Window object moves the specified window to the specified location passed to the method. As shown in the syntax definition, the first numeric value passed to the method represents the x coordinate to which you want to move the window, whereas the second numeric value represents the y coordinate.
Example
Listing 8.546 has two text fields and a button. If the user enters an integer value in each of the text fields and clicks the button, the window will move to that location.
Listing 8.546 Using the moveTo() Method to Move the Location of a Window
<html>
<head>
</head>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Define a function to handle the window movement.
function moveWin(form){
// Define variables to hold the movement values.
var myX = form.X.value;
var myY = form.Y.value;
// Move the window.
window.moveTo(myX, myY);
}
// -->
</script>
<body>
<form>
<b>X-Coordinate:</b>
<input type="text" name="X"><br>
<b>Y-Coordinate:</b>
<input type="text" name="Y"><br>
<input type="button" value="Move Window" onclick="moveWin(this.form)"></td>
</form>
</body>
</html>
window.name
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
Syntax
window.name
Description
The name property of an instance of a Window object returns the name of the window. This property contains the name specified when new windows are created using the Window.open() method. In JavaScript 1.0, this property was read only, but this was changed in JavaScript 1.1 so that you can assign a name to a window not created with the Window.open() method. This property was tainted in JavaScript 1.1 as well.
Example
Listing 8.547 has a button that launches a second window. The name of the window is written to it using the name property of the Window object.
Listing 8.547 Using the name Property to Retrieve the Name of a Window
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
// Define a function to open a small window.
function openWin(){
// Create variables to hold the various options that can be set
// when a new Window instance is created.
var myBars = 'directories=no,location=no,menubar=no,status=no';
myBars += ',titlebar=no,toolbar=no';
var myOptions = 'scrollbars=no,width=400,height=200,resizeable=no';
var myFeatures = myBars + ',' + myOptions;
// Open the window. Give the window instance the name newWin and
// name the document in the window myDoc.
var newWin = open('', 'myDoc', myFeatures);
// Write the window's name to the new window.
newWin.document.writeln('This window's name is: ' + newWin.name + '<br>'),
newWin.document.writeln('<form>'),
newWin.document.writeln('<input type="button" value="Close"'),
newWin.document.writeln(' onclick="window.close()">'),
newWin.document.writeln('</form>'),
// Close the stream to the document.
newWin.document.close();
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Open" onclick="openWin()">
</form>
</body>
</html>
window.offscreenBuffering
JavaScript1.2, JScript3.0+
Nav4+, IE4+
Syntax
window.offscreenBuffering = boolean
Description
The offscreenBuffering property of the Window object is used to explicitly instruct the browser whether to buffer data offscreen before displaying. Without doing this, a user’s window might flicker as the page is being drawn. This property simply takes a boolean value of true or false to set it.
Example
Listing 8.548 shows how you can instruct the browser to not buffer data offscreen.
Listing 8.548 Using the offscreenBuffering Property
<script type="text/javascript" language="JavaScript1.2">
<!--
// Disallow off screen buffering
window.offscreenBuffering = false;
//-->
</script>
window.onBlur
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
Syntax
onblur="command"
Description
The onBlur event handler is a property of a Window object and is fired when the focus is moved away from that particular window instance. Care should be taken when using this event handler because it is possible to get into an infinite loop when using the onFocus event handler or the focus() method. Note that when this event handler is called within the <body> tag, it is overridden if a <frame> tag that also uses this event handler loaded the document.
Example
Listing 8.549 has a frame set with two frames. The first frame, toc, has the onBlur event handler specified in its tag. When focus leaves this frame, the event is fired and the myBlurFunc() function will be called.
Listing 8.549 Example of Using the onBlur Event
<frameset cols="150,*">
<frame name="toc"
src="/toc.htm"
onblur='myBlurFunc()'
marginwidth="1" marginheight="1" scrolling="auto">
<frame name="body"
src="/body.htm"
marginwidth="1" marginheight="5" scrolling="auto">
</frameset>
window.onDragDrop
JavaScript1.2+
Nav4+
Syntax
ondragdrop="command"
Description
The onDragDrop event handler of a property of a Window object is fired when the user drops an object, such as a file, on that particular window instance.
Example
In Listing 8.550, if you try to drop a new file on to the browser when this page is loaded, you will be asked to confirm this operation. If you accept, the page will load. If you cancel, the page will not load.
Listing 8.550 Example of Using the onDragDrop Event
<html>
<body ondragdrop='return(confirm("Are you sure you want to continue?"))'>
Try to drop an element on this page.
</body>
</html>
window.onError
JavaScript1.1+, JScript1.0+
Nav3+, IE3+, Opera3+
Syntax
onerror="command"
Description
The onError event handler of the Window object is fired when an error occurs loading the page. You might find this useful to try and reload the page, using the reload() method of the Location object.
Example
Listing 8.551 is an example of placing the onError event handler in the <body> tag. If there is an error when loading this page, an alert box will be displayed to the user.
Listing 8.551 Example of Using the onError Event Handler
<body onerror='alert("Error: There has been an error loading this page.")'>
window.onFocus
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
Syntax
onfocus="command"
Description
The onFocus event handler of a property of a Window object is fired when the focus is placed on that particular window instance. Care should be taken when using this event handler because it is possible to get into an infinite loop when using onBlur event handler or blur() method. Note that when this event handler is called within the <body> tag, it is overridden if a <frame> tag that also uses this event handler loaded the document.
Example
Listing 8.552 has a frame set with two frames. The first frame, toc, has the onFocus event handler specified in its tag. When the focus leaves this frame, the event is fired and the myFocusFunc() function (not shown) will be called.
Listing 8.552 Example of Using the onFocus Event
<frameset cols="150,*">
<frame name="toc"
src="/toc.htm"
onfocus='myFocusFunc()'
marginwidth="1" marginheight="1" scrolling="auto">
<frame name="body"
src="/body.htm"
marginwidth="1" marginheight="5" scrolling="auto">
</frameset>
window.onLoad
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
Syntax
onload="command"
Description
The onLoad event handler of a property of a Window object is fired when the page has finished loading in that particular window instance.
Example
Listing 8.553 pops up an alert box when the page has finished loading.
Listing 8.553 Example of Using the onLoad Event
<body onload='alert("The document has completely loaded.")'>
window.onMove
JavaScript1.2+
Nav4+
Syntax
onmove="command"
Description
The onMove event handler of a property of a Window object is fired when the window it is referenced in is moved. The user physically moving the window or a script moving it can fire this event.
Example
Listing 8.554 pops up an alert box if the user tries to move the window.
Listing 8.554 Using the onMove Event to Display an Alert Box
<body onmove='alert("Do NOT move this window!")'>
window.onResize
JavaScript1.2+
Nav4+
Syntax
onresize="command"
Description
The onResize event handler of a property of a Window object is fired when the window it is referenced in is resized. The user physically resizing the window or a script resizing it can fire this event.
Example
Listing 8.555 pops up an alert box if the user tries to resize the window.
Listing 8.555 Using the onResize Event to Display an Alert Box
<body onresize='alert("Do NOT resize this window!")'>
window.onUnload
JavaScript 1.0+, JScript 1.0+
Nav2+, IE3+, Opera3+
Syntax
onunload="command"
Description
The onUnload event handler of a property of a Window object is fired when the page is unloaded in that particular window instance. This occurs when the user leaves the page for another page.
Example
Listing 8.556 pops up an alert box when the user leaves the page.
Listing 8.556 Example of Using the onUnLoad Event
<body onunload='alert("Please do not leave!")'>
window.open()
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
Syntax
window.open(pageURL, name, parameters)
Description
The open() method of the Window object creates a new instance of a window. It loads the pageURL passed to the method in a window based on the parameters specified. The action attribute of the <form> tag and the target attribute of the <a> tag can reference the window by the name passed.
Most of the parameters passed, which are listed without spaces and commas, are toggled on and off by setting them to yes or no. It is also possible to use 1 or 0 to turn these features on or off. Either way, you should be consistent across each of the options. Table 8.42 has the different parameters that can be passed and how to turn them on and off.
Table 8.42 Parameters That Can Be Passed When Creating a New Instance of the Window Object Using the open() Method
Example
Listing 8.557 has a single button that opens a new window when clicked. As you can see in the creation of the window, various parameters are passed that define how the window should look when opened.
Listing 8.557 Using the open() Method to Open a New Window
<html>
<script language="JavaScript" type="text/javascript">
<!--
// Define the openWin() function.
function openWin(){
// Create variables to hold the various options that can be set
// when a new Window instance is created.
var myBars = 'directories=no,location=no,menubar=no,status=no';
myBars += ',titlebar=no,toolbar=no';
var myOptions = 'scrollbars=no,width=400,height=200,resizeable=no';
var myFeatures = myBars + ',' + myOptions;
var myReadme = "Welcome to Pure JavaScript!
" +
"-----------------------------------------
" +
'You can enter some text here.'
// Open the window. Give the window instance the name newWin and
// name the document in the window myDoc.
var newWin = open('', 'myDoc', myFeatures);
newWin.document.writeln('<form>'),
newWin.document.writeln('<table cellspacing="0" cellpadding="0"
border="1">'),
newWin.document.writeln('<tr valign="top" bgcolor="#000099"><td>'),
newWin.document.writeln('<font size="-1" color="#ffffff"><b>'),
newWin.document.writeln(' Readme</b></font>'),
newWin.document.writeln('</td></tr>'),
newWin.document.writeln('<tr valign="top"><td>'),
newWin.document.writeln('<textarea cols="45" rows="7" wrap="soft">'),
newWin.document.writeln(myReadme + '</textarea>'),
newWin.document.writeln('</td></tr>'),
newWin.document.writeln('<tr valign="bottom" align="right"'),
newWin.document.writeln(' bgcolor="#c0c0c0"><td>'),
newWin.document.writeln('<input type="button" value="Close"'),
newWin.document.writeln(' onclick="window.close()">'),
newWin.document.writeln('</td></tr>'),
newWin.document.writeln('</table></form>'),
// Close the stream to the document and bring the window to the front.
newWin.document.close();
newWin.focus();
}
// -->
</script>
<body>
<form>
<b>Click the following button to open a new window: </b>
<input type="button" value="Open" onclick='openWin()'>
</form>
</body>
</html>
window.opener
JavaScript1.1+, JScript1.0+
Nav3+, IE3+, Opera3+
Syntax
window.opener
window.opener.method
window.opener.property
Description
The opener property of the Window object corresponds to the window that opens the window from which the property was accessed. When accessed by a child window, it returns the parent window. With this property, you can then invoke methods and access properties of the Window object on the “opener” window. This property can also be set in scripts that allow the browser to clean up the reference to the parent window if it is closed before the child window. Most browsers have limits on the number of open windows they can have, and, by cleaning up these closed windows, you are able to regain the ability to open more windows if your limit has been reached. This is accomplished by setting the opener property to null.
Example
Listing 8.558 has a button that opens a second window when clicked. In the second window, there is a button that closes the parent window by referencing it via the opener property. After the close() method has been called on this window, the opener property is set to null to clean up the parent window.
Listing 8.558 Using the opener Property to Return the Parent Window
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
// Define the openWin() function.
function openWin(){
// Create variables to hold the various options that can be set
// when a new Window instance is created.
var myBars = 'directories=no,location=no,menubar=no,status=no';
myBars += ',titlebar=no,toolbar=no';
var myOptions = 'scrollbars=no,width=400,height=200,resizeable=no';
var myFeatures = myBars + ',' + myOptions;
var myReadme = "Welcome to Pure JavaScript!
" +
"-----------------------------------------
" +
'You can enter some text here.'
// Open the window. Give the window instance the name newWin and
// name the document in the window myDoc.
var newWin = open('', 'myDoc', myFeatures);
newWin.document.writeln('<form>'),
newWin.document.writeln('<table cellspacing="0" cellpadding="0"
border="1">'),
newWin.document.writeln('<tr valign="top" bgcolor="#000099"><td>'),
newWin.document.writeln('<font size="-1" color="#ffffff"><b>'),
newWin.document.writeln(' Readme</b></font>'),
newWin.document.writeln('</td></tr>'),
newWin.document.writeln('<tr valign="top"><td>'),
newWin.document.writeln('<textarea cols="45" rows="7" wrap="soft">'),
newWin.document.writeln(myReadme + '</textarea>'),
newWin.document.writeln('</td></tr>'),
newWin.document.writeln('<tr valign="bottom" align="right" '),
newWin.document.writeln('bgcolor="#c0c0c0"><td>'),
// Close the opener window and clean it up
newWin.document.writeln('<input type="button" value="Close"'),
var myJS = "window.opener.close();window.opener=null"
newWin.document.writeln('onclick="' + myJS + '">'),
newWin.document.writeln('</td></tr>'),
newWin.document.writeln('</table></form>'),
// Close the stream to the document and bring the window to the front.
newWin.document.close();
newWin.focus();
}
// -->
</script>
</head>
<body>
<form>
<b>Click the following button to open a new window: </b>
<input type="button" value="Open" onclick='openWin()'>
</form>
</body>
</html>
window.outerHeight
JavaScript1.2+
Nav4+
Syntax
window.outerHeight
Description
The outerHeight property of the Window object references the pixel height of the browser’s frame. This includes any of the toolbars or other “chrome” that makes up the frame itself.
Example
Listing 8.559 has a button that, when clicked, opens up a second, smaller window. The outerHeight property is written to this new window.
Listing 8.559 Using the outerHeight Property
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Define a function to open a small window.
function openWin(){
// Create variables to hold the various options that can be set
// when a new Window instance is created.
var myBars = 'directories=no,location=no,menubar=no,status=no';
myBars += ',titlebar=no,toolbar=no';
var myOptions = 'scrollbars=no,width=400,height=200,resizeable=no';
var myFeatures = myBars + ',' + myOptions;
// Open the window. Give the window instance the name newWin and
// name the document in the window myDoc.
var newWin = open('', 'myDoc', myFeatures);
// Write the window height and width properties to the new window.
newWin.document.writeln('<h4>Properties for this Window</h4>'),
newWin.document.writeln('innerHeight: ' + newWin.innerHeight + '<br>'),
newWin.document.writeln('innerWidth: ' + newWin.innerWidth + '<br>'),
newWin.document.writeln('outerHeight: ' + newWin.outerHeight + '<br>'),
newWin.document.writeln('outerWidth: ' + newWin.outerWidth + '<br>'),
newWin.document.writeln('<form>'),
newWin.document.writeln('<input type="button" value="Close"'),
newWin.document.writeln(' onclick="window.close()">'),
newWin.document.writeln('</form>'),
// Close the stream to the document.
newWin.document.close();
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Open" onclick="openWin()">
</form>
</body>
</html>
window.outerWidth
JavaScript1.2+
Nav4+
Syntax
window.outerWidth
Description
The outerWidth property of the Window object references the pixel width of the browser’s frame. This includes any of the toolbars or other “chrome” that make up the frame itself.
Example
Listing 8.560 has a button that, when clicked, opens up a second, smaller window. The outerWidth property is written to this new window.
Listing 8.560 Using the outerWidth Property
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Define a function to open a small window.
function openWin(){
// Create variables to hold the various options that can be set
// when a new Window instance is created.
var myBars = 'directories=no,location=no,menubar=no,status=no';
myBars += ',titlebar=no,toolbar=no';
var myOptions = 'scrollbars=no,width=400,height=200,resizeable=no';
var myFeatures = myBars + ',' + myOptions;
// Open the window. Give the window instance the name newWin and
// name the document in the window myDoc.
var newWin = open('', 'myDoc', myFeatures);
// Write the window height and width properties to the new window.
newWin.document.writeln('<h4>Properties for this Window</h4>'),
newWin.document.writeln('innerHeight: ' + newWin.innerHeight + '<br>'),
newWin.document.writeln('innerWidth: ' + newWin.innerWidth + '<br>'),
newWin.document.writeln('outerHeight: ' + newWin.outerHeight + '<br>'),
newWin.document.writeln('outerWidth: ' + newWin.outerWidth + '<br>'),
newWin.document.writeln('<form>'),
newWin.document.writeln('<input type="button" value="Close"'),
newWin.document.writeln(' onclick="window.close()">'),
newWin.document.writeln('</form>'),
// Close the stream to the document.
newWin.document.close();
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Open" onclick="openWin()">
</form>
</body>
</html>
window.pageXOffset
JavaScript1.2+, JScript3+
Nav4+, IE4+
Syntax
window.pageXOffset
Description
The pageXOffset property of the Window object reflects the current horizontal pixel location of the top-left corner of the document in the window. In chromeless windows, this property can be referenced if you are moving a window with the moveTo() method before the actual move is made to see whether the window needs to be moved. It is also useful when using the scrollTo() method because it returns the current location of the viewable document in relation to the whole page.
Example
Listing 8.561 has a button that, when clicked, displays the current x and y coordinates of the window.
Listing 8.561 Using the pageXoffSet Property to See the Current Location of the Window
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Define a function to display an alert box with the current
// window location.
function showLocation(){
// Store the offset in variables.
var x = self.pageXOffset;
var y = self.pageYOffset
// Build a string to display.
var currX = "X-coordinate: " + x + "
";
var currY = "Y-coordinate: " + y;
// Display the coordinates.
window.alert(currX + currY);
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Show Location" onclick="showLocation()">
</form>
</body>
</html>
window.pageYOffset
JavaScript1.2+, JScript3+
Nav4+, IE4+
Syntax
window.pageYOffset
Description
The pageYOffset property of the Window object reflects the current vertical pixel location of the top-left corner of the document in the window. In chromeless windows, this property can be referenced if you are moving a window with the moveTo() method before the actual move is made to see whether the window needs to be moved. It is also useful when using the scrollTo() method because it returns the current location of the viewable document in relation to the whole page.
Example
Listing 8.562 has a button that, when clicked, displays the current x and y coordinates of the window.
Listing 8.562 Using the pageYoffSet Property to See the Current Location of the Window
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Define a function to display an alert box with the current
// window location.
function showLocation(){
// Store the offset in variables.
var x = self.pageXOffset;
var y = self.pageYOffset
// Build a string to display.
var currX = "X-coordinate: " + x + "
";
var currY = "Y-coordinate: " + y;
// Display the coordinates.
window.alert(currX + currY);
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Show Location" onclick="showLocation()">
</form>
</body>
</html>
window.parent
JavaScript1.0+, JScript1.0
Nav2+, IE3+, Opera3+
Syntax
window.parent.parent[num]
window.parent.frameName
Description
The parent property of the Window object contains a reference to the parent window of any frames that are loaded. In the instance where Frame A loads a page with a <frameset> with Frame A.1 and A.2, the parent of the documents in A.1 and A.2 is Frame A. Frame A’s parent is the top level window.
The referencing of these sibling frames can either be done using the frames array and passing an index number, or you can directly reference a frame using the name that is assigned by the name attribute of the <frame> tag.
Example
Listing 8.563 shows how to reference the parent of the third frame on a page.
Listing 8.563 Using the parent Property to Reference a Frame
var myFrameReference = myWin.parent.frames[2];
window.personalbar
JavaScript1.2+
Nav4+
Syntax
window.personalbar.property
Description
The personalbar property of the Window object is, to some degree, an object itself. The real use of this property is to access its visible property to determine whether the personal bar is visible to the user.
Example
Listing 8.564 determines whether several of the browser bars are displayed. In the example, you will see whether the personal bar is visible by using the visible property.
Listing 8.564 Using the visible Property of personalbar
<script language="JavaScript" type="text/javascript">
<!--
// Write the browser's bar status to the page. If the value
// is true, then it is displayed.
document.writeln('<h3>Browser Chrome Status</h3>')
document.writeln('Menu Bar: ' + window.menubar.visible + '<br>'),
document.writeln('Tool Bar: ' + window.toolbar.visible + '<br>'),
document.writeln('Location Bar: ' + window.locationbar.visible + '<br>'),
document.writeln('Personal Bar: ' + window.personalbar.visible + '<br>'),
document.writeln('Scroll Bars: ' + window.scrollbars.visible + '<br>'),
document.writeln('Status Bar: ' + window.statusbar.visible + '<br>'),
// Close the stream to the document.
document.close();
// -->
</script>
window.personalbar.visible
JavaScript1.2+
Nav4+
Syntax
window.personalbar.visible
Description
The visible subproperty of the personalbar property of the Window is used to determine whether the personal bar is visible to the user. If it is visible, the property returns true. It returns false if the bar is not visible.
Example
Listing 8.565 determines whether several of the browser bars are displayed. In the example, you will see whether the personal bar is visible by using the visible property.
Listing 8.565 Using the visible Property of personalbar
<script language="JavaScript" type="text/javascript">
<!--
// Write the browser's bar status to the page. If the value
// is true, then it is displayed.
document.writeln('<h3>Browser Chrome Status</h3>')
document.writeln('Menu Bar: ' + window.menubar.visible + '<br>'),
document.writeln('Tool Bar: ' + window.toolbar.visible + '<br>'),
document.writeln('Location Bar: ' + window.locationbar.visible + '<br>'),
document.writeln('Personal Bar: ' + window.personalbar.visible + '<br>'),
document.writeln('Scroll Bars: ' + window.scrollbars.visible + '<br>'),
document.writeln('Status Bar: ' + window.statusbar.visible + '<br>'),
// Close the stream to the document.
document.close();
// -->
</script>
window.print()
JavaScript 1.2+, JScript 3.0+
Nav4+, IE4+
Syntax
window.print()
Description
The print() method of the Window object simulates the user clicking the Print button on the browser. It tells the browser to open the Print dialog box to print the current page.
Example
Listing 8.566 has a button. Clicking the button will tell the browser to open the Print dialog box to allow the user to print the current page.
Listing 8.566 Using the print() Method to Print the Current Page
<html>
<body>
<form>
<input type="button" value="Print" onclick="window.print()">
</form>
</body>
</html>
window.prompt()
JavaScript1.0+, JScript1.0
Nav2+, IE3+, Opera3+
Syntax
window.prompt(string1, string2)
Description
The prompt() method of the Window object displays a prompt dialog box when invoked. The value of string1 passed to the method is displayed in the box, and the value of string2 is contained in the text field of the prompt dialog box. The returned value of this method is the text in the text field.
Example
Listing 8.567 pops up a prompt box when the script is loaded, asking the user for a password. If the correct password is entered, the page finishes loading. The result of running this script can be seen in Figure 8.6.
Figure 8.6 An alert box created with the Window.prompt() method.
Listing 8.567 A Prompt Box Displayed Using the prompt() Method
<script language="JavaScript" type="text/javascript">
<!--
// Keep asking the user for a password until they get it right.
while(prompt('Please enter your password', 'HERE') != 'admin'){
alert('That was an incorrect response, please try again'),
}
// This is only executed if 'admin' is entered.
document.write('You have entered the correct password!'),
// -->
</script>
window.releaseEvents()
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
Syntax
window.releaseEvents(event)
window.releaseEvents(event1 | event2 | eventN)
Description
The releaseEvents() method of the Window object releases all previously captured events of the event type passed. These events can be captured with the Window.captureEvents() method. The events that can be released are as follows:
• Event.ABORT
• Event.BLUR
• Event.CHANGE
• Event.CLICK
• Event.DBLCLICK
• Event.DRAGDROP
• Event.ERROR
• Event.FOCUS
• Event.KEYDOWN
• Event.KEYPRESS
• Event.KEYUP
• Event.LOAD
• Event.MOUSEDOWN
• Event.MOUSEMOVE
• Event.MOUSEOUT
• Event.MOUSEOVER
• Event.MOUSEUP
• Event.MOVE
• Event.RESET
• Event.RESIZE
• Event.SELECT
• Event.SUBMIT
• Event.UNLOAD
After one of these events has been captured, you can define a function to replace the built-in method for handling the event. Use the releaseEvents() method to free the event after a capture.
Example
Listing 8.568 has a single text box and a button. The script in the <head> of the document specifies a function to handle all onClick events in the window. To be able to do this, the captureEvents() method has to be used to capture all events of type Event.CLICK. When the page itself is clicked, a counter, which is displayed in the text box, is incremented.
When the button is pressed down, the onMouseDown event handler is fired and the Event.CLICK is released and no longer increments the page when the page is clicked.
Listing 8.568 Capturing Events with the Window.releaseEvents() Method
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Define a click counter variable.
var counter = 0;
// Tell the browser you want to intercept ALL click events
// on the page. Then define a function to handle them.
window.captureEvents(Event.CLICK);
window.onClick = myClickHandler;
// Define the myClickHandler function to handle click events.
function myClickHandler(e){
// Pass all click events to the onClick event of the text box.
window.document.myForm.myText.handleEvent(e);
}
// Function is called by onClick of text box. Displays the number
// of clicks that have occurred.
function changeText(){
document.myForm.myText.value = counter++;
}
// Releases the click event capturing.
function releaseClick(){
window.releaseEvents(Event.CLICK);
}
// -->
</script>
</head>
<body>
<form name="myForm">
<input type="text" size="2" value="" name="myText" onclick='changeText()'>
<input type="button" value="Release Event" onmousedown='releaseClick()'>
</form>
</body>
</html>
window.resizeBy()
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
Syntax
window.resizeBy(numHort, numVert)
Description
The resizeBy() method of the Window object resizes the specified window by the number of pixels passed to the method. As shown in the syntax definition, the first numeric value passed to the method represents the number of vertical pixels you want to size the window by, whereas the second numeric value represents the horizontal number of pixels.
If the numbers passed are positive, the window size is increased. Negative numbers reduce the size of the window.
Example
Listing 8.569 has four buttons. Two buttons are for increasing height, and the other two are for increasing width. If you click these buttons, the window will resize 10 pixels at a time.
Listing 8.569 Using the resizeBy() Method to Resize a Window
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Define a function to handle the window resizing.
function resizeWin(dir, dist){
// Define variables to hold the sizing values.
var myVert;
var myHorz;
// Determine the type of movement.
if(dir == "vert"){
myHorz = 0;
myVert = dist;
}else{
myHorz = dist;
myVert = 0;
}
// Resize the window.
window.resizeBy(myHorz, myVert);
}
// -->
</script>
</head>
<body>
<form>
<table border=0>
<tr>
<td colspan="2">
<input type="button" value="Expand Down"
onclick="resizeWin('vert',10)">
</td>
</tr>
<tr>
<td>
<input type="button" value="Retract From Right"
onclick="resizeWin('horz',-10)">
</td>
<td>
<input type="button" value="Grow Right"
onclick="resizeWin('horz',10)">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Retrack Up"
onclick="resizeWin('vert',-10)">
</td>
</tr>
</table>
</form>
</body>
</html>
window.resizeTo()
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
Syntax
window.resizeTo(numWidth, numHeight)
Description
The resizeTo() method of the Window object resizes the specified window to the specified size passed to the method. As shown in the syntax definition, the first numeric value passed to the method represents the width you want to size the window to, whereas the second numeric value represents the height.
Example
Listing 8.570 has two text fields and a button. If the user enters an integer value in each of the text fields and clicks the button, the window will resize to those settings.
Listing 8.570 Using the resizeTo() Method to Resize the Window
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Define a function to handle the window resizing.
function resizeWin(form){
// Define variables to hold the resize values.
var myWidth = form.width.value;
var myHeight = form.height.value;
// Resize the window.
window.resizeTo(myWidth, myHeight);
}
// -->
</script>
</head>
<body>
<form>
<b>New Width:</b>
<input type="text" name="width"><br>
<b>New Height:</b>
<input type="text" name="height"><br>
<input type="button" value="Resize Window"
onclick="resizeWin(this.form)"></td>
</form>
</body>
</html>
window.routeEvent()
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
Syntax
window.routeEvent(event)
Description
The routeEvent() method of the Window object passes all previously captured events of the event type passed through their normal event process. The events that can be passed are as follows:
• Event.BLUR
• Event.CHANGE
• Event.CLICK
• Event.DBLCLICK
• Event.DRAGDROP
• Event.ERROR
• Event.FOCUS
• Event.KEYDOWN
• Event.KEYPRESS
• Event.KEYUP
• Event.LOAD
• Event.MOUSEDOWN
• Event.MOUSEMOVE
• Event.MOUSEOUT
• Event.MOUSEOVER
• Event.MOUSEUP
• Event.MOVE
• Event.RESET
• Event.RESIZE
• Event.SELECT
• Event.SUBMIT
• Event.UNLOAD
After one of these events has been captured using the Window.captureEvents() method, you can define a function to replace the built-in method for handling the event. Use the releaseEvents() method to free the event after a capture, and use routeEvent() to allow the normal processing to take place.
Example
Listing 8.571 has a single text box and a link. The script in the <head> of the document specifies a function to handle all onClick events in the window. To be able to do this, the captureEvents() method has to be used to capture all events of type Event.CLICK. When the page itself is clicked, a counter, which is displayed in the text box, is incremented.
Listing 8.571 Capturing Events with the Window.routeEvent() Method
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--<a id="page_1154"></a>
// Define a click counter variable.
var counter = 0;
// Tell the browser you want to intercept ALL click events
// on the page. Then define a function to handle them.
window.captureEvents(Event.CLICK);
window.onClick = myClickHandler;
// Define the myClickHandler function to handle click events.
function myClickHandler(e){
// Pass all click events to the onClick event of the text box.
window.document.myForm.myText.handleEvent(e);
}
// Function is called by onClick of text box. Displays the number
// of clicks that have occurred.
function changeText(){
document.myForm.myText.value = counter++;
}
// Releases the click event capturing.
function releaseClick(){
window.routeEvent(Event.CLICK);
}
// -->
</script>
</head>
<body>
<form name="myForm">
<input type="text" size="2" value="" name="myText" onclick='changeText()'>
<a href="http://www.purejavascript.com"
onmousedown='window.routeEvent(Event.CLICK)'>Click Here!</a>
</form>
</body>
</html>
When the link is clicked, the onMouseDown event handler is fired and the Event.CLICK is routed through its normal means and no longer increments the page when the page is clicked.
window.screenX
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
Syntax
windows.screenX
Description
The screenX property of the Window object is used to set the x coordinate of the left edge of the window. Within Netscape browsers, the property requires the UniversalBrowserWrite privilege.
Example
Listing 8.572 simply pops up an alert box that contains the screenX property value.
Listing 8.572 Checking the screenX Property Value
<html>
<body>
<script type="text/javascript" language="JavaScript1.2">
<!--
alert(window.screenX)
//-->
</script>
</body>
</html>
window.screenY
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
Syntax
window.screenY
Description
The screenY property of the Window object is used to set the y coordinate of the left edge of the window. Within Netscape browsers, the property requires the UniversalBrowserWrite privilege.
Example
Listing 8.573 simply pops up an alert box that contains the screenY property value.
Listing 8.573 Checking the screenY Property Value
<html>
<body>
<script type="text/javascript" language="JavaScript1.2">
<!--
alert(window.screenY)
//-->
</script>
</body>
</html>
window.scroll()
JavaScript1.1, JScript3.0
Nav3, IE3, Opera3
Syntax
window.scroll(numX, numY)
Description
The scroll() method of the Window object scrolls the specified window to the specified location passed to the method. As shown in the syntax definition, the first numeric value passed to the method represents the x coordinate to which you want to scroll the window, whereas the second numeric value represents the y coordinate. Note that this method has been deprecated in JavaScript 1.2 and replaced with the scrollBy() and scrollTo() methods.
Example
Listing 8.574 has two text fields and a button. If the user enters an integer value in each of the text fields and clicks the button, the window will be scrolled to those settings.
Listing 8.574 Using the scroll() Method to Scroll the Window
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Define a function to handle the window scrolling.
function scrollWin(dir, dist){
// Define variables to hold the scrolling values.
var myVert;
var myHorz;
// Determine the type of scrolling.
if(dir == "vert"){
myHorz = 0;
myVert = dist;
}else{
myHorz = dist;
myVert = 0;
}
// Scroll the window.
window.scroll(myHorz, myVert);
}
// -->
</script>
</head>
<body>
<form>
<table border=0>
<tr>
<td colspan="2">
<input type="button" value="Down" onclick="scrollWin('vert',10)">
</td>
</tr>
<tr>
<td>
<input type="button" value=" Left " onclick="scrollWin('horz',-10)">
</td>
<td>
<input type="button" value="Right" onclick="scrollWin('horz',10)">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value=" Up " onclick="scrollWin('vert',-10)">
</td>
</tr>
</table>
</form>
</body>
</html>
window.scrollbars
JavaScript1.2+
Nav4+
Syntax
window.scrollbars.property
Description
The scrollbars property of the Window object is, to some degree, an object itself. The real use of this property is to access its visible property to determine whether the scrollbars are visible to the user.
Example
See the example of Window.scrollbars.visible for an example of using the scrollbars property.
window.scrollbars.visible
JavaScript1.2+
Nav4+
Syntax
window.scrollbars.visible
Description
The visible subproperty of the scrollbars property of the Window is used to determine whether the scrollbars are visible to the user. If they are visible, the property returns true. It returns false if the bars are not visible.
Example
Listing 8.575 determines whether several of the browser scrollbars are displayed. In the example, you will see whether the scrollbars are visible by using the visible property.
Listing 8.575 Using the visible Property of scrollbars
<script language="JavaScript" type="text/javascript">
<!--//
Write the browser's toolbar status to the page. If the value
// is true, then it is displayed.
document.writeln('<h3>Browser Chrome Status</h3>')
document.writeln('Menu Bar: ' + window.menubar.visible + '<br>'),
document.writeln('Tool Bar: ' + window.toolbar.visible + '<br>'),
document.writeln('Location Bar: ' + window.locationbar.visible + '<br>'),
document.writeln('Personal Bar: ' + window.personalbar.visible + '<br>'),
document.writeln('Scroll Bars: ' + window.scrollbars.visible + '<br>'),
document.writeln('Status Bar: ' + window.statusbar.visible + '<br>'), // Close the stream to the document.
document.close();
// -->
</script>
window.scrollBy()
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
Syntax
window.scrollBy(numHorz, numVert)
Description
The scrollBy() method of the Window object scrolls the specified window by the number of pixels passed to the method. As shown in the syntax definition, the first numeric value passed to the method represents the number of horizontal pixels by which you want to scroll the window, whereas the second numeric value represents the vertical number of pixels.
If the numbers passed are positive, the window is scrolled up. Negative numbers are scrolled down.
Example
Listing 8.576 has four buttons. Each of these buttons scroll the windows contents in different directions when clicked.
Listing 8.576 Using the scrollBy() Method to Resize a Window
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Define a function to handle the window scrolling.
function scrollWin(dir, dist){
// Define variables to hold the scrolling values.
var myVert;
var myHorz;
// Determine the type of scrolling.
if(dir == "vert"){
myHorz = 0;
myVert = dist;
}else{
myHorz = dist;
myVert = 0;
}
// Scroll the window.
window.scrollBy(myHorz, myVert);
}
// -->
</script>
</head>
<body>
<form>
<table border=0>
<tr>
<td colspan="2">
<input type="button" value="Down"
onclick="scrollWin('vert',10)">
</td>
</tr>
<tr>
<td>
<input type="button" value=" Left "
onclick="scrollWin('horz',-10)">
</td>
<td>
<input type="button" value="Right"
onclick="scrollWin('horz',10)">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value=" Up "
onclick="scrollWin('vert',-10)">
</td>
</tr>
</table>
</form>
</body>
</html>
window.scrollTo()
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
Syntax
window.scrollTo(numX, numY)
Description
The scrollTo() method of the Window object scrolls the specified window to the specified location passed to the method. As shown in the syntax definition, the first numeric value passed to the method represents the x coordinate to which you want to scroll the window, whereas the second numeric value represents the y coordinate.
Example
Listing 8.577 has two text fields and a button. If the user enters an integer value in each of the text fields and clicks the button, the window will be scrolled to those settings.
Listing 8.577 Using the scrollTo() Method to Scroll the Window
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Define a function to handle the window scrolling.
function scrollWin(form){
// Define variables to hold the scroll values.
var myX = form.X.value;
var myY = form.Y.value;
// Scroll the window.
window.scrollTo(myX, myY);
}
// -->
</script>
</head>
<body>
<form>
<b>X-Coordinate:</b>
<input type="text" name="X"><br>
<b>Y-Coordinate:</b>
<input type="text" name="Y"><br>
<input type="button" value="Scroll Window"
onclick="scrollWin(this.form)"></td>
</form>
</body>
</html>
window.self
JavaScript1.0+, JScript1.0
Nav2+, IE3+, Opera3+
Syntax
window.self.method
window.self.property
Description
The self property of the Window object contains a reference to the current window. This allows you to invoke functions or call properties on the current window without any confusion when multiple windows are displayed.
Example
Listing 8.578 shows how to close the current window through the self reference.
Listing 8.578 Using the self Property to Reference the Current Window
<script language="JavaScript" type="text/javascript">
<!--
// Define a function to close the current window
function closeWin(){
self.close()
// -->
</script>
window.setHotKeys()
JavaScript1.2
Nav4
Syntax
window.setHotKeys(boolean)
Description
The setHotKeys() method of the Window object enables or disables all hot keys within a window that do not have menus. It simply takes a boolean value to enable or disable this option. Passing true will enable the hot keys, whereas false will disable them.
Example
Listing 8.579 shows how you can disable hot keys for a given window.
Listing 8.579 Using the setHotKeys() Method
<script type="text/javascript" language="JavaScript1.2">
<!--
setHotKeys(false)
//-->
</script>
window.setInterval()
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
Syntax
window.setInterval(expression, milliseconds)
window.setInterval(function, milliseconds)
window.setInterval(function, milliseconds, arg1, …, argN)
Description
The setInterval() method of the Window object sets an interval to invoke the expression or function that is passed to the method. The expression or function is invoked after every elapse of the milliseconds. As shown in the syntax definition, it is possible to pass arguments to the function you want to invoke. This interval can be cleared by using the clearInterval() method.
Example
Listing 8.580 sets an interval in the <head> of the document that displays the current time in a text box on the page. The interval is set so that it only updates the time in the text box every five seconds. There is also a button on this page that allows you to clear the interval if you click it.
Listing 8.580 Clearing an Interval with the setInterval() Method
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--// Create a variable to hold a counter.
var counter = 1;
// Define a function to display the counter.
function startCounter(){ document.myForm.myText.value = counter++;
}
// Define a function to stop the counter.
function stopCounter(){
window.clearInterval(myInterval);
}
// Set the interval to call the function every 5 seconds.
var myInterval = window.setInterval("startCounter()", 5000)
// -->
</script>
</head>
<body onload="startCounter()">
<form name="myForm">
<input type="text" size="2" value="" name="myText">
<input type="button" value="Clear Interval" onclick="stopCounter()">
</form>
</body>
</html>
window.setResizable()
JavaScript1.2
Nav4
Syntax
window.setResizable(boolean)
Description
The setResizable() method of the Window object enables or disables a user's ability to resize a window. It simply takes a boolean value to perform this option. Passing true will enable the user to resize the window, whereas false will disable this feature.
Example
Listing 8.581 shows how you can disable the resizing of a window.
Listing 8.581 Using the setResizable() Method
<script type="text/javascript" language="JavaScript1.2">
<!--
setResizable(false)
//-->
</script>
window.setTimeout()
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
Syntax
window.setTimeout (expression, milliseconds)
window.setTimeout (function, milliseconds)
window.setTimeout (function, milliseconds, arg1, …, argN)
Description
The setTimeout() method of the Window object sets a timeout to invoke the expression or function that is passed to the method. The expression or function is invoked after the elapse of the milliseconds. As shown in the syntax definition, it is possible to pass arguments to the function you want to invoke. This timeout can be cleared by using the clearTimeout() method.
Example
Listing 8.582 has a button and text box. By default, the time will be displayed in the text box after five seconds. This is done using the setTimeout() method. If the button is clicked, a function is called that invokes the clearTimeout() method, preventing the time from being displayed in the text box.
Listing 8.582 Using the setTimeout() Method
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
// Define a function to show the time.
function showTime(){
myTime = new Date();
myTime = myTime.getHours() + ":" + myTime.getMinutes() + ":";
myTime += myTime.getSeconds();
document.myForm.myText.value = myTime; }
// Define a function to stop the display of the time.
function stopTime(){
window.clearTimeout(myTimeout);
}
// Set the interval to call the function after 5 seconds.
var myTimeout = window.setTimeout("showTime()", 5000)
// -->
</script>
</head>
<body>
<form name="myForm">
<input type="text" size="2" value="" name="myText">
<input type="button" value="Clear Timeout" onclick="stopTime()">
</form>
</body>
</html>
window.setZOptions()
JavaScript1.2
Nav4
Syntax
window.setZOptions(type)
Description
The setZOptions() method of the Window object specifies the z-order stacking behavior of a window. It takes a type to indicate how this stacking can occur. The following are the possible values of type. To set this property in Navigator, you need the UniversalBrowserWrite privilege.
• alwaysLowered—Creates new windows below other windows, whether it is active or not.
• alwaysRaised—Creates new windows on top of other windows, whether it is active or not.
• z-lock—Creates new windows that do not rise above other windows when activated.
Example
Listing 8.583 shows how you can set the z-order stacking of a window.
Listing 8.583 Using the setZOptions() Method
<script type="text/javascript" language="JavaScript1.2">
<!--
// Set to lower ordering setZOptions(alwaysLowered)
//-->
</script>
window.status
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
Syntax
window.status = string
Description
The status property of the Window object allows you to specify the message that is displayed in the status bar of the browser. Note that in JavaScript 1.1, this property was tainted. See Chapter 1 for more information on JavaScript security and data tainting.
Example
Listing 8.584 shows how you can set the status in the Status Bar by rolling over a link.
Listing 8.584 Setting the Status of a Page
<a href="http://www.purejavascript.com/book"
onMouseOver="window.status='Please Visit Our Online Book!'; return true"
onMouseOut="window.status='Document: Done'">
Click Here!</a>
window.statusbar
JavaScript1.2+
Nav4+
Syntax
window.statusbar.property
Description
The statusbar property of the Window object is, to some degree, an object itself. The real use of this property is to access its visible property to determine whether the status bar is visible to the user.
Example
See the example of Window.statusbar.visible for an example of using the status-bar property.
window.statusbar.visible
JavaScript1.2+
Nav4+
Syntax
window.statusbar.visible
Description
The visible subproperty of the statusbar property of the Window is used to determine whether the status bar is visible to the user. If it is visible, the property returns true. It returns false if the bar is not visible.
Example
Listing 8.585 determines whether several of the browser bars are displayed. In the example, you will see whether the status bar is visible by using the visible property.
Listing 8.585 Using the visible Property of statusbar
<script language="JavaScript" type="text/javascript">
<!--
// Write the browser's bar status to the page. If the value
// is true, then it is displayed.
document.writeln('<h3>Browser Chrome Status</h3>')
document.writeln('Menu Bar: ' + window.menubar.visible + '<br>'),
document.writeln('Tool Bar: ' + window.toolbar.visible + '<br>'),
document.writeln('Location Bar: ' + window.locationbar.visible + '<br>'),
document.writeln('Personal Bar: ' + window.personalbar.visible + '<br>'),
document.writeln('Scroll Bars: ' + window.scrollbars.visible + '<br>'),
document.writeln('Status Bar: ' + window.statusbar.visible + '<br>'),
// Close the stream to the
document.
document.close();
// -->
</script>
window.stop()
JavaScript1.2+, Jscript3.0
Nav4+, IE4+
Syntax
window.stop()
Description
The stop() method of the Window object simulates the user clicking the Stop button on the browser. It stops the browser from downloading and rendering the current page.
Example
Listing 8.586 has a button and an image reference to a nonexistent image. The browser will continue to try and download the image until it times out or the download is stopped. Clicking the button will stop the download.
Listing 8.586 Using the stop() Method to Stop a Page from Loading
<html>
<body>
<form>
<input type="button" value="Stop" onclick="window.stop()">
</form>
<p>
<table border="1"color= bgcolor="#FF0000">
<tr>
<td>
<img src="http://www.purejavascript.com/images/fake.gif"
width=468 height=60>
</td>
</tr>
</table>
</p>
</body>
</html>
window.toolbar
JavaScript1.2+
Nav4+
Syntax
window.toolbar.property
Description
The toolbar property of the Window object is, to some degree, an object itself. The real use of this property is to access its visible property to determine whether the toolbar is visible to the user.
Example
See the example of Window.toolbar.visible for an example of using the toolbar property.
window.toolbar.visible
JavaScript1.2+
Nav4+
Syntax
window.toolbar.visible
Description
The visible subproperty of the toolbar property of the Window object is used to determine whether the toolbar is visible to the user. If it is visible, the property returns true. It returns false if the bar is not visible.
Example
Listing 8.587 determines whether several of the browser bars are displayed. In the example, you will see whether the toolbar is visible by using the visible property.
Listing 8.587 Using the visible Property of toolbar
<script language="JavaScript" type="text/javascript">
<!--
// Write the browser's bar status to the page. If the value
// is true, then it is displayed.
document.writeln('<h3>Browser Chrome Status</h3>')
document.writeln('Menu Bar: ' + window.menubar.visible + '<br>'),
document.writeln('Tool Bar: ' + window.toolbar.visible + '<br>'),
document.writeln('Location Bar: ' + window.locationbar.visible + '<br>'),
document.writeln('Personal Bar: ' + window.personalbar.visible + '<br>'),
document.writeln('Scroll Bars: ' + window.scrollbars.visible + '<br>'),
document.writeln('Status Bar: ' + window.statusbar.visible + '<br>'),
// Close the stream to the document.
document.close();
// -->
</script>
window.top
JavaScript1.0+, JScript1.0
Nav2+, IE3+, Opera3+
Syntax
window.top.frames[num]
window.top.frameName
window.top.method
window.top.property
Description
The top property of the Window object contains a reference to the topmost browser window of any frames or pages that are loaded. In the instance where a Frame A loads a page with a <frameset> with Frame A.1 and A.2, the top of the documents in A.1 and A.2 is the window that actually has Frame A loaded. Frame A's top is also this window.
As shown in the syntax definition, the referencing of sibling frames can either be done using the frames array and passing an index number, or you can directly reference a frame using the name that is assigned by the name attribute of the <frame> tag. From within the current page or any of the frames, you can reference the top window and execute any methods or reference any properties that might reside there.
Example
Assuming that the page with this script lies within a <frameset>, Listing 8.588 shows how you can call a function that is defined in the topmost page.
Listing 8.588 Using the top Property to Call a Function in the Top Frame
<script language="JavaScript" type="text/javascript">
<!--// Call a function in the top.
top.myFunc(myVar1, myVar2); // -->
</script>
window.unwatch()
JavaScript 1.2+
Nav4+
Syntax
window.unwatch(property)
Description
The unwatch() method of the Window object is used to turn off the watch for a particular property specified by property.
Example
Listing 8.589 shows how the unwatch() method is used to stop watching the outerHeight property of the Window object after its value has changed.
Listing 8.589 Example of the unwatch() method of the Window object
<script type="text/javascript" language="JavaScript">
<!--
function alertme(id, oldValue, newValue){
document.write("ID (" + id + ") changed from " + oldValue + " to ");
document.write(newValue + "<br>");
return newValue;
}
//Start watch.
window.watch("outerHeight", alertme);
// Change value.
window.outerHeight = 100;
// End watch.
window.unwatch("outerHeight");
// -->
</script>
window.watch()
JavaScript 1.2+
Nav4+
Syntax
window.watch(property)
Description
The watch() method of the Window object is used to turn on the watch for a particular
property specified by property.
Example
Listing 8.590 shows how the watch() method is used to start watching the outerHeight property of the Window object after its value has changed.
Listing 8.590 Example of the watch() method of the Window object
<script type="text/javascript" language="JavaScript">
<!--
function alertme(id, oldValue, newValue){
document.write("ID (" + id + ") changed from " + oldValue + " to ");
document.write(newValue + "<br>");
return newValue;
}
//Start watch.
window.watch("outerHeight", alertme);
// Change value.
window.outerHeight = 100;
// -->
</script>
window.window
JavaScript1.0+, JScript1.0
Nav2+, IE3+, Opera3+
Syntax
window. method
window.property
Description
The window property of the Window object contains a reference to the current window. This allows you to invoke functions or call properties on the current window without any confusion when multiple windows are displayed.
Example
Listing 8.591 shows how to close the current window through the window reference.
Listing 8.591 Using the window Property to Reference the Current Window
<script language="JavaScript" type="text/javascript">
<!--
// Define a function to close the current window.
function closeWin(){
window.close()
// -->
</script>