JavaScript Bible, Gold Edition part 46 pot

Properties Methods Event Handlers borderColor contentDocument Document frameBorder height longDesc marginHeight marginWidth noResize scrolling src width Syntax Accessing properties or me

Trang 1

Note: Resizing the Navigator 4 browser window, especially if that window con-tains positioned elements (as DIV or LAYER elements) causes serious problems not only for the content, but also for scripts in the page Content can get jumbled, and scripts may disappear Your only hope is to use an onResizeevent handler to reload the page and get back to a known point For some ideas on handling this problem, see the article at http://developer.netscape.com/viewsource/ goodman_resize/goodman_resize.html One point not covered in the article is that the Windows version of NN4 issues a resizeevent when scroll bars appear in

a window This resizeevent can make any reload-on-resize strategy turn into an infinite loop To guard against this, you have to inspect the window.innerWidth and window.innerHeightproperties to see if the window has really changed (the property values don’t change when the scrollbars appear) Here is an example of script statements that go in the Head script of a page that has to worry about this problem in NN4:

var Nav4 = (navigator.appName == “Netscape” &&

parseInt(navigator.appVersion) == 4)

if (Nav4) { var loadWidth = window.innerWidth var loadHeight = window.innerHeight }

function restore() {

if (loadWidth != window.innerWidth || loadHeight != window.innerHeight) { history.go(0)

} }

if (Nav4) window.onresize = restore

Related Items:eventobject (Chapter 29)

onUnload

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

An unloadevent reaches the current window just before a document is cleared from view The most common ways windows are cleared are when new HTML docu-ments are loaded into them or when a script begins writing new HTML on the fly for the window or frame

Limit the extent of the onUnloadevent handler to quick operations that do not inhibit the transition from one document to another Do not invoke any methods that display dialog boxes You specify onUnloadevent handlers in the same places

in an HTML document as the onLoadhandlers: as a <BODY>tag attribute for a sin-gle-frame window or as a <FRAMESET>tag attribute for a multiframe window Both onLoadand onUnloadevent handlers can appear in the same <BODY>or <FRAME-SET>tag without causing problems The onUnloadevent handler merely stays

windowObject.onUnload

Trang 2

safely tucked away in the browser’s memory, waiting for the unloadevent to arrive

for processing as the document gets ready to clear the window

Let me pass along one caution about the onUnloadevent handler Even though

the event fires before the document goes away, don’t burden the event handler with

time-consuming tasks, such as generating new objects or submitting a form The

document will probably go away before the function completes, leaving the

func-tion looking for objects and values that no longer exist The best defense is to keep

your onUnloadevent handler processing to a minimum

Related Items:onLoadevent handler

FRAME Element Object

For HTML element properties, methods, and event handlers, see Chapter 15

Properties Methods Event Handlers

borderColor

contentDocument

Document

frameBorder

height

longDesc

marginHeight

marginWidth

noResize

scrolling

src

width

Syntax

Accessing properties or methods of a FRAME element object from a FRAMESET:

(IE4+) document.all.frameID property | method([parameters])

(IE5+/NN6) document.getElementById(“frameID”) property | method([parameters])

Accessing properties of methods of a FRAME element from a frame document:

(IE4+) parent.document.all.frameID property | method([parameters])

(IE5+/NN6) parent.document.getElementById(“frameID”) property |

method([parameters])

FRAME

Trang 3

About this object

As noted in the opening section of this chapter, a FRAME element object is dis-tinct from the frame object that acts as a windowobject in a document hierarchy The FRAME element object is available to scripts only when all HTML elements are exposed in the object model, as in IE4+ and NN6

Because the FRAME element object is an HTML element, it shares the properties, methods, and event handlers of all HTML elements, as described in Chapter 15 By and large, you access the FRAME element object to set or modify an attribute value

in the <FRAME>tag If so, you simplify matters if you assign an identifier to the ID attribute of the tag Your tag still needs a NAMEattribute if your scripts refer to frames through the original object model (a parent.frameNamereference) While there is no law against using the same identifier for both NAMEand IDattributes, using different names to prevent potential conflict with references in browsers that recognize both attributes is best

To modify the dimensions of a frame, you must go the FRAMESET element object that defines the COLSand ROWSattributes for the frameset These properties can be modified on the fly in IE4+ and NN6

Properties borderColor

Value: Hexadecimal triplet or color name string Read/Write

If a frame displays a border (as determined by the FRAMEBORDERattribute of the FRAME element or BORDERattribute of the FRAMESET element), it can have a color set separately from the rest of the frames The initial color (if different from the rest

of the frameset) is usually set by the BORDERCOLORattribute of the <FRAME>tag After that, scripts can modify settings as needed

