JavaScript Bible, Gold Edition part 41 docx

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 The parentproperty and the topproperty that follows later in this section comes into play primarily when a document is to be displayed as part

Trang 1

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

The parentproperty (and the topproperty that follows later in this section) comes into play primarily when a document is to be displayed as part of a multi-frame window The HTML documents that users see in the multi-frames of a multimulti-frame browser window are distinct from the document that specifies the frameset for the entire window That document, though still in the browser’s memory (and appear-ing as the URL in the location field of the browser), is not otherwise visible to the user (except in the Source View)

If scripts in your visible documents need to reference objects or properties of the frameset window, you can reference those frameset window items with the parentproperty (do not, however, expand the reference by preceding it with the windowobject, as in window.parent.propertyName, as this causes problems in early browsers) In a way, the parentproperty seems to violate the object hierar-chy because, from a single frame’s document, the property points to a level seem-ingly higher in precedence If you didn’t specify the parentproperty or instead specified the selfproperty from one of these framed documents, the object refer-ence is to the frame only, rather than to the outermost framesetting windowobject

A nontraditional but perfectly legal way to use the parentobject is as a means

of storing temporary variables Thus, you could set up a holding area for individual variable values or even an array of data These values can then be shared among all documents loaded into the frames, including when documents change inside the frames You have to be careful, however, when storing data in the parent on the fly (that is in response to user action in the frames) Variables can revert to their default values (that is, the values set by the parent’s own script) if the user resizes the window in early browsers

A child window can also call a function defined in the parent window The refer-ence for such a function is

parent.functionName([parameters])

At first glance, it may seem as though the parentand topproperties point to the same framesetting windowobject In an environment consisting of one frameset window and its immediate children, that’s true But if one of the child windows was, itself, another framesetting window, then you wind up with three generations of windows From the point of view of the “youngest” child (for example, a window defined by the second frameset), the parentproperty points to its immediate par-ent, whereas the topproperty points to the first framesetting window in this chain

On the other hand, a new window created via the window.open()method has

no parent–child relationship to the original window The new window’s topand parentpoint to that new window You can read more about these relationships in the “Frames” section earlier in this chapter

windowObject.parent

Trang 2

Example (with Figure 16-8 and Listings 16-14 and 16-15) on the CD-ROM

Related Items:window.frames, window.self, window.topproperties

personalbar

See directories

returnValue

Scripts use the returnValueproperty in a document that loads into the

IE-spe-cific modal dialog box A modal dialog box is generated via the showModalDialog()

method, which returns whatever data has been assigned to the returnValue

prop-erty of the dialog box window before it closes This is possible because script

pro-cessing in the main window freezes while the modal dialog box is visible As the

dialog box closes, a value can be returned to the main window’s script right where

the modal dialog box was invoked, and the main window’s script resumes executing

statements

Example on the CD-ROM

Related Items:showModalDialog()method

screen

Although the screenobject appears as a property of the windowobject only in

the most recent browsers, the screenobject is also available in NN4 (see Chapter

28), but as a standalone object Because you can omit any reference to the window

object for a windowobject’s properties, the same window-less reference syntax can

be used for compatibility across all browsers that support the screenobject

That’s the way I recommend referring to the screenobject

On the

CD-ROM

On the

CD-ROM

windowObject.screen

Trang 3

See Chapter 28 for examples of using the screenobject to determine the video monitor characteristics of the computer running the browser

Related Items:screenobject

screenLeft

screenTop

IE5+ (but not IE5/Mac) provides the screenLeftand screenTopproperties of the windowobject to let you read the pixel position (relative to the top-left 0,0

coor-dinate of the video monitor) of what Microsoft calls the client area of the browser

window The client area excludes most window chrome, such as the title bar, address bar, and the window sizing bar Therefore, when the IE5 browser window is maximized (meaning that no sizing bars are exposed), the screenLeftproperty of the window is 0, while the screenTopproperty varies depending on the combina-tion of toolbars the user has elected to display For non-maximized windows, if the window has been positioned so that the top and/or left part of the client area are out of view, their property values will be negative integers

These two properties are read-only You can position the browser window via the window.moveTo()and window.moveBy()methods, but these methods position the top-left corner of the entire browser window, not the client area IE browsers, through version 5.5, do not provide properties for the position of the entire browser window

Related Items:window.moveTo(), window.moveBy()methods

screenX

screenY

On the

CD-ROM

windowObject.screenX

Trang 4

NN6 provides the screenXand screenYproperties to read the position of the

outer boundary of the browser window relative to the top-left coordinates (0,0) of

the video monitor The browser window includes the four-pixel wide window sizing

bars that surround Win32 windows Therefore, when the NN6/Win32 browser

win-dow is maximized, the values for both screenXand screenYare -4 Netscape does

not provide the equivalent measures of the browser window client area as found in

the screenLeftand screenTopproperties of IE5 You can, however, find out if

var-ious toolbars are visible in the browser window (see window.directories)

Both properties can be changed by script to alter the location of the window, but

