Displaying HTML Content with a Web Browser Control in Visual Basic

Introduction

Perhaps you don't believe me if I tell you that you are already using a web browser control; in fact, you've been using it for a good many years. The IE.exe that is executed when you open Internet Explorer works through the web browser control.

The web browser control is a dynamic link library, called shdocvw.dll, hosted by Internet Explorer. The web browser in turn works through another dynamic link library, the mshtml.dll. This directly interacts with ActiveX controls, the script engine, Java applets, and so on that are embedded in HTML pages. Mshtml.dll is the component that takes care of the HTML and DHTML aspects of a web page.

If all of that sounds impressive, keep in mind that it's only the beginning. This is just a bird's eye-view of a control that contains a lot of functionality and flexibility. Readers are directed  to Microsoft's documentation on this control at MSDN.

The web browser control normally takes the URL to display the HTML content; if the source is not an URL but some HTML content, it would throw up an exception or error. The object of this tutorial is limited to using this control to display HTML content that does not necessarily have an URL reference.

Create a Visual Basic project, in this case, a prjWB to investigate the web browser control. In order to use this control you need to add the web browser control. Click on the Project menu, and from the drop down click on Components. This brings up the components window with the default controls tab in view. Uncheck Selected Items Only to reveal all the items. Scroll down until you come to Microsoft Internet controls. Place a check mark against the Microsoft Internet Controls that reference the C:windowssytem32 shdocvw.dll and check Selected Items Only so that the Components window shows only this control. Then click the Apply button as shown in Fig.1. This adds an icon to the tool box which appears as a small blue globe. Close the window.

Fig.1

Creating a user interface for testing

Create a UI as shown in Fig.2, displaying the design view with a command button, a text box, a label and the web browser. The web browser control can be dragged from the tool box and dropped on the form as shown below the button. It can be sized to your liking. The figure shows all these items on the form "Displaying with web browser." Move to the web page, look at the code view, and you will see all these items in the "General" drop down menu where the web browser control is referred to as WebBrowser1.

Now take a look at the control's methods, properties, and so forth by bringing up the Object browser window by clicking View -> Object Browser as shown in Fig.3. If you click on SHDocVwCtl you will see the various classes and class members of the web browser control. Although we will be using just one method of this control, you can see that there is rich functionality associated with this control, including the history of the page through Go back, Go forward and so on; the down loading of content; data binding, and more. Since the control is seen in the object browser you could access the properties and methods in the code assisted by intellisense. Out of all these properties and methods we will use one method, called Navigate(), which takes a URL as an argument.

Now click on the button and add the following code. Since intellisense is in effect, if you type webbrowser1 and insert a period after it, you will get the drop down menu with all associated applicable methods, properties, and events for this control as shown in Fig.4. Here is the complete reference to all the properties and methods for this control.

Private Sub Command1_Click()
WebBrowser1.Navigate (Text1.Text)
End Sub

Now passing a URL as a reference you can display the web page as shown in Fig.5.

In addition to a URL you may also use a full file path, or a path on a network drive for a display. For example each of the following will display the same page without an error.

URL: http://localhost/URLRef.htm
UNC Path: hodentekstagerURLRef.htm
Full reference: C:URLRef.htm

In addition to the .htm file you may also display *.xml, *.rtf and *.doc files in the web browser by navigating to the file, and when required the Open or Save option is presented, choose open. The document will be opened inside the web browser.

There are instances when you would like to display some HTML content produced by an application. But just passing the content to the Navigate() method will not work unless it is embedded in a file. If you were to use an HTML editor, it is very easy to pass the HTML content as an argument, and voila! You have a display of the HTML rendered on a web page. However it is possible to render the display if it can be converted to a file and stored in some location. This section shows how you may be able to do this.

In order to access the input/output capabilities you need to call up a reference to the FileSystemObject. Similar to adding the component to the project, you can also establish reference to libraries by clicking on Project -> References, and from the window that shows up scroll down and select the reference to the Microsoft Script Runtime. This adds the scrrun.dll, which gives access to the FileSystemObject as shown in the object browser in Fig.6.

Now modify the code by adding another button, to whose click event you will add the code shown below. The function call collects the textbox contents and presents it to the outstream. The outstream uses the WriteLine() method to write the text collected to the CFtest.htm file. This file gets persisted to the "C:inetpubwwwroot" directory. The WebBrowser control can now navigate to this file using the path reference to the file.

Private Sub Command2_Click()
Dim strg
strg = Text1.Text
Call browse (strg)
End Sub
Private Sub Form_Load()
WebBrowser1.Visible = False
End Sub
Sub browse (ByVal stringi As String)
WebBrowser1.Visible = True
Dim fsys As New FileSystemObject
Dim outstream As TextStream
testfile = "C:inetpubwwwrootcftest.htm"
Set outstream = fsys.CreateTextFile(testfile, True, False)
outstream.WriteLine (stringi)
Set outstream = Nothing
WebBrowser1.Navigate2 ("http://localhost/cftest.htm")
End Sub

Now by running this project you can verify that the display indeed shows the HTML content as shown in Fig.7.

Fig.7

Summary

The web browser control is a very important ActiveX control for Internet applications. It can be used to display a web page or HTML content. It can also be used for displaying a Word document, RTF document, or XML document inside a Windows form. For example it is possible to create a help file using this control for Windows form-based applications.