JavaScript Bible, Gold Edition part 46 pot
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (154.21 KB, 10 trang )
298
Part III ✦ Document Objects Reference
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
onResize event handler to
reload the page and get back to a known point. For some ideas on handling this
problem, see the article at
/>goodman_resize/goodman_resize.html
. One point not covered in the article is
that the Windows version of NN4 issues a
resize event when scroll bars appear in
a window. This
resize event 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.innerHeight properties 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: event object (Chapter 29).
onUnload
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓ ✓✓ ✓ ✓ ✓✓✓
An unload event 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
onUnload event 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
onUnload event handlers in the same places
in an HTML document as the
onLoad handlers: as a <BODY> tag attribute for a sin-
gle-frame window or as a
<FRAMESET> tag attribute for a multiframe window. Both
onLoad and onUnload event handlers can appear in the same <BODY> or <FRAME-
SET>
tag without causing problems. The onUnload event handler merely stays
windowObject.onUnload
299
Chapter 16 ✦ Window and Frame Objects
safely tucked away in the browser’s memory, waiting for the unload event to arrive
for processing as the document gets ready to clear the window.
Let me pass along one caution about the
onUnload event 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
onUnload event handler processing to a minimum.
Related Items:
onLoad event 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
300
Part III ✦ Document Objects Reference
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
window object 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 NAME attribute if your scripts refer to
frames through the original object model (a
parent.frameName reference). While
there is no law against using the same identifier for both
NAME and ID attributes,
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
COLS and ROWS attributes 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
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓
If a frame displays a border (as determined by the FRAMEBORDER attribute of the
FRAME element or
BORDER attribute 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
BORDERCOLOR attribute 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.frameBorder properties.
On the
CD-ROM
FRAME.borderColor
301
Chapter 16 ✦ Window and Frame Objects
contentDocument
Value: document object reference Read-Only
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
The contentDocument property 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
document object, 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
contentDocument property to get a valid reference to the
document, and therefore any other content of the frame.
Example on the CD-ROM
Related Items: document object.
Document
Value: document object Read-Only
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓
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
document object contained by a FRAME element object. Recall (from
Chapter 15) that the
document property 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
Document property continues to be available.
Example on the CD-ROM
Related Items: window.document property.
On the
CD-ROM
On the
CD-ROM
FRAME.Document
302
Part III ✦ Document Objects Reference
frameBorder
Value: yes | no | 1 | 0 as strings Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓✓
The frameBorder property offers scripted access to a FRAME element object’s
FRAMEBORDER attribute setting. IE4+ does not respond well to modifying this prop-
erty after the page has loaded.
Values for the
frameBorder property are strings that substitute for Boolean
values. Values
yes or 1 mean that the border is (supposed to be) turned on; no or 0
turn off the border.
Example on the CD-ROM
Related Items: FRAMESET.frameBorder properties.
height
width
Value: Integer Read-Only
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓
IE4+ lets you retrieve the height and width of a FRAME element object. These
values are not necessarily the same as the
document.body.clientHeight and
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
rows and/or cols properties. Reading integer values for a frame’s height and width
properties is much easier than trying to parse the
rows and cols string properties.
Example on the CD-ROM
Related Items: FRAMESET object.
On the
CD-ROM
On the
CD-ROM
FRAME.height
303
Chapter 16 ✦ Window and Frame Objects
longDesc
Value: URL String Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
The longDesc property is the scripted equivalent of the LONGDESC attribute 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
Value: Integer Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓✓
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.style
margin properties.
Also be aware that although the default values of these properties are empty
(meaning when no
MARGINHEIGHT or MARGINWIDTH attributes 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:
style object (Chapter 30).
noResize
Value: Boolean Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓✓
Web designers commonly fix their framesets so that users cannot resize the
frames (by dragging any divider border between frames). The
noResize property
FRAME.noResize
304
Part III ✦ Document Objects Reference
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
onResize event handler
fires, a script sets the
noResize property 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
noResize value 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
cols or rows properties.
Example on the CD-ROM
Related Items: FRAMESET.cols, FRAMESET.rows properties.
scrolling
Value: yes | no | 1 | 0 as strings Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓✓
The scrolling property lets scripts turn scrollbars on and off inside a single
frame of a frameset. By default, scrolling is turned on unless overridden by the
SCROLL attribute of the <FRAME> tag.
Values for the
scrolling property are strings that substitute for Boolean values.
Values
yes or 1 mean that scrollbars are visible (provided there is more content
than can be viewed without scrolling);
no or 0 hide 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
305
Chapter 16 ✦ Window and Frame Objects
src
Value: URL String Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓✓
The src property of a FRAME element object offers an additional way of navigat-
ing to a different page within a frame (meaning other than assigning a new URL to
the
location.href property of the frame object). For backward compatibility with
older browsers, however, continue using
location.href for scripted navigation.
Remember that the
src property belongs to the FRAME element object, not the
window object it represents. Therefore, references to the src property must be via
the element’s ID and/or node hierarchy.
Example on the CD-ROM
Related Items: location.href property.
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 |
method([parameters])
On the
CD-ROM
FRAMESET
306
Part III ✦ Document Objects Reference
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 |
method([parameters])
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 parent or top window
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 ID=”outerFrameset” COLS=”30%, 70%”>
<FRAME ID=”frame1”>
<FRAMESET ID=”innerFrameset” ROWS=”50%,50%”>
<FRAME ID=”frame2”>
<FRAME ID=”frame3”>
</FRAMESET>
</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
parent reference; a script in any frame references another frame via the
parent.frameName reference. In other words, the window objects 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
frame2 has only one sibling, frame3. Both of those share one
parent,
innerFrameset. Both innerFrameset and frame1 are children of
outerFrameset. If your script were sitting on a reference to frame2, and you
wanted to change the
cols property 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 document object that contains the entire frame-
set structure. Fortunately, the W3C DOM provides the
getElementById() method to
FRAMESET
307
Chapter 16 ✦ Window and Frame Objects
extract a reference to any node nested within the document. Thus, a document inside
one of the frames can access the
FRAME element 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
Value: Integer Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓
The border property 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-
DER
attribute in the frameset’s tag, the property is empty, rather than reflecting the
actual border thickness applied by default.
Example on the CD-ROM
Related Items: FRAMESET.frameBorder property.
borderColor
Value: Hexadecimal triplet or color name string Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓
The borderColor property lets you read the value of the color assigned to the
BORDERCOLOR attribute 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
