Accessing the Internet Explorer Object Model

This content is no longer actively maintained. It is provided as is, for anyone who may still be using these technologies, with no warranties or claims of accuracy with regard to the most recent product version or service release.

 

Paul Cornell
Microsoft Corporation

April 2001

Applies to:
   Microsoft® FrontPage® 2002

Summary: This article describes how the Page object model in the Microsoft FrontPage 5.0 Page Object Reference Library differs from the Application and Web object models in the FrontPage 5.0 Web Object Reference Library. By using the Page object model, developers can manipulate the HTML in their Web pages at design time. (11 printed pages)

Contents

Introduction Differences Between the FrontPage Object Reference Libraries Understanding the Page Object Model   Accessing the Active Web Page   Manipulating the Active Web Page's HTML   Putting It All Together Using Visual Basic Scripting Edition (VBScript) Conclusion

Introduction

The Microsoft® FrontPage® 5.0 Web and Page Object Reference Libraries that are included with Microsoft FrontPage 2002 provide access only to a design-time development environment, instead of the design-time/run-time development environments in many of the other Microsoft Office XP applications. What this means is that you can create FrontPage utilities (such as COM add-ins) for use during the design-time phase of your Web pages and Web sites. When you have finished designing and building your Web pages and Web sites, you can use a Web page scripting language, such as Microsoft Visual Basic® Scripting Edition (VBScript), to create interactive effects for use during run time when users view your Web pages in a Web browser. This article introduces you to the FrontPage Object Reference Libraries and VBScript so that you can use these technologies when you are creating FrontPage solutions.

Differences Between the FrontPage Object Reference Libraries

Two type libraries are included with FrontPage 2002:

  • FrontPage 5.0 Web Object Reference Library
  • FrontPage 5.0 Page Object Reference Library

You can view the various members of the Web Object Reference Library in the Visual Basic Editor by clicking FrontPage in the Project/Library box in the Object Browser. To view the members of the Page Object Reference Library, click FrontPageEditor in the Project/Library box in the Object Browser.

These two type libraries give you access to three FrontPage object models:

  • Application object model
  • Web object model
  • Page object model

The members of the Application and Web object models can be found in the Web Object Reference Library, and the members of the Page object model can be found in the Page Object Reference Library.

The Application object model gives you programmatic access to the Web and Page object models. Through the Application object model, you can access the active web, the active page, open windows, COM add-ins, command bars, collaboration objects, Web navigation elements, the underlying operating system, themes, Web folders, and other FrontPage-based webs.

The Web object model gives you programmatic control over multiple FrontPage-based Web sites and their contents. The Web object model also provides support for source control over your Web sites through Microsoft Visual SourceSafe®.

The Page object model gives you access to individual Web pages, and mirrors much of the functionality of the Document object model in Microsoft Internet Explorer version 4.0 and later.

Figure 1 provides a graphic representation of the relationships among some of the objects and collections in the Application, Web, and Page object models; Table 1 describes what each object and collection represents; and Table 2 provides a list of code samples that you can use to access these objects and collections.

Figure 1. Relationships among selected objects/collections in the Application, Web, and Page object models

Table 1. Descriptions of selected objects/collections in the Web and Page object models

Object/collection Description
Webs collection A collection of FrontPage-based webs on a Web server.
WebEx object A specific FrontPage-based web on a Web server.
WebWindows collection A collection of open FrontPage windows.
WebWindowEx object A specific open FrontPage window.
PageWindows collection A collection of open Web pages.
PageWindowEx object A specific open Web page.
FPHTMLDocument object The content of a Web page.

Table 2. Sample code to access selected objects/collections in the Web and Page object models