the window.moveTo()and window.moveBy()methods are more convenient,

because only one statement is needed to handle both coordinates

Related Items:window.moveTo(), window.moveBy()methods

scrollbars

See directories

scrollX

scrollY

The NN6 scrollXand scrollYproperties let you determine the horizontal and

vertical scrolling of a window Scrolling is possible only if the window displays

scrollbars along the desired axis Values are pixel integers

While the IE DOM does not provide similar properties for the window, the same

information can be derived from the body.scrollLeftand body.scrollTop

properties

Related Items:body.scrollLeft, body.scrollTopproperties

On the

CD-ROM

On the

CD-ROM

windowObject.scrollX

Trang 5

Just as the windowobject reference is optional, so too is the selfproperty when the object reference points to the same window as the one containing the reference

In what may seem to be an unusual construction, the selfproperty represents the same object as the window For instance, to obtain the title of the document in a single-frame window, you can use any of the following three constructions:

window.document.title self.document.title document.title

Although selfis a property of a window, you should not combine the references within a single-frame window script (for example, don’t begin a reference with window.self, which has been known to cause numerous scripting problems) Specifying the selfproperty, though optional for single-frame windows, can help make an object reference crystal clear to someone reading your code (and to you, for that matter) Multiple-frame windows are where you need to pay particular attention to this property

JavaScript is pretty smart about references to a statement’s own window

Therefore, you can generally omit the selfpart of a reference to a same-window document element But when you intend to display a document in a multiframe window, complete references (including the selfprefix) to an object make it much easier on anyone who reads or debugs your code to track who is doing what to whom You are free to retrieve the selfproperty of any window The value that comes back is a windowobject reference

Example (with Listing 16-16) on the CD-ROM

Related Items:window.frames, window.parent, window.topproperties

sidebar

See appCore

status

On the

CD-ROM

windowObject.status

Trang 6

At the bottom of the browser window is a statusbar Part of that bar includes an

area that normally discloses the document loading progress or the URL of a link

that the mouse is pointing to at any given instant You can control the temporary

content of that field by assigning a text string to the windowobject’s status

prop-erty (Figure 16-9) You should adjust the statusproperty only in response to

events that have a temporary effect, such as a link or image map area object’s

onMouseOverevent handler When the statusproperty is set in this situation, it

overrides any other setting in the statusbar If the user then moves the mouse

pointer away from the object that changes the statusbar, the bar returns to its

default setting (which may be empty on some pages)

Figure 16-9: The statusbar can be set to display a custom

message when the pointer rolls over a link

Use this window property as a friendlier alternative to displaying the URL of a

link as a user rolls the mouse around the page For example, if you’d rather use the

statusbar to explain the nature of the destination of a link, put that text into the

statusbar in response to the onMouseOverevent handler But be aware that

experi-enced Web surfers like to see URLs down there Therefore, consider creating a

hybrid message for the statusbar that includes both a friendly description followed

by the URL in parentheses In multiframe environments, you can set the window

statusproperty without having to worry about referencing the individual frame

Example (with Listings 16-17, 16-18, and 16-19) on the CD-ROM

Related Items:window.defaultStatusproperty; onMouseOver, onMouseOut

event handlers; linkobject

statusbar

toolbar

See locationbar

On the

CD-ROM

windowObject.statusbar

Trang 7

The windowobject’s topproperty refers to the topmost window in the docu-ment object hierarchy For a single-frame window, the reference is to the same object as the window itself (including the selfand parentproperties), so do not include windowas part of the reference In a multiframe window, the top window is the one that defines the first frameset (in case of nested framesets) Users don’t ever really see the top window in a multiframe environment, but the browser stores

it as an object in its memory The reason is that the top window has the road map

to the other frames (if one frame should need to reference an object in a different frame), and its children frames can call upon it Such a reference looks like

top.functionName([parameters])

For more about the distinction between the topand parentproperties, see the in-depth discussion about scripting frames at the beginning of this chapter See also the example of the parentproperty for listings that demonstrate the values of the topproperty

Related Items:window.frames, window.self, window.parentproperties

window

Listing the windowproperty as a separate property may be more confusing than helpful The windowproperty is the same object as the windowobject You do not need to use a reference that begins with window.window Although the window object is assumed for many references, you can use windowas part of a reference to items in the same window or frame as the script statement that makes that refer-ence You should not, however, use windowas a part of a reference involving items higher up in the hierarchy (topor parent)

windowObject.window

Trang 8

alert(“message”)

Returns: Nothing.

An alert dialog box is a modal window that presents a message to the user with a

single OK button to dismiss the dialog box As long as the alert dialog box is

show-ing, no other application or window can be made active The user must dismiss the

dialog box before proceeding with any more work in the browser

The single parameter to the alert()method can be a value of any data type,

including representations of some unusual data types whose values you don’t

normally work with in JavaScript (such as complete objects) This makes the alert

dialog box a handy tool for debugging JavaScript scripts Anytime you want to

mon-itor the value of an expression, use that expression as the parameter to a

tempo-rary alert()method in your code The script proceeds to that point and then