Modifying a single frame’s border can be risky at times, depending on your color combinations In practice, different browers appear to follow different rules when it comes to negotiating conflicts or defining just how far a single frame’s border extends into the border space Moreover, IE5/Windows exhibits some strange col-oration behavior when applying a border color to a single frame Color changes to individual frame borders do not always render Verify your designs on as many browsers and operating system variations as you can to test your combinations Example on the CD-ROM

Related Items:FRAME.frameBorder, FRAMESET.frameBorderproperties

On the

CD-ROM

FRAME.borderColor

Trang 4

Value:documentobject reference Read-Only

The contentDocumentproperty of a FRAME element object is nothing more

than a reference to the document contained by that frame This property bridges

the gap between the FRAME element object and the frame object Both of these

objects contain the same documentobject, but from a scripting point of view,

refer-ences most typically use the frame object to reach the document inside a frame,

while the FRAME element is used to access properties equated with the FRAME

tag’s attributes But if your script finds that it has a reference to the FRAME element

object, you can use the contentDocumentproperty to get a valid reference to the

document, and therefore any other content of the frame

Example on the CD-ROM

Related Items:documentobject

Document

Value:documentobject Read-Only

Because IE4 for Windows implements frames as what are known as ActiveX Web

Browser objects, there are times when the properties of the Web Brower object can

fill in when the regular object model has a gap Such is the case when trying to gain

access to the documentobject contained by a FRAME element object Recall (from

Chapter 15) that the documentproperty of an HTML element refers to the document

that contains the current object In the case of a FRAME element, that would be the

framesetting document But to jump across the normal element node hierarchy from

the FRAME element to the document it contains, you can use the Document

(upper-case “D”) property.Even though IE5 no longer uses the Web Browser object for

frames, the Documentproperty continues to be available

Related Items:window.documentproperty

On the

CD-ROM

On the

CD-ROM

FRAME.Document

Trang 5

Value:yes| no| 1| 0as strings Read/Write

The frameBorderproperty offers scripted access to a FRAME element object’s FRAMEBORDERattribute setting IE4+ does not respond well to modifying this prop-erty after the page has loaded

Values for the frameBorderproperty are strings that substitute for Boolean values Values yesor 1mean that the border is (supposed to be) turned on; noor 0 turn off the border

Related Items:FRAMESET.frameBorderproperties

height

width

IE4+ lets you retrieve the height and width of a FRAME element object These values are not necessarily the same as the document.body.clientHeightand document.body.clientWidth, because the frame dimensions include chrome associated with the frame, such as scrollbars These values are read-only If you need to modify the dimensions of a frame, do so via the FRAMESET element object’s rowsand/or colsproperties Reading integer values for a frame’s height and width properties is much easier than trying to parse the rowsand colsstring properties Example on the CD-ROM

Related Items: FRAMESET object.

On the

CD-ROM

On the

CD-ROM

FRAME.height

Trang 6

Value: URL String Read/Write

The longDescproperty is the scripted equivalent of the LONGDESCattribute of

the <FRAME>tag This HTML 4.0 attribute is intended to provide browsers with a

URL to a document that contains a long description of the element Future browsers

can use this feature to provide information about the frame for visually impaired

site visitors

marginHeight

marginWidth

Browsers tend to automatically insert content within a frame by adding a margin

between the content and the edge of the frame These values are represented by

the marginHeight(top and bottom edges) and marginWidth(left and right edges)

properties Although the properties are not read-only, changing the values after the

frameset has loaded does not alter the appearance of the document in the frame If

you need to alter the margin(s) of a document inside a frame, adjust the document

body.stylemargin properties

Also be aware that although the default values of these properties are empty

(meaning when no MARGINHEIGHTor MARGINWIDTHattributes are set for the

<FRAME>tag), margins are built into the page The precise pixel count of those

margins varies with operating system

Related Items:styleobject (Chapter 30)

noResize

Web designers commonly fix their framesets so that users cannot resize the

frames (by dragging any divider border between frames) The noResizeproperty

FRAME.noResize

Trang 7

lets you read and adjust that behavior of a frame after the page has loaded For example, during some part of the interaction with a user on a page, you may allow the user to modify the frame size manually while in a certain mode Or you may grant the user one chance to resize the frame When the onResizeevent handler fires, a script sets the noResizeproperty of the FRAME element to false If you turn off resizing for a frame, all edges of the frame become non-resizable, regardless

of the noResizevalue setting of adjacent frames Turning off resizability has no effect on the ability of scripts to alter the sizes of frames via the FRAMESET element object’s colsor rowsproperties

Related Items:FRAMESET.cols, FRAMESET.rowsproperties

scrolling

Value:yes| no| 1| 0as strings Read/Write

