Previous Page TOC Next Page



Chapter 7


Microsoft Internet Explorer 3.0 and Its Scripting Object Model


by Weiying Chen


Internet Explorer(IE) 3.0 has an innovative architecture. Its major component (WebBrowser control) is an ActiveX control, which can be used in any container application for Internet browsing. In addition, the Internet Explorer application is an automation server, which can be used from within any container application to create an instance of Internet Explorer 3.0. IE 3.0 provides a scripting object model accessed through scripting languages such as VBScript and JavaScript. IE 3.0 also provides an ActiveX scripting interface to enable third-party vendors to write their own scripting engines to work inside IE 3.0.

This chapter discusses the IE 3.0 components, ActiveX scripting, the scripting object model, and the ability to add Internet browsing to any application.

IE 3.0 Components


The first major component in IE 3.0 (iexplore.exe) is a shdocvw.dll. This DLL is also called the Microsoft WebBrowser control. The WebBrowser control uses the HTML viewer and Hyperlink object.

The WebBrowser control is an ActiveX control, which can be used inside any control container application, such as Visual Basic, Access, or Visual C++.

This control is a document object container. It provides a single frame in which the user can view and edit all types of ActiveX document objects. It is also a Scripting host, hosting the Scripting engine, such as VBScript and JavaScript.

The frame, the second major component, is developed specifically to house the WebBrowser control. This is the executable that users perceive as the standalone IE 3.0 product.

HTML Viewer


HTML viewer an in-proc server. It is a Document object and can be used in any DocObject container application, such as IE 3.0.

Figure 7.1 shows the HTML viewer in IE 3.0.

Figure 7.1. HTML viewer.

Hyperlink


A hyperlink acts as a link to an object at another location(target). The location can be within the application itself or in a different application. The user can click on the link and navigate to an object at another location. A hyperlink is made up of target's location which is identified by a moniker, a displayable name for the target, a string for the location within target, and a string containing additional parameters.

Microsoft defines the OLE hyperlink interface to abstract the hyperlink features. The WebBrowser control implements this interface to support the hyperlink to any document. For more information on hyperlink, refer to Chapter 21, "Hyperlink Navigation."

Scripting Host and Scripting Engine


IE 3.0 is a Scripting host, which creates a Scripting engine and calls on the Scripting engine to run the scripts. The scripts can be written by the scripting language such as VBScript or JavaScript. Some popular examples of Scripting engine are VBScript and JavaScript. Figure 7.2 illustrates the relationship between IE 3.0 and VBScript, and the scrollbar highlighted in the figure is placed on the web page using the <SCRIPT> tag that follows:


<script language="vbscript">

dim i,j

for i=1 to 3

    document.write("<TR>")

    for j=1 to 2

        document.write("<TD>")

        document.writeln("<OBJECTid="'Control'" & CStr(j=i*5-1)")

        document.writeln("WIDTH=171 HEIGHT=21 ALIGN=CEBTER")

        document.writeln("CLASSID=")

Figure 7.2. IE 3.0 and VBScript.

The page in Figure 7.2 has six ActiveX controls, displayed as a table in the HTML page. The layout is done by VBScript using the write, writeln method exposed by the document object in the IE 3.0 scripting object model.

Scripting Host Role


The Scripting host must invoke the following methods to interact properly with any Scripting engine. The following pseudocode, which includes a little self-explanation, illustrates the fundamental steps necessary on the Scripting host side.


//Create a new  VBScript engine 

CoCreateInstance(CLSID_VBScript,, . . .)

//Load the script to feed the script engine or create a null script

//import each top-level named entity such as forms and pages into 

//the scripting engine's name space

IActiveScript::AddNamedItem()

//Causes the scripting engine to run the script

IActiveScript::SetScriptState(SCRIPTSTATE_CONNECTED)

Scripting Engine Role


A Scripting engine must implement a few fundamental steps to communicate with the Scripting host. These steps are demonstrated in the following pseudocode.


//Associate a symbol with a top-level item

IActiveScriptSite::GetItemInfo

