Like Netscape Navigator, Internet Explorer has an object hierarchy designed to provide the programmer with the tools needed to interact with the Internet Explorer environment.
Microsoft has designed the model to ensure compatibility with the object model in Navigator. In addition, Microsoft hopes that the model will help to ease the transition from JavaScript to VBScript because all the objects can be used in both JavaScript and VBScript, as well as in any other ActiveX scripting language which may be developed in the future.
This chapter looks at the Internet Explorer Object Model and provides information about:
Before exploring the Internet Explorer Object Model, this chapter looks at the available methods for including a script in a Web page in Internet Explorer. Internet Explorer offers the same methods as Netscape Navigator but also provides alternative techniques for incorporating scripts.
Internet Explorer provides the same basic mechanisms for including scripts in Web pages as Navigator:
In the first and last case, it's important to specify the language of the script with a LANGUAGE attribute so that Internet Explorer knows which scripting language is being used:
<SCRIPT LANGUAGE="JavaScript"> Script Here </SCRIPT>
or
<INPUT TYPE=button NAME="example" VALUE="Click Here" onClick="pressed" LANGUAGE="VBScript">
This is different from Netscape Navigator where it is still possible—although bad style—to omit the LANGUAGE attribute of the <SCRIPT> tag. Another difference is that the LANGUAGE attribute isn't used in element tags such as <BODY> or <INPUT> in Navigator.
Like Netscape Navigator, scripts are compiled as the page is rendered so that the scripts are available for execution later. This means that both VBScript and JavaScript scripts can exist on the same page, making the LANGUAGE attribute more important. The following example produces a form with two buttons—one with a VBScript event handler and one with a JavaScript event handler:
<HTML>
<HEAD>
<TITLE>VBScript and JavaScript Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function jsClick() {
alert("You clicked on the JavaScript Button");
}
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
Sub vbClick
MsgBox "You clicked on the VbScript Button"
End Sub
</SCRIPT>
</HEAD>
<BODY>
<H1>VBScript and JavaScript Example</H1>
<HR>
<FORM NAME="example">
<INPUT TYPE=button NAME="jsButton" VALUE="Click for JavaScript"
onClick="jsClick()" LANGUAGE="JavaScript">
<INPUT TYPE=button NAME="vbButton" VALUE="Click for VBScript"
onClick="vbClick" LANGUAGE="VBScript">
</FORM>
</BODY>
</HTML>
This page includes two script definitions in the header of the file: one with a VBScript procedure and one with a JavaScript button. The form includes two buttons—one triggers the JavaScript function when pressed and the other calls the VBScript procedure when the user clicks on it. This page produces results like Figures 22.1 and 22.2.
Figure 22.1. If the user clicks the JavaScript button an alert box is displayed.
Figure 22.2. If the user clicks the VBScript button a message box is displayed.
Note:
The details of programming VBScript are covered in the Chapter 23, "Programming in VBScript."
The javascript: URL can be used to invoke a script using the format javascript:script-code. For example, in the example above, you could change the JavaScript button to a hypertext link defined as
<A HREF="javascript:jsClick()">JavaScript Link</A>
Although the current version of Internet Explorer 3 only supports this syntax for JavaScript code, the final release will support script URLs for all scripting engines supported by Internet Explorer. For example, a VBScript URL might look like:
<A HREF="vbscript:vbClick">VBScript Link</A>
Note:
Because this feature is not presently supported for VBScript, the final form of a VBScript URL may not exactly match this example.
In addition to supporting the same methods as Navigator for including scripts in Web pages, Internet Explorer also provides additional attributes for the <SCRIPT> tag—FOR and EVENT:
These scripts effectively enable the creation of event handlers without using the event handler attributes of the actual elements.
For instance, the two-button page in the previous example could be rewritten as follows:
<HTML>
<HEAD>
<TITLE>VBScript and JavaScript Example</TITLE>
</HEAD>
<BODY>
<H1>VBScript and JavaScript Example</H1>
<HR>
<FORM NAME="example">
<INPUT TYPE=button NAME="jsButton" VALUE="Click for JavaScript">
<SCRIPT FOR="jsButton" EVENT="onClick" LANGUAGE="JavaScript">
alert("You clicked on the JavaScript Button");
</SCRIPT>
<INPUT TYPE=button NAME="vbButton" VALUE="Click for VBScript">
<SCRIPT FOR="vbButton" EVENT="onClick" LANGUAGE="vbScript">
MsgBox "You clicked on the VbScript Button"
</SCRIPT>
</FORM>
</BODY>
</HTML>
You should notice that these scripts are defined in such a way as to be attached to specific events of specific objects. In addition, the scripts break one of the fundamental rules of HTML scripting: unless it is necessary to render content to the document window, include all scripts in the header of the HTML document.
In order to move these two scripts out of the body of the HTML document to the header, you need to understand the context in which scripts can exist. Because the scripts in the previous example are defined inside of the form definition, their context is that of the form. So, when the FOR attributes refer to the names of the button objects, it's assumed they are referring to the names of properties of the specific form object.
If, however, the scripts are moved outside of the form definition—as they would be if they were moved to the header—then it's necessary to fully qualify the object names in the FOR attributes as document.example.jsButton and document.example.vbButton (remember, the form object is a property of the document object):
<HTML>
<HEAD>
<TITLE>VBScript and JavaScript Example</TITLE>
<SCRIPT FOR="document.example.jsButton" EVENT="onClick" LANGUAGE="JavaScript">
alert("You clicked on the JavaScript Button");
</SCRIPT>
<SCRIPT FOR="document.example.vbButton" EVENT="onClick" LANGUAGE="vbScript">
MsgBox "You clicked on the VbScript Button"
</SCRIPT>
</HEAD>
<BODY>
<H1>VBScript and JavaScript Example</H1>
<HR>
<FORM NAME="example">
<INPUT TYPE=button NAME="jsButton" VALUE="Click for JavaScript">
<INPUT TYPE=button NAME="vbButton" VALUE="Click for VBScript">
</FORM>
</BODY>
</HTML>
The Internet Explorer object tree closely resembles the one found in Netscape Navigator. The top-level parent is the window object and its children include a frame object, a history object, a navigator object, a location object, a script object and a document object (which also has children such as the link, anchor,and form objects):
Although most of the object specifications in the Internet Explorer Object Model match their counterparts in Netscape Navigator, a few fundamental differences do exist in the current version of Internet Explorer. These are highlighted throughout this chapter.
The window object is the top-level object for every window. As with Netscape Navigator, it is possible to refer to the properties and methods of the window object without explicitly referring to the window itself. For instance, window.alert() can be simply invoked as alert().
The window object in Internet Explorer closely resembles the one provided in Navigator 3, with a few differences:
Unlike current versions of Navigator 3, the current beta of Internet Explorer returns "Microsoft Internet Explorer" as the value of the name property of all windows, regardless of the actual name of window.
This is actually useful for situations in which a script needs to provide special code for Internet Explorer because of differences between the JavaScript implementations in the current versions of Navigator and Internet Explorer. By simply checking the value of window.name, it is possible to determine which browser's in use.
However, Microsoft will likely update their implementation of the name property in future releases to correctly reflect window names, so it's better to use properties of the navigator object to determine if the user's browser is Navigator or Internet Explorer.
The navigate method provides an alternative to setting window.location or calling window.open() to open a new URL in the current window. The syntax of navigate() method is simple:
navigate("URL");
This method is not available in Navigator 3.
Note:
If your script requires window.open() to open new windows, it won't work in the current version of Internet Explorer. If you're using window.open() to open a document in an existing window, you may want to try setting window.location instead of calling window.open(). This way, your script should work on both Navigator 3 and Internet Explorer 3.
The document object provides the properties and methods for working with the current HTML document. As with the window object, certain key differences exist between Navigator 3's document object and the current implementation in Internet Explorer:
Navigator 3 supports three distinct link colors: an unfollowed link color, a followed link color, and an active link color. Active links occur when the mouse button is pressed down over the link. In the current version, Navigator changes the color of the link to the active link color until the button is released.
This color is reflected in and can be set using document.alinkColor. However, Internet Explorer doesn't use active link colors. Therefore, alinkColor is only provided for compatibility and won't have any functional affect on the appearance of a Web page in Internet Explorer.
In Navigator, it's possible to open a new document stream for any Mime type supported by the browser. The default is text/html, but specifying an alternative Mime type is possible using the following command:
document.open("mime-type");
For instance, opening a document stream with document.open("text/plain") would create a stream for plain text, which means the text would be displayed as-is by Navigator.
Internet Explorer's document.open() method currently defaults to the text/html, effectively ignoring the Mime type attribute if it's provided.
For instance, the following frameset uses the onLoad event handler to clear the document in the right frame and open a text/plain document stream in that frame. The document is displayed as plain text in Navigator but is treated as HTML by Internet Explorer:
<HTML>
<HEAD>
<TITLE>document.open() Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function doOpen() {
self.right.document.clear();
self.right.document.open("text/plain");
self.right.document.writeln("<H1>Example</H1>");
self.right.document.writeln("<HR>");
self.right.document.writeln("A test of document.open()");
self.right.document.close();
}
</SCRIPT>
</HEAD>
<FRAMESET COLS="50%,*" onLoad="doOpen()">
<FRAME SRC="left.html">
<FRAME SRC="blank.html" NAME="right">
</FRAMESET>
</HTML>
Figures 22.3 and 22.4 show how the document stream is treated differently in Navigator and Internet Explorer
Figure 22.3. In Navigator the text/plain document stream isn't treated as HTML.
Figure 22.4. In Internet Explorer, the Mime type is ignored and the document stream is treated as HTML.
There are several basic differences between Netscape Navigator's form object and the current implementation in Internet Explorer:
There are two differences between the location object in Navigator and Internet Explorer:
There are several differences between the link object in the two browsers:
More important than this difference, however, is the inconsistency between the link object properties and the location object properties in Internet Explorer:
The anchor object includes one property not available in Navigator: name—a string reflecting the name of the anchor set by the NAME attribute of the <A> tag.
In Internet Explorer, all embedded objects, including form fields and controls, ActiveX objects, and Java applets are reflected into the scripting environment as instances of the element object. These objects can be referred to by name or by their index number in the elements array of the form object.
Depending on what type of object is being reflected by an instance of the element object, the object will have different properties, methods, and event handlers. Table 22.1 outline which objects take which properties, methods, and event handlers.
| Element | Properties | Methods | Event Handlers |
| button | form, name, value, enabled | click, focus | onClick, onFocus |
| reset | form, name, value, enabled | click, focus | onClick, onFocus |
| submit | form, name, value, enabled | click, focus | onClick, onFocus |
| checkbox | form, name, value, checked, defaultChecked, enabled | click, focus | onClick, onFocus, |
| radio | form, name, value, checked, enabled | click, focus | onClick, onFocus |
| combo | form, name, value, enabled, listCount, list, multiSelect, listIndex | click, focus, removeItem, addItem, clear | onClick, onFocus |
| password | form, name, value, defaultValue, enabled | focus, blur, select | onFocus, onBlur |
| text | form, name, value, defaultValue, enabled | focus, blur, select | onFocus, onBlur onChange, onSelect |
| textarea | form, name, value, defaultValue, enabled | focus, blur, select | onFocus, onBlur onChange, onSelect |
| select | name, length, options, selectedIndex | focus, blur | onFocus, onBlur onChange |
| hidden | name, value |
The enabled property can be used to see if an object or form element is enabled and can be used to change the status of an object or form element. The value of enabled is true when a control is enabled and false if it is disabled. This property is not yet implemented in Internet Explorer 3 beta 2.
The listCount, multiSelect, and listIndex properties only apply to the combo object type. listCount returns the count of the number of elements in the combo's list. multiSelect indicates if the combo element is multiselect or not as a Boolean value and can be set by a script. listIndex returns the index of the first selected element in the list.
The removeItem(), addItem(), and clear() methods only apply to the combo object type. removeItem() and addItem() respectively remove an item at a specified index from the list and add an item before the item at the specified index on a list. The clear() method clears the contents of the item at the specified index.
This history object is not fully implemented in Internet Explorer 3 beta 2. The following problems exist:
The navigator object in Internet Explorer works in the same way as its counterpart in Navigator 3. The values returned by the four properties, however, are different than with Navigator 3. Table 22.2 outlines the expected values to be returned by the properties of the navigator object in Internet Explorer 3 beta 2.
| Property | Value in Internet Explorer 3 beta 2 |
| appCodeName | Mozilla |
| appName | Microsoft Internet Explorer |
| appVersion | 2.0 (compatible; MSIE 3.0A; Windows 95) |
| userAgent | Mozilla/2.0 (compatible; MSIE 3.0A; Windows 95) |
These properties, particularly appName, prove useful in determining of the browser running a given script is Internet Explorer not. This is important until several of the incomplete or unavailable JavaScript properties and methods are implemented in Internet Explorer.
This chapter looked briefly at the Internet Explorer Object Model. Being familiar with the Internet Explorer Object Model important if you intend to write JavaScript code that doesn't conflict with the few small gaps in the current version of Internet Explorer.
In addition, if you intend to develop applications specifically for Internet Explorer, this chapter highlighted the unique features of the Internet Explorer Object Tree which are not available in Navigator 3.
As the next chapter examines programming in VBScript, you will be making calls to the methods learned in this chapter, and accessing the properties discussed here as well.
If you need more information about the object model, Microsoft, like Netscape, maintains extensive reference resources about developing for Internet Explorer on its Web site. Complete reference documents about the Internet Explorer Object Model are available at http://www.microsoft.com/intdev/sdk/docs/scriptom/.