The scrollingproperty lets scripts turn scrollbars on and off inside a single frame of a frameset By default, scrolling is turned on unless overridden by the SCROLLattribute of the <FRAME>tag

Values for the scrollingproperty are strings that substitute for Boolean values Values yesor 1mean that scrollbars are visible (provided there is more content than can be viewed without scrolling); noor 0hide scrollbars in the frame IE4+ also recognizes (and sets as default) the auto value

This property is partially broken in IE5.5/Windows While the object records changes to the property, the frame’s appearance does not change NN6 has the same problem, plus some others, such as the property not returning a value unless the SCROLLING attribute is specified in the FRAME element’s tag

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

On the

CD-ROM

Note

On the

CD-ROM

FRAME.scrolling

Trang 8

Value: URL String Read/Write

The srcproperty of a FRAME element object offers an additional way of

navigat-ing to a different page within a frame (meannavigat-ing other than assignnavigat-ing a new URL to

the location.hrefproperty of the frame object) For backward compatibility with

older browsers, however, continue using location.hreffor scripted navigation

Remember that the srcproperty belongs to the FRAME element object, not the

windowobject it represents Therefore, references to the srcproperty must be via

the element’s ID and/or node hierarchy

Related Items:location.hrefproperty

FRAMESET Element Object

For HTML element properties, methods, and event handlers, see Chapter 15

Properties Methods Event Handlers

border

borderColor

cols

frameBorder

frameSpacing

rows

Syntax

Accessing properties or methods of a FRAMESET element object from a FRAMESET:

(IE4+) document.all.framesetID property | method([parameters])

(IE5+/NN6) document.getElementById(“framesetID”) property |

On the

CD-ROM

FRAMESET

Trang 9

Accessing properties of methods of a FRAMESET element from a frame document:

(IE4+) parent.document.all.framesetID property | method([parameters]) (IE5+/NN6) parent.document.getElementById(“framesetID”) property |

About this object

The FRAMESET element object is the script-accessible equivalent of the element generated via the <FRAMESET>tag This element is different from the parent (win-dow-type) object from the original object model A FRAMESET element object has properties and methods that impact the HTML element; in contrast, the window object referenced from documents inside frames via the parentor topwindow references contains a document and all the content that goes along with it

When framesets are nested in one another, a node parent–child relationship exists between containing and contained framesets For example, consider the following skeletal nested frameset structure:

</FRAMESET>

When writing scripts for documents that go inside any of the frames of this structure, references to the framesetting window and frames are a flatter hierarchy than the HTML signifies A script in any frame references the framesetting window via the parentreference; a script in any frame references another frame via the parent.frameNamereference In other words, the windowobjects of the frameset defined in a document are all siblings and share the same parent

Such is not the case when viewing the above structure from the perspective of W3C node terminology Parent–child relationships are governed by the nesting of HTML elements, irrespective of whatever windows get generated by the browser Therefore, frame frame2has only one sibling, frame3 Both of those share one parent, innerFrameset Both innerFramesetand frame1are children of outerFrameset If your script were sitting on a reference to frame2, and you wanted to change the colsproperty of outerFrameset, you would have to traverse two generations of nodes:

frame2Ref.parentNode.parentNode.cols = “40%,60%”

What might confuse matters ever more in practice is that a script belonging to one

of the frames must use window object terminology to jump out of the current window object to the frameset that generated the frame window for the document In other words, there is no immediate way to jump directly from a document to the FRAME element object that defines the frame in which the document resides The docu-ment’s script accesses the node hierarchy of its frameset via the parent.document reference But this reference is to the documentobject that contains the entire frame-set structure Fortunately, the W3C DOM provides the getElementById()method to

FRAMESET

Trang 10

extract a reference to any node nested within the document Thus, a document inside

one of the frames can access the FRAMEelement object just as if it were any element

in a typical document (which it is):

parent.document.getElementById(“frame2”)

No reference to the containing FRAMESET element object is necessary Or, to

make that column width change from a script inside one of the frame windows, the

statement would be:

parent.document.getElementById(“outerFrame”).cols = “40%,60%”

The inner frameset is equally accessible by the same syntax

Properties

border

The borderproperty of a FRAMESET element object lets you read the thickness

(in pixels) of the borders between frames of a frameset If you do not specify a

BOR-DERattribute in the frameset’s tag, the property is empty, rather than reflecting the

actual border thickness applied by default

Related Items:FRAMESET.frameBorderproperty

borderColor

Value: Hexadecimal triplet or color name string Read/Write

The borderColorproperty lets you read the value of the color assigned to the

BORDERCOLORattribute of the frameset’s tag Although the property is read/write,

changing the color by script does not alter the border colors rendered in the

browser window Attribute values set as color names are returned as hexadecimal

triplets when you read the property value

On the

CD-ROM

FRAMESET.borderColor

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