stops to show you the value (See Chapter 45 for more tips on debugging scripts.)

What is often disturbing to application designers is that all JavaScript-created

modal dialog boxes (via the alert(), confirm(), and prompt()methods) identify

themselves as being generated by JavaScript or the browser The look is

particu-larly annoying in browsers before NN4 and IE4, because the wording appears

directly in the dialog box’s content area, rather than in the title bar of the dialog

box The purpose of this identification is to act as a security precaution against

unscrupulous scripters who might try to spoof system or browser alert dialog

boxes, inviting a user to reveal passwords or other private information These

iden-tifying words cannot be overwritten or eliminated by your scripts You can simulate

a modal dialog box window in a cross-browser fashion (see an article at http://

developer.netscape.com/viewsource/goodman_modal/goodman_modal.html),

but it is not as robust as a genuine modal window, which you can create in IE4+ via

the window.showModalDialog()method

Because the alert()method is of a global nature (that is, no particular frame in

a multiframe environment derives any benefit from laying claim to the alert dialog

box), a common practice is to omit all windowobject references from the statement

that calls the method Restrict the use of alert dialog boxes in your HTML

docu-ments and site designs The modality of the windows is disruptive to the flow of a

user’s navigation around your pages Communicate with users via forms or by

writ-ing to separate document window frames

Example (with Figure 16-10 and Listing 16-20) on the CD-ROM

Related Items:window.confirm(), window.prompt()methods

On the

CD-ROM

windowObject.alert()

Trang 9

forward()

The purpose of the window.back()and window.forward()methods in NN4 is

to offer a scripted version of the global back and forward navigation buttons, while allowing the historyobject to control navigation strictly within a particular win-dow or frame — as it should These winwin-dow methods did not catch on in IE (and the windowobject is out of the scope of the W3C DOM Level 2), so you are better off staying with the historyobject’s methods for navigating through browser history For more information about version compatibility and the back and forward naviga-tion, see the historyobject in Chapter 17

Related Items:history.back(), history.forward(), history.go()methods

captureEvents(eventTypeList)

In Navigator 4, an event filters down from the windowobject and eventually reaches its intended target For example, if you click a button, the click event first reaches the windowobject; then it goes to the documentobject; and eventually (in

a split second) it reaches the button, where an onClickevent handler is ready to act on that click

The NN4 “trickle-down” event propagation mechanism allows window, docu-ment, and layer objects to intercept events and process them prior to reaching their intended targets (or preventing them from reaching their destinations entirely) But for one of these outer containers to grab an event, your script must instruct it to capture the type of event your application is interested in preprocess-ing If you want the windowobject to intercept all events of a particular type, use the window.captureEvents()method to turn that facility on

On the

CD-ROM

windowObject.captureEvents()

Trang 10

NN6 (and future browsers that implement the W3C DOM event model) has both a

trickle-down and bubble-up event model combination The syntax for using event

capture in NN6 is quite different from that in NN4 The discussions of the

captureEvents(), releaseEvents(), handleEvent(), and routeEvent()

methods of the window, document, and layer objects apply only to Navigator 4 If

your DHTML page design does not need to support NN4, you can skip these

discussions

The window.captureEvents()method takes one or more event types as

parameters An event type is a constant value built inside the Navigator 4 Event

object One event type exists for every kind of event handler you see in all of the

Navigator 4 document objects The syntax is the event object name (Event) and the

event name in all uppercase letters For example, if you want the window to

inter-cept all click events, the statement is

window.captureEvents(Event.CLICK)

For multiple events, add them as parameters, separated by the pipe (|) character:

window.captureEvents(Event.MOUSEDOWN | Event.KEYPRESS)

After an event type is captured by the windowobject, a function must be ready to

deal with the event For example, perhaps the function looks through all Event

MOUSEDOWNevents and looks to see if the right mouse button was the one that

trig-gered the event and what form element (if any) is the intended target The goal is to

perhaps display a pop-up menu (as a separate layer) for a right-click If the click

comes from the left mouse button, the event is routed to its intended target

To associate a function with a particular event type captured by a windowobject,

assign a function to the event For example, to assign a custom doClickEvent()

function to clickevents captured by the windowobject, use the following statement:

window.onclick=doClickEvent

Note that the function name is assigned only as a reference name (no quotes or

parentheses), not like an event handler within a tag The function itself is like any

function, but it has the added benefit of automatically receiving an instance of the

Eventobject as a parameter To turn off event capture for one or more event types,

use the window.releaseEvent()method

Capturing events at the window, document, or layer level in NN4 does not always

work the way you might like This is especially true if your page contains tables For

example, capturing mouse events has no effect in the Windows version of NN4

unless the cursor is atop a cell border Event capture works most reliably when a

scriptable object has an event handler defined for it (even if it is an empty string)

and the element is the target of the event (for example, you are about to type into

a text field) For all other elements, events may simply not be captured at the

doc-ument or window level

Note

windowObject.captureEvents()

Định dạng
Số trang	10
Dung lượng	365,59 KB