Inside JavaScript

The window Object

The window object is the big cheese object in the browser object model, and it contains other objects, such as the document object, the location object, and others. The window object refers to the current browser window, and it's got plenty of useful built-in methods , such as alert , which displays a new alert dialog box, and open , which opens a new browser window.

We've already seen the alert method in action, so here's an example putting the open method to workwhen the user clicks a button here, a new browser window will open; when the user clicks the other button, the new window will close:

(Listing 04-02.html on the web site)

<HTML> <HEAD> <TITLE>Opening and Closing a Window</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var window1 function openWindow() { window1 = window.open("", "", "HEIGHT=200,WIDTH=400") } function closeWindow() { window1.close() } // --> </SCRIPT> </HEAD> <BODY> <H1>Opening and Closing a Window</H1> <FORM> <INPUT TYPE="BUTTON" VALUE="Open a window" ONCLICK="openWindow()"> <INPUT TYPE="BUTTON" VALUE="Close the window" ONCLICK="closeWindow()"> </FORM> </BODY> </HTML>

You can see the results of this code in Figure 4.4, where I've opened a new window. We'll see more on the open method in Chapter 8, "Using window and frame Methods and Events."

Figure 4.4. Opening a new browser window.

The window.status object also gives you access to the browser's status bar (which appears at the bottom of the browser), something that's very popular with JavaScript programmers. Here's an examplein this case, I'm displaying Hello! when the mouse rolls over a hyperlink, and Good Bye! when it leaves the hyperlink (the JavaScript functions called here must return a value of true, as we'll see when we cover the window object in Chapter 7, "Using window and frame Properties," and in Chapter 8, or the browser will just display the URL of the hyperlinkits default behavior, in this case):

(Listing 04-03.html on the web site)

<HTML> <HEAD> <TITLE>Using the Status Bar</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function sayHello() { window.status = "Hello!" return true } function sayGoodBye() { window.status = "Good Bye!" return true } // --> </SCRIPT> </HEAD> <BODY> <H1>Using the Status Bar</H1> <A HREF="http://www.starpowder.com" onMouseOver="return sayHello()" onMouseOut="return sayGoodBye()">Here's my site!</A><P> </BODY> </HTML>

You can see the results of this code in Figure 4.5.

Figure 4.5. Using a browser's status bar.

You'll find the properties, methods, and events of the window object in Table 4.6. Not all properties, methods, and events will be supported in all browsers, of course. We'll get the full story on browser version for each property, method, and event of the window object in Chapters 7 and 8.

Table 4.6. The Properties, Methods, and Events of the window Object

Properties

Methods

Events

appCore

alert

onactivate

clientInformation

attachEvent

onafterprint

clipboardData

back

onbeforedeactivate

closed

blur

onbeforeprint

Components

captureEvents

onbeforeunload

controllers

clearInterval

onblur

crypto

clearTimeout

oncontrolselect

defaultStatus

close

ondeactivate

dialogArguments

confirm

onerror

dialogHeight

createPopup

onfocus

dialogLeft

detachEvent

onhelp

dialogTop

disableExternalCapture

onload

dialogWidth

enableExternalCapture

onmove

directories

execScript

onmoveend

document

find

onmovestart

event

fireEvent

onresize

external

focus

onscroll

frameElement

forward

onunload

frames

getComputedStyle

 

history

GetAttention

 

innerHeight

handleEvent

 

innerWidth

home

 

length

moveBy

 

loading

moveTo

 

location

navigate

 

locationbar

open

 

menubar

print

 

name

prompt

 

navigator

releaseEvents

 

offscreenBuffering

resizeBy

 

opener

resizeTo

 

outerHeight

routeEvent

 

outerWidth

scroll

 

pageXOffset

scrollBy

 

pageYOffset

scrollByLines

 

parent

scrollByPages

 

personalbar

scrollTo

 

pkcs11

setActive

 

prompter

setCursor

 

returnValue

setInterval

 

screen

setTimeout

 

screenLeft

showHelp

 

screenTop

showModalDialog

 

screenX

showModelessDialog

 

screenY

sizeToContent

 

scrollbars

stop

 

scrollX

   

scrollY

   

self

   

sidebar

   

status

   

statusbar

   

toolbar

   

top

   

window

   

Категории