Object/collection Sample code (with application)
Webs collection .Webs
WebEx object .Webs(Index) .ActiveWeb
WebWindows collection .Webs(Index).WebWindows .WebWindows .ActiveWeb.WebWindows
WebWindowEx object .Webs(Index).WebWindows(Index) .ActiveWebWindow
PageWindows collection .Webs(Index).WebWindows(Index).PageWindows .WebWindows(Index).PageWindows .ActiveWebWindow.PageWindows
PageWindowEx object .Webs(Index).WebWindows(Index).PageWindows(Index) .WebWindows(Index).PageWindows(Index) .ActiveWebWindow.PageWindows(Index) .ActiveWebWindow.ActivePageWindow .ActivePageWindow
FPHTMLDocument object .Webs(Index).WebWindows(Index).PageWindows(Index).Document .WebWindows(Index).PageWindows(Index).Document .ActiveWebWindow.PageWindows(Index).Document .ActiveWebWindow.ActivePageWindow.Document .ActiveDocument

For more information about the Application, Web, and Page object models, see Microsoft FrontPage Visual Basic Help.

Using the Application and Web object models is straightforward. Because using the members of these object models is similar to using the members of the other Office XP object models, I will not discuss them at length in this article. However, when you access the Page object model, you need to cross over from familiar Office-based object models into a slightly different object model that borrows heavily from the Document object model in Internet Explorer version 4.0 and later. The rest of this article explains the Page object model and how it differs from the other object models.

Understanding the Page Object Model

As stated earlier, the Page object model in FrontPage borrows heavily from the Document object model in Internet Explorer version 4.0 and later. In fact, it borrows so much that most of the reference documentation that is included with the Page Object Reference Library simply points to the DHTML, HTML and CSS Reference Help file (htmlref.chm) included with Office XP. Understanding this behavior is important to understanding how to read the Page Object Reference Help. For example, the objects in the FrontPage Page object model that correspond to objects in the Document object model are preceded with the letters "FPHTML" or "IHTML"; therefore, the FPHTMLDocument object in the FrontPage Page object model corresponds to the document object in the Internet Explorer Document object model. Likewise, the IHTMLElements collection in FrontPage corresponds to the elements collection in Internet Explorer, the FPHTMLSpanElement object in FrontPage corresponds to the SPAN object in Internet Explorer, and so on.

Accessing the Active Web Page

To manipulate the HTML in the active Web page, you must first access the page. To do so, you must go through the Application object model to gain access to the active Web page, and then you use the Page object model to manipulate the content of the page. The following code sample demonstrates how to access a few of the properties of the active Web page.

Sub DisplayActiveWebPageHTML()
    Dim objDoc As FPHTMLDocument

    Set objDoc = ActiveDocument

    ' Display all of the HTML for the active Web page.
    MsgBox "Entire HTML: " & vbCrLf & vbCrLf & objDoc.DocumentHTML

    ' Display the <BODY> text with and without the <BODY> tags.
    With objDoc.body
        MsgBox "<BODY> outer HTML: " & vbCrLf & vbCrLf & .outerHTML
        MsgBox "<BODY> inner HTML: " & vbCrLf & vbCrLf & .innerHTML
    End With
End Sub

In the preceding example:

  • By initializing the variable objDoc to the ActiveDocument property of the Application object in the Application object model, the code returns an FPHTMLDocument object, which is part of the Page object model.
  • The DocumentHTML property of the FPHTMLDocument object returns a String value that represents the entire HTML code for the active Web page.
  • The body property of the FPHTMLDocument object returns an IHTMLElement object that represents the BODY element for the active Web page.
  • The outerHTML property of the IHTMLElement object returns a String value that represents the entire HTML code in the BODY element, including the <BODY> tags.
  • The innerHTML of the ITHMLElement object returns a String value representing the entire HTML code in the BODY element, except for the <BODY> tags.

Manipulating the Active Web Page's HTML

The real power in the Page object model comes from dynamically manipulating the HTML code in the active Web page at design time. For example, you could create solutions that:

  • Perform intelligent search-and-replace actions.
  • Change the href attributes of various A elements.
  • Automate the insertion of META elements.
  • Standardize the properties of multiple IMG elements.

