Ch 8 - The Internet Explorer Object Model - Web Development with Visual Basic 5

The Internet Explorer Object Model

Many HTML elements can also be treated as Internet Explorer Scripting Objects. In order to work effectively with VBScript and HTML elements and to see how they can intermingle, you need to understand the Internet Explorer Scripting Object Model.

The Object Model is pretty straightforward, if you understand the “object-ness” of Visual Basic. At the top of the IE Object Model hierarchy is the Window object, which is the parent to all other objects. This arrangement is similar to the Form-Custom Control architecture in Visual Basic (see Figure 7.17). Object referencing works the same in VBScript as in VB:

parent_object.child_object.property = somevalue

Be advised that variable scope and types are bit tricky. The scope of VBScript variables is described as procedure scope and script scope. What procedure and script scope means is that the variable can be seen only in the sub or function if it is declared inside the procedure. If it is declared outside a procedure, it has script wide scope. A script in this case means an HTML page. All variables in VBScript are of the data type Variant but you must watch the subtype.

Figure 7.17

The Internet Explorer Scripting Object Model Hierarchy

The following sections are a brief description of the objects in the IE Object Model, The files used in the listings can be found in the /HTML directory of this project, and on the CD-ROM that comes with this book.

Window

The Window is the object at the top of the IE Scripting Object Model. Operationally, it is the Internet Explorer.

Methods: alert, confirm, prompt, open, close, setTimeout, clearTimeout, navigate

Events: onLoad, onUnload

Properties: name, parent, opener, self, top, location, defaultStatus, status, frames, history, navigator, document

Listing 7.16 - HELLO.HTM - To send a message to a user, you can use the Window object’s alert method.

<HTML><HEAD>
<TITLE>Hello</TITLE>
<SCRIPT LANGUAGE=VBScript>
<!--
Sub window_onLoad
     window.Alert "Hello World"
End Sub
-->
</SCRIPT>
</HEAD>

Frame

The Frame object is similar to and decends from the Window object. Although you can have a collection of Frames, each frame has its own property values and its own document.

Methods: See Window object

Events: See Window object

Properties: See Window object

History

The History object holds infomation about what has been in the window before. It gets this information for the browser’s History list. (see Figure 7.18)

Figure 7.18

The Internet Explorer's History list in the Go menu.

Methods: back, forward, go

Events: none

Properties: length

Listing 7.17 - BACK.HTM - To go back to a previous page, use the History object's Back method.

<HTML><HEAD>
<TITLE>Back</TITLE>
<SCRIPT LANGUAGE=VBScript>
<!--
Sub window_onLoad
     History.back 1
End Sub
-->
</SCRIPT>
</HEAD>

Navigator

The Navigator object gives you infomation about the browser in use.

Methods: none

Events: none

Properties: appCodeName, appName, appVersion, userAgent

Listing 7.18 - N_GATOR.HTM - To find out what browser you client is using, use the appName property of the Navigator object.

<HTML><HEAD>
<TITLE>Navigator</TITLE>
<SCRIPT LANGUAGE=VBScript>
<!--
Sub window_onLoad
     Alert Navigator.appName
End Sub
-->
</SCRIPT>
</HEAD>

Location

The Location Object encapsulates an URL.

Methods: none

Events: none

Properties: href, protocol, host, hostname, port, pathname, search, hash

Listing 7.19 - LOCATION.HTM - To find out the protocol that is presently being used by your document, use the protocol property of the Location object.

<HTML><HEAD>
<TITLE>Location</TITLE>
<SCRIPT LANGUAGE=VBScript>
<!--
Sub window_onLoad
     Alert Location.protocol
End Sub
-->
</SCRIPT>
</HEAD>

Script

The Script object defines the Script used in the Window. Granted, this description is rather vague. As some point Microsoft will probably extend and enhance the utility of this object.

Document

The Document object encapsulates the document in the current window as well as the elements in the document, i.e., links, forms, buttons and ActiveX objects. The objects: Link, Anchor, and Form descend from the Document object.

Methods: write, writeLn, open, close, clear

Events: none

Properties: linkColor, aLinkColor, vLinkColor, bgColor, fgColor, anchors, links, forms, location, lastModified, title, cookie, referrer

Listing 7.20 - DOCUMENT.HTM - You can write a line of code to the browser using the write method of the Document Object.

<HTML><HEAD>
<TITLE>Document</TITLE>
<SCRIPT LANGUAGE=VBScript>
<!--
     document.write ("I am writing a line.")
-->
</SCRIPT>
</HEAD>
</HTML>

Link

The Link Object is an encapsulation of an HTML <A HREF….> tag on a given page. It is read-only. Because a Link is a member of the Links collection, (an array of <A HREF…> tags), you need to access an a particular link through the Document object’s Links property.

Methods: none

Events: onMouseMove, onMouseOver, onClick

Properties: href, protocol, host, hostname, port, pathname, search, hash, target

Listing 7.21 - LINK.HTM - To find out how many <A HREF....> tabs are on a page, use the Document object property links. To work find out the text of an <HREF>, use the href property of the Link object.

<HTML><HEAD>
<TITLE>Document</TITLE>
<SCRIPT LANGUAGE=VBScript>
<!--
     
Sub window_onUnLoad
  Dim NumOfLinks
  Dim MyAlertMsg
  NumOfLinks = Cstr(document.links.length)     
  MyAlertMsg = "There are " & NumOfLinks & " links on this page."
  MyAlertMsg = MyAlertMsg & Chr(10) & Chr(13)
  MyAlertMsg = MyAlertMsg & "The first link is " & document.links(0).href
  
  Alert MyAlertMsg
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<P>
<A HREF="http://www.whitehouse.gov"> Go to the White House.</A>
<P>
<A HREF="http://www.senate.gov"> Go to the Senate. </A>
</BODY>
</HTML>

Anchor

The Anchor object is similar to a Link object. The difference is that the Anchor object references all <A> tags in a given document as opposed to <A HREF…> objects.

Methods: none

Events: none

Properties: name

Form

The Form object represents an HTML <FORM> element in a Document object. You can reference a Form object by either a name or an array index. The Element object is a child of the Form object.

Methods: submit

Events: onSubmit

Properties: action, encoding, method, target, elements

Listing 7.21 - OM_FORM.HTM - A simple form element.

<HTML>
<HEAD>
<TITLE>The Virtual Music Store</TITLE></HEAD>
<FORM method=post action=/cgi-win/mycgi.cgi>
Enter your name: <INPUT TYPE=TEXT NAME=yourname>
<BR>
<INTPUT TYPE=Submit NAME=submit VALUE=”Enter Name”>
</FORM>
</BODY></HTML>

Element

The Element object is a control placed in your HTML document by using the <INPUT> tag or the <OBJECT> tag. The former are called HTML elements. The latter are Intrinsic Controls and ActiveX Controls.

Methods: click, focus, blur, select

Events: onClick, onFocus, onBlur, onChange, onSelect

Properties: form, name, value, defaultValue, checked, defaultChecked, length, options, selectedIndex

Listing 07.22 - ELEMENT.HTM - To handle a click event of an Element object of type, Button, code the onClick event of the Element object.

<HTML><HEAD>
<TITLE>Element</TITLE>
<SCRIPT LANGUAGE=VBScript>
<!--
     
Sub btnOK_onClick
      frmMain.btnOK.Value ="Thank you!"
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=frmMain>
<INPUT TYPE=button NAME=btnOK VALUE="Click me">
</FORM>
</BODY>
</HTML>