//Hookup the events with all the relevant objects 

IConnectionPoint 

//Refers to the OLE object's methods and properties

IDispatch.Invoke

Microsoft defines an interface that allows a Scripting engine to be used in the Scripting host. This is known as the ActiveX Scripting interface. Besides the interface required for the Scripting engine, a particular registry key called OLEScript without any values must be present as an immediate subkey for the string representation of the Scripting engine's CLSID.

Scripting Engine Registry Settings


Figure 7.3 illustrates the VBScript ProgID registry setting.

Figure 7.3. VBScript Engine's ProgID registry setting

VBScript in Figure 7.3 is the ProgID for the VBScript engine. The ProgID is used to register the human-readable string associated with the COM object. VBScript engine is a COM object which implements IUnknown interface. The value associated with the ProgID is used in to display the name of the COM object.

There are two immediate subkeys under VBScript ProgID, one is the OLEScript without any values. This subkey is required for any Scripting engine. The other subkey is the CLSID, its value contains the string representation of the Scripting engine's CLSID. The string representation of the CLSID is denoted as {CLSID}.

Figure 7.4 illustrates the registry entry associated with the VBScript engine's {CLSID}.

Figure 7.4. VBScript Engine's {CLSID} registry setting

Figure 7.4 is the registry information stored under {CLSID}. There are two subkeys under "Implemented Categories" root key.


{F0B7A1A1-9847-11CF-8F20-00805F2CD064} 

indicates that VBScript engine is an Active Scripting Engine.


{F0B7A1A2-9847-11CF-8F20-00805F2CD064}

indicates that the VBScript engine is an Active Scripting Engine with Parsing.

The subkeys under "Implemented Categories" root key are from Component Category. Component Category is a new way to categorize COM objects.

For more information on the ActiveX scripting, please refer to: http://www.microsoft.com/intdev/sdk/docs/iexplore/.

Scripting Object Model


IE 3.0 Scripting Object Model defines a set of objects which is accessible through any scripting languages such as VBScript and JavaScript. The IE 3.0 object model is compatible with the object model used in JavaScript in Netscape Navigator. ActiveX Scripting defines the interface for the scripting engine and scripting host, whereas the Scripting Object model defines a set of objects accessible by any scripting language.

Figure 7.5 shows the IE 3.0 scripting object model hierarchy.

Figure 7.5. IE 3.0 scripting object model.

In this scripting object model shown in Figure 7.5, window is at the top of the object model. It consists of document, history, and other properties, methods, and events. The document consists of form, link, anchor, write, and so forth. The form consists of action, submit, and elements.

The elements within the form object refer to the HTML intrinsic controls or objects inserted in HTML through the <object> tag. The HTML intrinsic control is built in the Web browser and placed in the <input> tag. Figure 7.6 illustrates the elements, its methods, properties, and events.

Figure 7.6. HTML intrinsic controls.

The following section uses VBScript and JavaScript to demonstrate how to use some of the objects, its events, properties, and methods.

Window


The window object refers to the Internet Explorer window. The properties and methods can be invoked by the script directly. The following example demonstrates a perfectly legal way of calling alert now() without referencing the window object. Normally, you will use window.alert now().


<script language="vbscript">

    sub window_onload

        alert now()

    end sub

</script>

Tables 7.1 through 7.3 list the definitions of the window object's properties, events, and methods.

Table 7.1. Window object's properties.

Property Meaning get or set name Name of the current window get parent Window object of the window's parent get self Window object get top Window object of the topmost window get location Window's location object get defaultStatus Default status text in the browser's status bar get and set status Status of the browser's status bar get and set frames The array of frames of the current window get history History object of the current window get navigator Navigator object of the current window get document Document object of the current window get

Table 7.2. Window object's methods.

Method Meaning Return Usage
Value alert Displays an alert message box none alert "hello" confirm Displays a message box true/false confirm
with OK or cancel selection "continue" prompt Prompts the user for input string prompt "age","28" open Creates a new window object open "http://..." close Closes the window string close navigate Navigates the window to long navigate "http://.."
a new URL setTimeOut Sets a timer to call a long setTimeOut("button1.click",
function after a specified 1000)
number of milliseconds clearTimeOut Clear the timer with ID none clearTimeOut ID
returned by the setTimeOut

