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.
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)
Introduction Differences Between the FrontPage Object Reference Libraries Understanding the Page Object Model
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
|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)|
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
objDocto 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
|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
|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
|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
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.
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.