Now that you know how to access the active Web page's HTML code, the following table describes some of the main child objects of the FPHTMLDocument object that you can use to access individual elements of the active Web page's HTML code.

Table 3. Selected child objects of the FPHTMLDocument object

FPHTMLDocument
object property
Returns this child object... That represents
these items in the
active Web page
activeElement IHTMLElement The element that has the focus.
all IHTMLElementCollection All the elements. There is one element for each HTML tag.
anchors IHTMLElementCollection All the A elements that have a name and/or id attribute. Elements in this collection are in HTML source order.
body IHTMLElement The BODY element.
forms IHTMLElementCollection All of the FORM elements. Elements in this collection are in HTML source order.
images IHTMLElementCollection All of the IMG elements. Elements in this collection are in HTML source order.
links IHTMLElementCollection All the A elements that that have an href attribute.
scripts ITHMLElementCollection All the SCRIPT elements. Elements in this collection are in HTML source order regardless of the script's location in the document (whether in the HEAD or BODY element).
styleSheets FPHTMLStyleSheetsCollection All the cascading style sheet (CSS) reference URLs and STYLE elements.

Additionally, you can use the createElement method of the FPHTMLDocument object to create a new HTML element.

As you can see from the above table, many of the child objects returned from the FPHTMLDocument object correspond to the IHTMLElement object or the ITHMLElementCollection collection. The following table lists some of the more important members of the ITHMLElement object and the IHTMLElementCollection collection.

Table 4. Selected members of the IHTMLElement object

Member Description
all property Returns all of the child elements within a given element. There is one element for each HTML tag.
children property Similar to the all property, returns all the child elements within a given element, minus any child elements that have overlapping HTML tags.
id property Returns a String value that represents the id attribute for a given element.
innerHTML property Returns or sets a String value that represents the HTML code between the start and end tags for a given element (but not the start and end tags themselves).
innerText property Similar to the innerHTML property, returns or sets a String value that represents the text between the start and end tags for a given element (but not the start and end tags themselves).
outerHTML property Returns or sets a String value that represents the HTML code between the start and end tags for a given element, as well as the start and end tags themselves.
parentElement property Returns an IHTMLElement object that represents the parent element for a given element.
tagName property Returns a String value that represents a given element's name.
getAttribute method Returns a given attribute from a given element.
insertAdjacentHTML method Inserts HTML code at a given location in a given element.
insertAdjacentText method Similar to the insertAdjacentHTML method, inserts text at a given location in a given element.
removeAttribute method Removes a given attribute from a given element. Returns a Boolean value that indicates whether the given attribute was successfully removed.
setAttribute method Sets the value of a given attribute for a given element.

Table 5. Members of the IHTMLElementCollection object

Member Description
length property Returns a Long value that represents the number of elements in the given collection.
item method Returns a given element by name or index number.
tags method Returns all of the elements that have a given HTML element name.

Putting It All Together

Now that you have a good understanding of the various elements of the FPHTMLDocument and IHTMLElement objects and the IHTMLElementCollection collection, I will show you how to use their corresponding members to manipulate the HTML code for a given Web page.

The following example iterates through every element in the active Web page and reports each element's index number, its name, and its contents. With this subroutine, you can quickly document the HTML elements used in your Web pages.

Sub ReportElementProperties()
    Dim objDoc As FPHTMLDocument
    Dim lngElement As Long
 
    Set objDoc = ActiveDocument

    With objDoc.all
        For lngElement = 1 To .Length – 1
            Debug.Print "Index: " & lngElement
            Debug.Print "Name: " & .Item(lngElement).tagName
            Debug.Print "Contents: " & .Item(lngElement).outerHTML
            Debug.Print
        Next lngElement
    End With
End Sub

The example is straightforward; by using the item property of the IHTMLElementCollection collection (which is returned by the call to objDoc.all)to access each of the elements in the active Web page, the tagName and outerHTML properties return the name and HTML code of each element and display them in the Immediate window.