Table 7.3. Window object's events.

Event Meaning Parameter Usage OnLoad Fires when the page is loaded none OnLoad="foo" OnUnLoad Fires when the page is unloaded none OnUnLoad="foo"

The following example demonstrates how to change the browser's status by changing the window's status property.


<html>

<form name="statusform">

     enter information that will show in the browser's status bar

    <input type=text name=txtStatus>

    <input type=button name=btnChange

[icc]value="click to display on the status bar">

</form>

<script language="vbscript">

    sub btnChange_onClick

        status = document.statusForm.txtStatus.value

    end sub

</script>

</html>

As far as window's onload event, the initialization code should be placed in this event. The cleanup code on exiting the window should be placed in the OnUnLoad event.

History


The History object exposes the properties and methods on the current history list. Tables 7.4 and 7.5 enumerate its properties and methods.

Table 7.4. History object's property.

Property Meaning get or set length Length of the history list get

Table 7.5. History object's method.

Method Meaning Return Value Usage back Jumps back n steps in the history list none back 3 forward Jumps forward n steps in the history list none forward 3 go Goes to the nth item in the history list none go 3

There are no events fired by the history object.

Navigator


The Navigator object returns the browser's information. Table 7.6 lists all the properties exposed by the Navigator object. These properties can be accessed in the scripting language by prefixing navigator in front of these properties.

Table 7.6. Navigator object's properties.

Property Meaning get or set appCodeName Browser's code name get appName Browser's name get appVersion Browser's version get userAgent Browser's user agent get

There are no methods exposed, and events fired by the navigator objects, s

Document


The Document object refers to the HTML document in the browser. It can be called by prefixing document in front of the properties and methods in the script. Tables 7.7 and 7.8 enumerate the exposed properties and methods.

Table 7.7. Document object's properties.

Property Meaning get or set linkColor Current color of the link get and set alinkColor Current color of the active link get and set vlinkColor Current color of the visited link get and set bgColor Current color of the background get and set fgColor Current color of the foreground get and set location Location object get lastModified Date which the document was last modified get title Document title get cookie Cookie for the current document get and set referrer URL of the referring document get anchors Array of anchors in a document get links Array of links in a document get forms Array of forms in a document get

Table 7.8. Document object's methods.

Method Meaning Return Usage
Value write Places the string into the current document none write string writeln Places the string into the current document with a newline character none writeln string open Opens the document for output none open [MIME type] close Closes the document and writes the data to the screen none close clear Clears the content of the document none clear

There are no events fired by the document object.

Among these document properties, cookie is very useful to pass information between HTML pages. There is an example at http://www.microsoft.com/vbscript/us/vbssamp/cookies/extcookie.htm showing you how to use cookies.

The following example uses referrer to tell the user where they came from (the original page).


<html>

<body onLoad="FindWhereFrom()">

<script language="Javascript">

function FindWhereFrom()

{

    var foo = document.referrer

    if ( foo="http://www.microsoft.com/")

    {

        alert('you came from microsoft home page')

    }

}

</script>

</body>

</html>

The methods write and writeln are useful for generating dynamic Web pages. The following example dynamically constructs an HTML table with an array of controls by using write and writeln methods. Figure 7.2 shows this HTML page.


<html>

<table>

<script language ="vbscript">

dim i, j

