JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
Creates Instance of Document Object.
window.document.event
window.document.method()
window.document.property
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.
See the entries in this chapter for the Document
object for more information on each of these events, methods, and properties.
Listing 8.529 uses the write()
method of the document
property to write text to the user’s page.
<script language="JavaScript" type="text/javascript">
<!--
// Simply writes out the Hello, World! text
window.document.write("Hello, World!");
// -->
</script>
JavaScript1.2+
Nav4+
window.enableExternalCapture(event)
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
Listing 8.530 enables external event capturing when the document loads.
<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>
JavaScript1.2, JScript3.0
Nav4, IE4
window.find()
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.
Listing 8.531 has a function that pops up a Find box when it is called.
<script language="JavaScript1.2" type="text/javascript">
<!--
// Displays the Find window.
function mySearch(){
window.find();
}
// -->
</script>
JavaScript1.1+, JScript1.0+
Nav3+, IE3+, Opera3+
window.focus()
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.
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.
<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>
JavaScript1.2+, Jscript3.0
Nav4+, IE4+
window.forward()
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.
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.
<html>
<body>
<form>
<input type="button" value="Back" onclick="window.back()">
<input type="button" value="Forward" onclick="window.forward()">
</form>
</body>
</html>
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
window.frames["frameName"]
window.frames[num]
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.
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.
<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>
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
window.frames["frameName"].length
window.frames[num].length
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.
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.
<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>
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
window.object.handleEvent(event)
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.
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.
<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>
JavaScript1.1+, JScript1.0+
Nav3+, IE3+, Opera3+
window.history[num]
window.history.method()
window.history.property
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.
For more information on the History
object and its properties and methods, see its entry in this chapter.
Listing 8.537 has two buttons that allow a user to move forward and back in his history.
<html>
<body>
<form>
<input type="button" value="Back" onclick="window.history.back()">
<input type="button" value="Forward" onclick="window.history.forward()">
</form>
</body>
</html>
JavaScript1.2+, JScript3.0
Nav4+, IE4+
window.home()
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.
Listing 8.538 has a single button that, when clicked, takes the browser to the user’s home page.
<form>
<h3>Home James!</h3>
<input type="button" value="Home" onclick="window.home()">
</form>
JavaScript1.2+
Nav4+
window.innerHeight
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.
Listing 8.539 has a button that, when clicked, opens up a second, smaller window. The innerHeight
property is written to this new window.
<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>
JavaScript1.2+
Nav4+
window.innerWidth
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.
Listing 8.540 has a button that, when clicked, opens up a second, smaller window. The innerWidth
property is written to this new window.
<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>
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
window.length
The length
property of the Window
object represents the number of frames within a window. This returns the same results as Window.frames.length
.
Listing 8.541 shows a function that can be used to return the number of frames in a window.
<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>
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
window.location
The location
property of the Window
object returns the current URL of the document in the window.
Listing 8.542 pops up an alert box that contains the URL of the current window.
<script language="JavaScript" type="text/javascript">
<!--
// Display the current URL in an alert box.
alert(window.location);
// -->
</script>
JavaScript1.2+
Nav4+
window.locationbar.property
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.
See the example of Window.locationbar.visible
for an example of using the locationbar
property.
JavaScript1.2+
Nav4+
window.locationbar.visible
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.
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.
<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>
JavaScript1.2+
Nav4+
window.menubar.property
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.
See the example of Window.menubar.visible
for an example of using the menubar
property.
JavaScript1.2+
Nav4+
window.menubar.visible
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.
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.
<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>
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
window.moveBy(numHorz, numVert)
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.
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.
<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>
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
window.moveTo(numX, numY)
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.
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.
<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>
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
window.name
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.
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.
<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>
JavaScript1.2, JScript3.0+
Nav4+, IE4+
window.offscreenBuffering = boolean
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.
Listing 8.548 shows how you can instruct the browser to not buffer data offscreen.
<script type="text/javascript" language="JavaScript1.2">
<!--
// Disallow off screen buffering
window.offscreenBuffering = false;
//-->
</script>
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
onblur="command"
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.
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.
<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>
JavaScript1.2+
Nav4+
ondragdrop="command"
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.
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.
<html>
<body ondragdrop='return(confirm("Are you sure you want to continue?"))'>
Try to drop an element on this page.
</body>
</html>
JavaScript1.1+, JScript1.0+
Nav3+, IE3+, Opera3+
onerror="command"
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.
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.
<body onerror='alert("Error: There has been an error loading this page.")'>
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
onfocus="command"
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.
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.
<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>
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
onload="command"
The onLoad
event handler of a property of a Window
object is fired when the page has finished loading in that particular window instance.
Listing 8.553 pops up an alert box when the page has finished loading.
<body onload='alert("The document has completely loaded.")'>
JavaScript1.2+
Nav4+
onmove="command"
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.
Listing 8.554 pops up an alert box if the user tries to move the window.
<body onmove='alert("Do NOT move this window!")'>
JavaScript1.2+
Nav4+
onresize="command"
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.
Listing 8.555 pops up an alert box if the user tries to resize the window.
<body onresize='alert("Do NOT resize this window!")'>
JavaScript 1.0+, JScript 1.0+
Nav2+, IE3+, Opera3+
onunload="command"
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.
Listing 8.556 pops up an alert box when the user leaves the page.
<body onunload='alert("Please do not leave!")'>
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
window.open(pageURL, name, parameters)
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.
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.
<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>
JavaScript1.1+, JScript1.0+
Nav3+, IE3+, Opera3+
window.opener
window.opener.method
window.opener.property
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
.
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.
<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>
JavaScript1.2+
Nav4+
window.outerHeight
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.
Listing 8.559 has a button that, when clicked, opens up a second, smaller window. The outerHeight
property is written to this new window.
<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>
JavaScript1.2+
Nav4+
window.outerWidth
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.
Listing 8.560 has a button that, when clicked, opens up a second, smaller window. The outerWidth
property is written to this new window.
<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>
JavaScript1.2+, JScript3+
Nav4+, IE4+
window.pageXOffset
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.
Listing 8.561 has a button that, when clicked, displays the current x and y coordinates 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>
JavaScript1.2+, JScript3+
Nav4+, IE4+
window.pageYOffset
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.
Listing 8.562 has a button that, when clicked, displays the current x and y coordinates 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>
JavaScript1.0+, JScript1.0
Nav2+, IE3+, Opera3+
window.parent.parent[num]
window.parent.frameName
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.
Listing 8.563 shows how to reference the parent of the third frame on a page.
var myFrameReference = myWin.parent.frames[2];
JavaScript1.2+
Nav4+
window.personalbar.property
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.
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.
<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>
JavaScript1.2+
Nav4+
window.personalbar.visible
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.
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.
<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>
JavaScript 1.2+, JScript 3.0+
Nav4+, IE4+
window.print()
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.
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.
<html>
<body>
<form>
<input type="button" value="Print" onclick="window.print()">
</form>
</body>
</html>
JavaScript1.0+, JScript1.0
Nav2+, IE3+, Opera3+
window.prompt(string1, string2)
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.
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.
<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>
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
window.releaseEvents(event)
window.releaseEvents(event1 | event2 | eventN)
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.
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.
<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>
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
window.resizeBy(numHort, numVert)
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.
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.
<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>
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
window.resizeTo(numWidth, numHeight)
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.
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.
<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>
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
window.routeEvent
(event)
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.
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.
<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.
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
windows.screenX
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.
Listing 8.572 simply pops up an alert box that contains the screenX
property value.
<html>
<body>
<script type="text/javascript" language="JavaScript1.2">
<!--
alert(window.screenX)
//-->
</script>
</body>
</html>
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
window.screenY
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.
Listing 8.573 simply pops up an alert box that contains the screenY
property value.
<html>
<body>
<script type="text/javascript" language="JavaScript1.2">
<!--
alert(window.screenY)
//-->
</script>
</body>
</html>
JavaScript1.1, JScript3.0
Nav3, IE3, Opera3
window.scroll(numX, numY)
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.
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.
<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>
JavaScript1.2+
Nav4+
window.scrollbars.property
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.
See the example of Window.scrollbars.visible
for an example of using the scrollbars
property.
JavaScript1.2+
Nav4+
window.scrollbars.visible
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.
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.
<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>
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
window.scrollBy(numHorz, numVert)
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.
Listing 8.576 has four buttons. Each of these buttons scroll the windows contents in different directions when clicked.
<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>
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
window.scrollTo(numX, numY)
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.
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.
<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>
JavaScript1.0+, JScript1.0
Nav2+, IE3+, Opera3+
window.self.method
window.self.property
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.
Listing 8.578 shows how to close the current window through the self
reference.
<script language="JavaScript" type="text/javascript">
<!--
// Define a function to close the current window
function closeWin(){
self.close()
// -->
</script>
JavaScript1.2
Nav4
window.setHotKeys(boolean)
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.
Listing 8.579 shows how you can disable hot keys for a given window.
<script type="text/javascript" language="JavaScript1.2">
<!--
setHotKeys(false)
//-->
</script>
JavaScript1.2+, JScript3.0+
Nav4+, IE4+
window.setInterval(expression, milliseconds)
window.setInterval(function, milliseconds)
window.setInterval(function, milliseconds, arg1, …, argN)
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.
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.
<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>
JavaScript1.2
Nav4
window.setResizable(boolean)
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.
Listing 8.581 shows how you can disable the resizing of a window.
<script type="text/javascript" language="JavaScript1.2">
<!--
setResizable(false)
//-->
</script>
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
window.setTimeout (expression, milliseconds)
window.setTimeout (function, milliseconds)
window.setTimeout (function, milliseconds, arg1, …, argN)
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.
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.
<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>
JavaScript1.2
Nav4
window.setZOptions(type)
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.
Listing 8.583 shows how you can set the z-order stacking of a window.
<script type="text/javascript" language="JavaScript1.2">
<!--
// Set to lower ordering setZOptions(alwaysLowered)
//-->
</script>
JavaScript1.0+, JScript1.0+
Nav2+, IE3+, Opera3+
window.status = string
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.
Listing 8.584 shows how you can set the status in the Status Bar by rolling over a link.
<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>
JavaScript1.2+
Nav4+
window.statusbar.property
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.
See the example of Window.statusbar.visible
for an example of using the status-bar
property.
JavaScript1.2+
Nav4+
window.statusbar.visible
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.
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.
<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>
JavaScript1.2+, Jscript3.0
Nav4+, IE4+
window.stop()
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.
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.
<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>
JavaScript1.2+
Nav4+
window.toolbar.property
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.
See the example of Window.toolbar.visible
for an example of using the toolbar
property.
JavaScript1.2+
Nav4+
window.toolbar.visible
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.
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.
<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>
JavaScript1.0+, JScript1.0
Nav2+, IE3+, Opera3+
window.top.frames[num]
window.top.frameName
window.top.method
window.top.property
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.
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.
<script language="JavaScript" type="text/javascript">
<!--// Call a function in the top.
top.myFunc(myVar1, myVar2); // -->
</script>
JavaScript 1.2+
Nav4+
window.unwatch(property)
The unwatch()
method of the Window
object is used to turn off the watch for a particular property specified by property.
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.
<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>
JavaScript 1.2+
Nav4+
window.watch(property)
The watch()
method of the Window
object is used to turn on the watch for a particular
property specified by property.
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.
<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>
JavaScript1.0+, JScript1.0
Nav2+, IE3+, Opera3+
window. method
window.property
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.
Listing 8.591 shows how to close the current window through the window
reference.
<script language="JavaScript" type="text/javascript">
<!--
// Define a function to close the current window.
function closeWin(){
window.close()
// -->
</script>
18.226.177.125