8/14/2019 S I G web

1/4

Let's Begin..

Start Visual Studio 2005, and create a new Visual Basic windows application. In the Form1.vbdesign view open the Tool Box and select the 'Common Controls' panel, then select the webbrowser control. Drag and drop the selected web browser control inside the surface of Form1 anddisplay its properties.

Change the name property to "MyWebBrowser", and in the URL property type an address of awebsite as your web browser's default address.Select Form1 and display its properties, then change its Window State property to "Maximized"Add the following items to the Form:

ControlName TextLabel AddressText Box TB_AddressButton Btn_GO GoButton Btn_Back BackButton Btn_Forward ForwardButton Btn_Stop StopButton Btn_Refresh Refresh

Button Btn_About About

Arrange all of the aforementioned controls on the surface of Form1 (See figure 1)Display Form1 properties and change the AcceptanceButton property to Btn_Go, this will activatethe "Btn_Go" click event automatically when the user clicks the enter key on the keyboard whichin turn will have the benefit of allowing the user to type a URL to navigate to and then to just pressthe Enter key without need to essentially click the Go button using the mouse.Using the Web Browser Control

Double click Form1 to activate the Form1 Load event and type the following code: 4Me.MyWebBrowser.AllowNavigation = True

5 Me.MyWebBrowser.AllowWebBrowserDrop = True

When setting MyWebBrowser.AllowNavigation property to true, this gives your web browser theability to navigate to other web pages after its initial page has been loaded.

Setting MyWebBrowser.AllowWebBrowserDrop to true will allow your browser to navigate to anddisplay documents when they are dragged and then dropped inside it.

Double click the Go button to activate its click event handler, and then write the following code:8 If Me.TB_Address.Text = "" Then Return

9 Me.MyWebBrowser.Navigate(Me.TB_Address.Text)

In the above code we check whether or not the user has entered an address into the address textbox.. If an address is found, then we order our web browser to navigate to this address.

Now if you run the application and typed an address into the address text box, then the browserwill take few seconds and it will display the web page of the address you typed. If you click anylink in this web page, your web browser will navigate to this link but the address text box will notreflect the address of the new web page.

8/14/2019 S I G web

2/4

To solve this problem you need to know about the web browser Navigated event. This eventoccurs when the web browser control has navigated to a new page and has begun loading it; inthis case the URL property of the web browser will contain the address of the new page.

Now handle this event by choosing Form1 code view then from the left drop down combo boxselect "MyWebBrowser", and from the right combo box select "Navigated". Inside this handler youwill need to type the following code: 12 Me.TB_Address.Text =Me.MyWebBrowser.Url.ToString

The web browser control maintains a history list of all pages visited during a browsing session,you can go back and forward in this history list by using the web browser control's methodsGoBack and GoForward as in the following code:

Double click the Back button to activate its click event handler, and then type the following code:15 Me.MyWebBrowser.GoBack()

Double click the Forward button to activate its click event handler, and then type the following

code: 18 Me.MyWebBrowser.GoForward()

As mentioned before, the Web Browser control maintains a history list of all visited pages, a copyof those pages is saved temporarily in a local temp directory. We typically refer to those savedcopies by the term 'cash'.Refreshing ... and Stopping

When you order your web browser to navigate to a page visited before and is still exist in thecash, the web browser control loads the page from the local cash not from its the web server. Toforce the web browser control to load this page from its server to reflect its current state (that may

be changed now) you need to use the Refresh method of the web browser control.

Double click the Refresh button to activate its click event handler, and type the following code:21 Me.MyWebBrowser.Refresh()

To implement a stop button into your web browser, you can use the Stop method of the webbrowser control as follows.

Double click the Stop button to activate its click event handler, and type the following code:24 Me.MyWebBrowser.Stop()

Below is an image in which you can see the final version of our web browser.

8/14/2019 S I G web

3/4

Figure 1The Document

The web browser control gives you the ability to access the document that is currently loaded, oreven to display whatever text you want to display through its document properties.

You can get the currently displayed document as text by using the "DocumentText" property, or ,on the other hand, you can set this property to whatever text you need to display and it will bedisplayed immediately instead of the currently displayed page. This is useful when you want todisplay something inside your web browser control's area according to some user actions not tonavigate to a given URL as we described in the above example. You can, as well, get thecurrently displayed document as text and do whatever parsing or processing on its contents.

Note: you will get the document text in html format including all its html tags and properties.

You can also get the currently displayed document as a stream of bytes by using the"DocumentStream" property.

You can use the "Document" property to access the contents of a the displayed html web pagethrough the Html document object model (DOM). This DOM model handles the HTML page as a

tree of tags and properties of those tags, this can be useful when you want to use some webbased controls inside your form.

To learn how to use the "DocumentText" property; review the following code:27 Me.MyWebBrowser.DocumentText = "Hello World
" + _

28 "This is my web browser version 1"

The above code will run after you click the About button at run time, It will display some text in the

8/14/2019 S I G web

4/4

client area of our Web Browser control. Shown in the following picture:

Figure 2

To handle the the currently displayed page as a DOM model you can, for example, use thefollowing code which changes the color of some of the document parts: 31 Dim Doc AsHtmlDocument

32 Doc = Me.MyWebBrowser.Document33 Doc.BackColor = Color.Azure34 Doc.ForeColor = Color.Green35 Doc.LinkColor = Color.Red

By using the DOM model you can access all of the HTML document elements, getting thesevalues or setting new values for them like: the document background color, foreground color, andlink color.

You can also get any document element by its id or name. The following lines of codedemonstrate how to get an html element called "q". 37 Dim Elm As HtmlElement

38 Elm = Doc.GetElementById("q")

The following lines of code demonstrate how to get a collection of all hyperlink elements of thecurrently displayed web page, traversing the collection and displaying the text of each linkelement inside this collection. 40 Dim ElmCol As HtmlElementCollection

41 Dim i As Integer42 ElmCol = Doc.Links43 For i = 0 To ElmCol.Count - 1

44 MsgBox(ElmCol(i).InnerText)45 Next

To test the above code and to find out how this can affect the currently displayed page, type thiscode inside any button click event handler, run your application, and then write any URL insidethe address text box of your browser and click go, then click that button to see the effect.