for i=1 to 3

    document.write("<TR>")

    for j=1 to 2

        document.write("<TD>")

        document.writeln("<OBJECT id= ""Control""& CStr(j+i*5-1)")

        document.writeln("WIDTH=171 HEIGHT=21 ALIGN=CENTER")

        document.writeln(" CODEBASE= ""http://")

        document.writeln(" activex.microsoft.com/controls/mspert10.cab""")

        document.writeln(" CLASSID=")

        document.writeln("""clsid:DFD181E0-5E2F-11CE-A449-00AA004A803D "">")

        document.writeln("<PARAM NAME=""Size"" VALUE=""4516;564"">")

        document.writeln(" <PARAM NAME=""Max"" VALUE=""255"">")

        document.writeln("<PARAM NAME=""LargeChange"" VALUE=""51"">")

        document.writeln("<PARAM NAME=""Orientation"" VALUE=""1"">")

        document.writeln("</OBJECT>")

        document.write("<TD>")

    next

    document.write("</TR>")

 next

</script>

</table>

</html>

The location object represents the current URL. The properties exposed by the location object can be accessed within the scripting language by prefixing location in front of the properties. Modifying the properties of this object will force the browser to navigate to the newly constructed URL.

Table 7.9 enumerates the exposed properties.

Table 7.9. Location object's properties.

Property Meaning get or set href Location's complete URL get and set protocol URL's protocol portion get and set host URL's host and port portion get and set hostname URL's hostname portion get and set port URL's port portion get and set pathname URL's pathname portion get and set search URL's search portion get and set hash URL's hash portion get and set

Form


The form object refers to a form within the HTML document. The document object keeps track of forms as an array or by name. The form can be accessed either by index or by name. For instance, for the following page:


<form name="test">

    <input type=button name=btnChange value="submit"> 

</form>

<form name="test1">

    <input type=button name=btnChange1 value="submit"> 

</form>

form "test" is the first form in the document. The following syntax can be used to refer to the "test" form via giving index.


document.form[0]

Or by referring to the form name "test"


document.test

Tables 7.10, 7.11, and 7.12 enumerate the exposed properties, methods and events of the form object.

Table 7.10. Form object's properties.

Property Meaning get or set action Address of the form's action get and set encoding Encoding for the form get and set method How the form data is sent to the server set target Name of the target window set elements Array of elements in the form get

Table 7.11. Form object's method.

Method Meaning Return Value Usage submit Submit the form none form.submit

Table 7.12. Form object's event.

Event Meaning Parameter Usage onSubmit Fires when the form is submitted none form.OnSubmit=string

The submit method can be used to validate the client side information before sending to the Web server. For instance, the following example in Listing 7.1 demonstrates how to validate the user's input before sending the information to the Web server.

Listing 7.1: Client Side Validation By using Submit method


<form name="validform" action="test.dll" method="post" >

    <input name=txtNumber  type=text size="2">

    <input name=btnSend type=button value="submit">

</form>

<script language="vbscript">

sub btnSend_onClick

    dim value 

    value = document.validform.txtNumber.value

    if IsNumeric(value) then

        if value  < 1 or value  > 10 then

            msgbox " please enter a number between 1 and 10"

        else

            document.validform.submit

        end if

    else

        msgbox "please enter a numeric number"

    end if

end sub

</script>

In Listing 7.1, document.validform is used across the html page to refer to the same form. The following code will simply the process.


dim theForm

set theForm = document.validform

After the above definition, theForm can be used to directly refer to the form in the HTML page.

In Listing 7.1, the information will be validated first when the "submit" button is clicked. If the information provided is not in the expected range, less than 1 or greater than 10, message " please enter a number between 1 and 10" will be displayed. If there is not any information provided, message "please enter a numeric number" will be displayed. This greatly improve the performance, and avoid sending information to the server side to do the validation , and sending back to the client etc.

Link


A link object is constructed for every link in the HTML document. It can be accessed in the scripting language through the indexed array by prefixing the document object reference. For instance, the following example will set the Link to the first link on the page:


theLink = document.link(0).href

Tables 7.13 and 7.14 show the properties exposed and events fired by the link object. There are no methods exposed by the link object.

Table 7.13. Link object's properties.

Property Meaning get or set href Link's complete URL get protocol URL's protocol portion get host URL's host and port portion get hostname URL's hostname portion get port URL's port portion get pathname URL's pathname portion get search URL's search portion get hash URL's hash portion get target URL's target portion get

Table 7.14. Link object's event.

Event Meaning Usage OnMouseMove Fires when the mouse move over a link OnMouseMove(shift, button, x, y) OnClick Fires when the mouse is clicked on a link OnClick OnMouseOver Fires when the mouse moves over a link OnMouseMove

Anchor


The anchor object is constructed for every anchor tag in the HTML document. It is accessed through the indexed array as the link object.

Table 7.15 shows the property exposed by the anchor object. There are not methods exposed and events fired by the anchor object.

Table 7.15. Anchor object's property.

Property Meaning get or set name Name of the anchor get and set

For more information on the Internet Explorer scripting object model, please refer to http://www.microsoft.com/vbscript.

Adding Internet Browsing to Any Application


The major component of IE 3.0 is the WebBrowser control. The reason that IE 3.0 has an innovative architecture is that the WebBrowser control can be used in any container application to provide the Internet browsing capability. WebBrowser control provides the functionality such as data downloading, hyperlinking and URL navigation, history information, and parsing and displaying HTML-encoded documents.

Building a Custom Web Browser


The following example illustrates how seamlessly the WebBrowser control integrates with container applications. Here, the language is Visual Basic 4.0 Enterprise Edition. The development environment is NT 4.0 and IE 3.0 release version is used.

Figure 7.7 shows how the application looks.

Figure 7.7. Custom Web browsing application.

The code for this project, shown in Listing 7.2, is fairly self-explanatory. The whole VB project for this sample is contained on the CD, called lst91.vbp.

Listing 7.2. Web browser integration.


Private Sub btnGo_Click()

    WebBrowser1.Navigate txtAddress

End Sub

Private Sub imageBack_Click()

    'go back one item in the history list

    WebBrowser1.GoBack

End Sub

Private Sub imageForward_Click()

    'go one item forward in the history list

    WebBrowser1.GoForward

End Sub

Private Sub imageHome_Click()

    'go to the current page or start page

    WebBrowser1.GoHome

End Sub

Private Sub imageRefresh_Click()

    'reload the page that is displaying

    WebBrowser1.Refresh

End Sub

Private Sub imageSearch_Click()

    'go to the current search page specified

    'in the internet control panel and the IE option

    'dialog box

    WebBrowser1.GoSearch

End Sub

Private Sub imageStop_Click()

    'stop the downloading or navigation

    WebBrowser1.Stop

End Sub

Private Sub WebBrowser1_BeforeNavigate(ByVal URL As String, 

[icc]       ByVal Flags As Long, ByVal TargetFrameName As String,

[icc]       PostData As Variant, ByVal Headers As String, Cancel As Boolean)

    Debug.Print "beforeNavigation"

End Sub

Private Sub WebBrowser1_CommandStateChange(ByVal Command As Long, 

                                           ByVal Enable As Boolean)

    Debug.Print "CommandStateChange"

End Sub

Private Sub WebBrowser1_DownloadBegin()

    Debug.Print "DownloadBegin"

End Sub

Private Sub WebBrowser1_DownloadComplete()

    Debug.Print "DownloadComplete"

End Sub

Private Sub WebBrowser1_FrameBeforeNavigate(ByVal URL As String,

[icc]               ByVal Flags As Long, ByVal TargetFrameName As String,

[icc]               PostData As Variant, ByVal Headers As String,

[icc]               Cancel As Boolean)

    Debug.Print "FrameBeforeNavigate"

End Sub

Private Sub WebBrowser1_FrameNavigateComplete(ByVal URL As String)

    Debug.Print "FrameNavigateComplete"

End Sub

Private Sub WebBrowser1_FrameNewWindow(ByVal URL As String,

[icc]         ByVal Flags As Long, ByVal TargetFrameName As String,

[icc]         PostData As Variant, ByVal Headers As String, 

[icc]         Processed As Boolean)

    Debug.Print "FrameNewWindow"

End Sub

Private Sub WebBrowser1_NavigateComplete(ByVal URL As String)

    Debug.Print "NavigateComplete"

End Sub

Private Sub WebBrowser1_NewWindow(ByVal URL As String, 

[icc]            ByVal Flags As Long, ByVal TargetFrameName As String,

[icc]            PostData As Variant, ByVal Headers As String,

[icc]            Processed As Boolean)

    Debug.Print "NewWindow"

End Sub

Private Sub WebBrowser1_ProgressChange(ByVal Progress As Long, 

[icc]                                  ByVal ProgressMax As Long)

    Debug.Print "ProgressChange"

End Sub

Private Sub WebBrowser1_PropertyChange(ByVal szProperty As String)

    Debug.Print "PropertyChange"

End Sub

Private Sub WebBrowser1_Quit(Cancel As Boolean)

    Debug.Print "Quit"

End Sub

Private Sub WebBrowser1_StatusTextChange(ByVal Text As String)

    Debug.Print "StatusTextChange"

End Sub

Private Sub WebBrowser1_TitleChange(ByVal Text As String)

    Debug.Print "TitleChange"

End Sub

In order to create any application using this control, make sure to select the Microsoft Internet control checkbox in the Visual Basic 4.0 custom control list. Tables 7.16, 7.17, and 7.18 enumerate the properties, methods exposed, and events fired by the WebBrowser control.

Table 7.16. WebBrowser control's properties.

Property Meaning get or set Application Application that uses the Web browser control get Busy Whether downloading or navigation is going on get Container Control container get Document Active document get Height Browser control height get and set Width Browser control width get and set Left Distance between the internal left edge get and set of the control and the left edge of the container Top Distance between the internal top edge get and set of the control and the top edge of the container Type Type name of the contained document get LocationName Title of the page or the UNC the browser get
is displaying LocationURL URL of the resource that the browser get
is displaying Parent Parent of the browser control get TopLevelContainer Whether the given object is a top-level container get

Table 7.17. WebBrowser control's methods.

Method Meaning Usage GoBack Go one item back in the history list goback GoForward Go one item forward in the history list goforward GoHome Go to the current home or start page gohome GoSearch Go to the current search page (this search page gosearch
is specified by the Internet control panel and
the IE option dialog box) Navigate Navigate to URL or a full path navigate URL Refresh Reloads the page that is displaying refresh Refresh2 Reloads the page that is displaying refresh [0...3]
with specified level: 0: Normal refresh 1: Refresh if the page has expired 3: Full refresh Note: 2 is not defined. Stop Cancel any pending navigation or download stop

Table 7.18. WebBrowser control's events.

Event Meaning BeforeNavigate Fires before navigating to a different URL CommandStateChange Fires when the enabled state of a command changes DownloadBegin Fires when a download starts DownloadComplete Fires when a download successfully ends FrameBeforeNavigate Fires when navigating to a different URL FrameNavigateComplete Fires when a navigation successfully ends FrameNewWindow Fires when a new window is to be created NavigateComplete Fires when successfully navigated to a new location NewWindow Fires when a new window is to be created ProgressChange Fires when the progress of download is updated StatusTextChange Fires when the status bar text is changed TitleChange Fires when the page title is changed

For more detailed information on these properties, methods, and events exposed by this control, please refer to http://www.microsoft.com/intdev/sdk/docs/iexplore/.

InternetExplorer Object


In addition to using the Web browser control inside a container application, IE 3.0 is also built as an OLE automation server. The ProgID for this automation server is InternetExplorer.Application. By calling as follows, an instance of Internet Explorer 3.0 will be created.


createobject("InternetExplorer.Application")

The methods and properties supported by the InternetExplorer object are a superset of the Web browser control. In other words, the InternetExplorer object exposes all the properties, methods, and events the WebBrowser control has. In addition, it supports more.

For more information about InternetExplorer Object, please refer to http://www.microsoft.com/intdev/sdk/docs/iexplore/.

Summary


The Internet Explorer 3.0 provides an innovative architecture, which allows developers to add Internet browsing to any application. The ActiveX scripting provides the interface so that scripting engines can be used in the IE 3.0. Furthermore, the IE 3.0 scripting object model provides support for programmatically controlling navigation, history, document, and forms directly from scripting languages.

Previous Page Page Top TOC Next Page