JavaScript
frame
Object (frames array)A frame object is used to specify a smaller window within the larger browser window. Each frame can display a different document or URL and each frame is independently scrollable. Each frame also has its own history list. For example, to go back in a frame, the reader right-clicks the frame and chooses Back In Frame from the menu that appears.
Syntax
Frames are defined by the HTML tags <FRAMESET> and <FRAME>. You may include JavaScript onLoad and onUnload() event handlers in the <FRAMESET> tag. In JavaScript code, you can refer to frames using any of these syntaxes:
[windowReference.]frameName.propertyName
[windowReference.]frames[index].propertyName
window.propertyName
self.propertyName
parent.propertyName
where frameName is the value of the NAME attribute in the <FRAME> tag of a frame definition, index is an integer representing a frame as a number, and propertyName is any of the valid properties for frames, as follows.
The optional windowReference is a window name as defined by a var x = window.open(...) statement, or one of the synonyms top or parent..
The frames array has a length property that identifies how many child frames are in a window or frame. To access that value use either of these syntaxes:
[windowReference.].frames.length
[frameReference.].frames.length
Properties
.frames An array reflecting all the frames in a window.
.name Reflects the NAME attribute as defined in the <FRAME> tag.
.length Reflects the number of child frames within a frame.
parent A synonym for the window or frame containing the current frameset.
self A synonym for the current frame.
window A synonym for the current frame.
The frames array has one property:
.length Reflects the number of child frames within a frame.
Methods
.clearTimeout() Cancels an ongoing timer set by the .setTimeout() method.
.setTimeout() Evaluates an expression after a specified amount of time.
Event Handlers
Although they are (technically) event handlers of the window object, you can use the onLoad and onUnload event handlers in a <FRAMESET> tag.
Description
The <FRAMESET> tag is used in a special Web page whose sole purpose is to define a set of frames that can display documents independently of one another. Each is, to JavaScript, an independent window object.
If a <FRAME> tag contains SRC and NAME attributes, you can refer to that frame from a sibling frame by using the synonym parent to refer to the page that defined both frames - that is, the parent frame that contains the <FRAMESET> and <FRAME> tags. For example, if the third frame in a set is named mainFrame, neighboring sibling frames can refer to that frame using parent.mainframe.
JavaScript also maintains an array of frames so that you can refer to unnamed frames by number. The first frame is frames[0], the second frame is frames[1], and so on. Referring back to the preceding example, if the third frame was not given a name in its <FRAME> tag, JavaScript can still refer to it as parent.frames[2].
The top property also is a synonym that can be used in place of the frame name. The top property refers to the top-most window that contains frames or nested framesets. Thus, if one <FRAMESET>page creates another <FRAMESET> page and you are in the bottommost page, then parent refers to the page that created the frame you are in and top refers to the <FRAMESET> page that created the frames above the parent.
The self and window properties are synonyms for the current frame, and you can optionally use them to refer to the current frame (not the parent or the top frame).
The frame object is a property of the larger window object.
Example
Suppose that the following Web page is named welcome.html and is the first page that opens when a reader comes to this site. The page splits the browser window into a narrow window named toc (for table of contents) and a larger window named main.
<HTML>
<! Set up the frames >
<! ----- Split into two columns>
<FRAMESET COLS= "130,*">
<FRAME NAME="toc" SRC = "guide.html" MARGINWIDTH = "0" MARGINHEIGHT="0">
<FRAME NAME="main" SRC = "home.htm" MARGINWIDTH = "10" MARGINHEIGHT="10">
</FRAMESET>
</HTML>The guide.html page, which is displayed in the narrower toc frame, can control documents in the larger main frame by referring to parent.main as in the examples that follows:
<FORM>
<! Go back in main frame>
<INPUT type="button" onClick = "parent.main.history.back()">
<! Go forward in main frame>
<INPUT type="button" onClick = "parent.main.history.forward()">
</FORM>
hidden
ObjectA hidden object is a form field that is not visible to the reader. This object is generally used to pass information to yourself as the recipient of the form.
Syntax
To create a hidden object in a form, select Insert > Form Field > Hidden. To manually create a hidden form field, use type="hidden" within an input tag, between a pair of <FORM>...</FORM> tags.
To refer to a hidden object from within JavaScript code, use either of these syntaxes:
document.formName.hiddenName.propertyName
or
document.formName.elements[index].propertyName
where hiddenName is the value of the NAME attribute as defined in the hidden object's <INPUT> tag, formName is either the value of the NAME attribute of a form object or an element in the forms array, index is an integer representing the fields position in the elements array, and propertyName is one of the properties listed below.
Properties
.name reflects the NAME attribute as defined in the hidden object's <INPUT> tag.
.value reflects the current value of the hidden form field.
Description
A hidden object is a form element and must be defined within a <FORM> tag. It is totally invisible on the Web page -- and visible only in the document source view. Use a hidden field when you want to pass private information, such as the name of the form, to yourself along with the reader's responses to for fields.
You can programmatically change the value of the hidden object by changing its .value property.
A hidden object is a property of the larger form object.
Example
This page shows how to place a hidden field on a form using an <INPUT> tag, and then programmatically change the contents of the field. In this example, the script named stampForm() places the current date/time in the hidden field named timestamp. The function is executed as soon as the page is loaded, thanks to the onLoad event handler in the body tag.
Of course, you cannot see the contents of a hidden field, so this page has a little button that lets you peek at the hidden field's contents (your reader will never need that button). When you click the button, the showSecret() function is called up to reveal the contents of the hidden field.
<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
function stampForm() {
rightnow = new Date()
document.myForm.timestamp.value = rightnow
}
function showSecret() {
msg = "hidden field contains"
msg += document.myForm.timestamp.value
alert (msg)
}
</SCRIPT>
</HEAD>
<BODY onLoad = "stampForm()">
<FORM name = "myForm">
<INPUT type = "hidden" name = "timestamp">
<INPUT type = "button" value = "Try Me" onClick = "showSecret()">
</FORM>
</BODY>
</HTML>Notice that the actual object name, hidden, is specified only in the <INPUT> tag. To the rest of the JavaScript code, the hidden field is just another form field.
history
ObjectThe history object contains information on the URLs that the reader has visited within the current window. In Netscape Navigator, the history list is visible at the bottom of the Go menu.
Syntax
In JavaScript, you can use either of these syntaxes to refer to the history object:
history.propertyName
history.methodName(parameters)
where propertyName is one of the properties and methodName is one of the methods that follows.
Properties
.length Reflects the number of entries in the history object.
Methods
.back() Displays the previous page in the history list, if any.
.forward() Displays the next page in the listory list, if any.
.go(n) Displays the page that is n pages from the current list in the page.
In the last example, n can be either a positive or negative number. For example, history.go(4) moves four pages ahead in the history list, whereas history.go(-4) moves four pages back in the history list.
Description
The history object is a list of URLs that the user has visited in the current session and also in the current frame, if multiple frames are displayed on the screen. The properties and methods of this object let you move through the history list programmatically via JavaScript code.
The history object is a property of the larger document object.
Example
The following statements display a button labeled Back in the current Web page. When the reader clicks that button, the previous page in the frame named main is displayed. This example assumes that a prior page has used the <FRAMESET> and <FRAME> tags to define a frame named main.
<FORM>
<INPUT type = "button" value = "Back" onClick = "parent.main.history.back()")
</FORM>
link
Object (links array)A link object is a piece of text or an image identified as a hypertext link within the current Web page, via <A HREF...>...</A> tags.
Syntax
Within a Web page, you use the <A HREF...>...</A> tags to define a hyperlink (link). To determine how many hyperlinks are in the Web page, use the syntax
document.links.length
To refer to a specific link in the page using JavaScript code, use the syntax
document.links[index].propertyName
where index is an integer representing the link's position in the links array and propertyName is one of the valid properties for the link object.
Properties
.hash Specifies an anchor name in the URL.
.host Specifies the hostname:port portion of the URL.
.hostname Specifies the host and domain name, or IP address, of a network host.
.href Specifies the entire URL.
.pathname Specifies the URL-path portion of the URL.
.port Specifies the communications port that the server uses for communications.
.protocol Specifies the beginning of the URL, including the colon.
.search Specifies a query target reflects the TARGET attribute.
Event Handlers
Event handlers for hyperlinks are specified in the <A HREF...> tag that defines the link. Two event handlers are available:
onClick Triggered when the user clicks on the link.
onMouseOver Triggered when the user points to the link.
Description
When a page is opened, JavaScript automatically creates a list (array) of all hyperlinks in the page. The first hyperlink is links[0], the second one is links[1], and so on. Each link object within that array is a location object - a complete URL. Each item in the links array has the same properties as a location object. If a link object also is an anchor object, the object has entries in both the anchors and links arrays. The link object is a property of the larger document object.
Example
The most common use of link properties is simply to assign a custom status bar message to a hyperlink by specifying a custom onMouseOver() event handler. For example, in this page, when the reader points to the link to coolnerds, the status bar shows Takes you to The Beeline. rather than the customary hyperlink address:
<HTML>
<BODY>
Go to <A HREF="http://bton.com" onMouseOver="window.status='Takes you to The Beeline.';return true"> The Beeline</A> now.
</BODY>
</HTML>The ;return true statement is required to complete the statement and make sure that the message appears the moment that the screen's pointer touches the hyperlink.
|
|
   |
 |
