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.
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 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.
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."
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.
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)
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.
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/.
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.
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.
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.
The History object exposes the properties and methods on the current history list. Tables 7.4 and 7.5 enumerate its properties and methods.
There are no events fired by the history object.
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.
There are no methods exposed, and events fired by the navigator objects, s
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.
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.
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.
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.
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.
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.
For more information on the Internet Explorer scripting object model, please refer to http://www.microsoft.com/vbscript.
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.
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.
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/.
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/.
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.