Building on the previous example, the following example removes the string http:// from the beginning of any href attribute value in all of the A elements on the active Web page. With this subroutine, you can easily modify the constants to create a quick search-and-replace solution for your own Web pages in design time.

Sub ReplaceElementAttributes()
    Dim objDoc As FPHTMLDocument
    Dim objElement As IHTMLElement
    Dim strTempText As String

    Const CHARACTER_LENGTH As Integer = 7
    Const STRING_FOUND As Integer = 1
    Const TAG_NAME As String = "a"
    Const ATTRIBUTE_NAME As String = "href"
    Const TARGET_STRING As String = "http://"

    Set objDoc = ActiveDocument

    ' Remove "http://" from the href attribute of all
    ' A elements in the document.
    For Each objElement In objDoc.all.tags(tagName:=TAG_NAME)
        strTempText = objElement.getAttribute _
            (strAttributeName:=ATTRIBUTE_NAME)
        ' Remove "http://" only if it appears at the beginning
        ' of the href attribute's value.
        If InStr(strTempText, TARGET_STRING) = STRING_FOUND Then
            strTempText = Right(strTempText, _
                Len(strTempText) - CHARACTER_LENGTH)
            objElement.setAttribute strAttributeName:=ATTRIBUTE_NAME, _
                AttributeValue:=strTempText
        End If
    Next objElement
End Sub

Here's how the example works:

  • The tags method returns an IHTMLElementCollection collection that contains only the A elements in the active Web page.
  • For each of the A elements, the getAttribute method returns a String value that represents the value of the href attribute in the A element.
  • The InStr function checks to see if the String value begins with the string http://. If it does, the code uses the Right and Len functions to strip the http:// portion from the string.
  • Finally the setAttribute method writes the modified string back into the A element's href attribute value.

Using Visual Basic Scripting Edition (VBScript)

After you've finished the design of a Web page, you may want to provide dynamic user interactivity during the run-time hosting of your Web page. To do so, you can use a Web page scripting language, such as VBScript.

As an Office developer, you will find VBScript quite familiar because of its inheritance from Visual Basic; you will also find that VBScript is a very forgiving language (the code is case-insensitive, all objects are declared as type Variant, and so on).

To demonstrate, the following example reports at run time the contents of each of the A elements on the Web page to which this script is attached:

<script id=clientEventHandlersVBS language=vbscript>
<!--
Sub window_onload
    Dim objElement
    Dim lngCurrentElement
    Dim strTempText

    Const TAG_NAME = "a"

    lngCurrentElement = 0

    For Each objElement In document.all.tags(TAG_NAME)

        ' Determine format of message to user depending on
        ' the element number.
        If lngCurrentElement = 0 Then
            strTempText = "first"
        ElseIf lngCurrentElement = _
                document.all.tags(TAG_NAME).length - 1 Then
            strTempText = "last"
        Else
            strTempText = "next"
     End If

        ' Report the HTML contents of the current <a> element and
        ' increment the element counter.
        MsgBox "Content of the " & strTempText & " <" & _
            TAG_NAME & "> element = " & objElement.outerHTML

        lngCurrentElement = lngCurrentElement + 1

    Next
End Sub
-->
</script>

For more information about VBScript, see the Microsoft Script Technologies Web site.

Conclusion

The FrontPage 5.0 Web and Page Object Reference Libraries that are included with FrontPage 2002 provide a convenient way to create design-time solutions for managing FrontPage-based webs and manipulating the HTML code in your Web pages. Although the Application and Web object models in the Web Object Reference Library are familiar to Office developers, the Page object model in the Page Object Reference Library may be less familiar to Office developers because it borrows heavily from the Document object model in Internet Explorer 4.0 and later. However, because the Page object model supports Automation, Office developers should be able to quickly master the Page object model. Once the design-time phase of your solution is complete, you can create dynamic Web pages at run time by using a Web page scripting language such as VBScript.