Sección de tutoriales y manuales vb

Tutorial para crear un navegador web simple usando el control WebBrowser de Visual Basic

Volver al índice


 

 

Este tutorial explica los aspectos básicos sobre como utilizar el control WebBrowser de Visual Basic creando un simple navegador web

 

 

 

 

 



Contenido

 

Nota: En el siguiente enlace hay una lista de ejemplos relacionados al control Webbrowser de vb 6.0 y vb.net : Enlaces relacionados al control webBrowser

1 - Introducción

Para crear el explorador se utiliza el Ocx ( que en realidad es una DllActivex) llamado Microsoft Internet Controls. Este se agrega desde el menú Proyecto - componentes

 

vista de la ventana de componentes de visual basic para añadir el ocx para el control web

 

Una vez que lo marcas, es decir que lo agregas al proyecto, se verá el siguiente control en el cuadro de controles del IDE de visual basic

 

Vista de la barra de controles de visual basic cuando insertamos el ocx microsoft internet controls

 

 

2 - Métodos principales del control WebBrowser

Antes de comenzar a crear el navegador de ejemplo, se describen los principales métodos del control WebBrowser en lo que se refieren a la navegación y carga de las páginas:

 

3 - Método Navigate

El método Navigate es el que permite cargar una página en el control Web. El único parámetro que necesita dicho método es la Url para cargar el documento en el control. Por ejemplo si quisiera cargar la página de google, se haría asi

 

ControlWeb.Navigate "http://www.google.com"

 

4 - Método GoBack y GoForward

El método GoBack y el método GoForward se utilizan para navegar a la página anterior y página siguiente (si es que las hay).

 

5 - Método Refresh

Método que se utiliza para actualizar la página cargada en el WebBrowser, es decir la vuelve a recargar

 

6 - Método GoHome

Se utiliza para cargar la página de inicio que esté establecida en el programa Internet explorer en la sección de opciones, este valor está guardado en el registro de Windows, Esto es porque el control web está basado en el dicho control. Si quisieramos configurar nuestra propia página de inicio, tendríamos que guardar la url en alguna parte, y cargarla con el método Navigate por ejemplo

 

7 - Método Stop

Por último el Método Stop detiene la carga de la página que actualmente se está cargando. Todos estos métodos, excepto el método Navigate, no requieren parámetros, solo llamarlos para que hagan lo que tienen que hacer

 

8 - Propiedades principales del control WebBrowser

 

Las propiedades principales son:

 

La propiedad LocationName devuelve el título de la página que cargamos en el control webBrowser.

Por ejemplo si cargáramos la mítica web del guille: www.elguille.info , esta propiedad devolvería: "El Guille la web de la programación etc..", es decir la descripción de la página que está definida en las etiquetas "Title" del documento cargado

La propiedad LocationUrl lo que nos devuelve es la dirección http del documento cargado en el control WebBrowser.

Este control tiene otras propiedades, pero para el ejemplo por ahora basta con nombrar estas 2

 

9 - Eventos principales del control WebBrowser

 

Los principales eventos del control son:

 

El control web tiene muchos otros eventos aparte de estos 5, algunos sinceramente no tengo idea para que son, pero en el ejemplo se usarán solo estos

 

10 - Evento NavigateError

El evento NavigateError se dispara o ejecuta cada ves que al cargar una página, se produce un error en la carga

 

11 - Evento ProgressChange

El evento ProgressChange nos sirve para ver el progreso de descarga del documento o de los documentos, ya que al cargar una página se pueden estar descargando varios elementos, no solo la página a la que navegamos. En el ejemplo del navegador, con este evento , se creará una barra de progreso para poder visualizar el porcentaje de descarga de la página en la que estamos navegando

 

12 - Evento NewWindow2

Se ejecuta cuando se abre una ventana de tipo PopUp o las llamadas páginas de tipo _Blank. Por defecto en el control webBrowser, si presionamos en un enlace que abre una ventana PopUp, se abre una nueva instancia del Internet Explorer. Para que no ocurra esto en el programa y se pueda abrir la página en una instancia de nuestro navegador, utilizaremos este evento para detectar cuando suceda esto, mediante una variable llamada cancel , y que cancela la ejecución del navegador predeterminado, y al crear una instancia nueva de nuestro formulario, se cargará esa página en este nuevo formulario .

 

13 - Evento StatusChange

Este evento tiene un parámetro llamado Text. Ese valor nos devuelve el estado de la navegación, es decir nos muestra la url que se está navegando o las url que se están navegando. Cuando termina de descargarse todo, la variable Text posee el valor "Listo".

También esta variable cambia cuando el mouse pasa encima del control Webbrowser, por ejemplo encima de un enlace, y se refleja en esta variable. En este evento es donde hay que poner una especie de barra de estado, label o lo que sea.

 

14 - Evento NavigateComplete2

Se produce cuando se ha podido navegar a la url, esto no quiere decir que el documento o la página este completamente descargada

 

15 - Controles necesarios para crear el Navegador


 

Nota: los controles dentro del Picture no importa que estén ordenados, ya que se acomodan y posicionan en tiempo de ejecución, por eso se ve de esa manera en la imagen

La vista previa anterior muestra la ventana de diseño y los controles para agregar. Como podés ver no usé iconos ni nada, eso lo podés hacer vos a tu gusto. Tampoco se utilizó un control ToolBar de Visual Basic, si no que se colocó un control PictureBox que contiene los botones para navegación. También contiene una barra de progreso, un combobox para la barra de direcciones, el control webbrowser debajo del control Picture, y debajo del control Webbrowser un control Label que será el que muestre el enlace actual de descarga de las páginas y el estado de descarga, mostrando la url, sería como el statusbar o barra de estado.

 

Pasos a seguir para agregar los principales controles en el formulario:

  1. Agregar un control PictureBox llamado PicToolBar. Colocarlo en la parte superior del formulario como está en la imagen. No colocarle el ancho ni el alto a mano, ya que se redimensionará cuando se cargue el formulario y se ubicará en el lugar correcto
  2. Colocar un arreglo de CommandButton , o un ocx de botones, o lo que mas te guste, y al nombre del arreglo botones renombrarlo a cmdtoolBar. En total tienen que ser 5, es decir desde el cmdtoolBar(0) hasta el cmdtoolBar(4)
    También Colocarle los Caption a los botones en el orden como está en la imagen, el primero sería la flecha "<" que sería el botón que navega hacia la página anterior, el segundo (cmdToolbar(1) ) ">", la página siguiente, hasta el último que dice Inicio (cmdtoolBar(4)).
  3. Debajo de esto, colocar un control Label llamado LblDir, y en el Caption del Label escribir "Dirección". Al igual que los otros controles , no lo ubiques en el orden correcto, colocalo en cualquier lado, ya que se posiciona mediante código, Pero si o si debe estar dentro del PictureBox mencionado antes.
  4. Agregar un ComboBox llamado CboDir dentro del Picture. Este combo será la barra de direcciones.
  5. Agregar un Command Button llamado cmdNavigate, que será el que navegará a la página cuando se escriba una dirección en el CboDir (barra de direcciones) y se pulse navegar. Escribir en el Caption del botón "Navegar" o "ir" o lo que quieras.
  6. Fuera del Picture, es decir dentro del formulario, dibuja o agrega un control WebBrowser llamado WebBrowser (como está en la imagen)
  7. Insertar un control Label llamado lblStatusbar, que en la imagen está como "Label1". Este control se posicionará en la parte inferior del formulario cuando se esté ejecutando el programa, justo debajo del control WebBrowser y mostrará el estado de las url que se están cargando. También este Label visualiza la dirección url cuando pasas el mouse por encima de un enlace como se comentó.
  8. Por último colocar, dentro del PicToolBar, un control ProgressBar para la barra de progreso ( Yo no usé el Progressbar del visual basic que se agrega con el Ocx "Microsoft Windows Common Controls 6.0", ya que este ocx, trae varios ocx y el peso del archivo es de 1 MB y no valía la pena usar solo el Progressbar y cargar todos los demás ocx que no se usarán. Si querés podes usar un Ocx que pesa 90 Kb (es muy liviano) y es mucho mejor que el de Visual basic ya que tiene muchas otras opciones que no posee el Progressbar del vb. Lo podés bajar desde acá y es gratuito: Ocx para barra de progreso
  9. Por último, al formulario Form1 colocarle el nombre FrmWeb

 

 

16 - Código fuente para el navegador

 

Ahora se agregará el procedimiento para los botones cmdToolBar:

 Private Sub cmdtoolBar_Click(Index As Integer)
On Error GoTo mensajeError

Select Case Index
 
  Case 0
    WebBrowser.GoBack 'ir a la página anterior
  Case 1
    WebBrowser.GoForward 'Siguiente página
  Case 2
    WebBrowser.Stop 'Detener la carga de la página
  Case 3
    WebBrowser.Refresh ' Actualizar la página
  Case 4
    WebBrowser.GoHome 'Ir a la página de inicio
End Select


Exit Sub
'rutina de Error
mensajeError:
If Err.Number = -2147467259 Then
   Resume Next
MsgBox Err.Description
End If

End Sub

 

 

17 - Botón Navegar - cmdNavigate

 

El código para cargar la página que se escriba dentro del combobox llamado cboDir cuando pulsemos el botón cmdNavigate es muy simple, y como se comentó antes utiliza el método Navigate del control webBrowser. Agrega el código en el formulario principal:

 

 Private Sub cmdNavigate_Click()
If CboDir <> "" Then
  
  'Navegamos a la página con el método Navigate pasandole la _
  dirección del combobox cboDir
  
  WebBrowser.Navigate Trim$(CboDir)
End If

End Sub

 

Para que cuando se pulse la tecla Enter, también se navegue a la página escrita en la barra de direcciones, es decir no solo cuando pulsamos dicho botón, hay que establecer la propiedad Default del botón cmdNavigate en True. Pero también aparte de esto hay que impedir que los botones del formulario retengan el foco, ya que si tienen el foco, por ejemplo el botón "inicio" por decir uno, al presionar la tecla Enter, no se ejecutará el botón cmdNavigate para navegar a la página, para esto podemos hacer que cuando reciban el foco, se lo pasemos al formulario: pega entonces esta rutina:

 

Private Sub cmdtoolBar_GotFocus(Index As Integer)
'Le establecemos el foco al formulario
Me.SetFocus
End Sub 

 

Ahora se añade el código para que cuando se presione click en una dirección del combo cboDir se navegue a la página:

 

Private Sub CboDir_Click()
'Cuando hacemos click en una url del combo cargamos dicha página
WebBrowser.Navigate CboDir
End Sub 

 

 

18 - Código para cuando se produce un error ( Evento NavigateError )

 

Cada ves que se produce un error al intentar navegar a una dirección inexistente, o que no se pudo localizar, se dispara el evento NavigateError.

Dentro de este procedimiento, pondremos solo un mensaje indicando la Url que dió el error, a modo de información:

 

Private Sub WebBrowser_NavigateError(ByVal pDisp As Object, URL As Variant, _
                                     Frame As Variant, StatusCode As Variant, _
                                     Cancel As Boolean)

'Si se produce un error se dispara este evento y mostramos el mensaje con la
'url del parámetro NavigateError

MsgBox "No se puede navegar a la Dirección: " & vbNewLine & URL, vbCritical, "Error"

End Sub 

 

 

19 - Procedimiento para posicionar y redimensionar los controles del formulario

 

Este procedimiento, coloca los controles en la ubicación correcta, no se ejecuta en el evento resize del formulario, ya que solo se debe posicionar y redimensionar una sola ves cuando se carga el formulario, por eso lo ponemos en el evento Load del Form: El procedimiento se llama redimensionarControles y es el siguiente:

 

Private Sub RedimensionarControles()
On Local Error Resume Next
  Dim ancho As Integer
  'Para posicionar los cmdcontrol
  cmdtoolBar.Item(0).Move 10, 25
  For i = 1 To cmdtoolBar.Count - 1
      ancho = cmdtoolBar(i).Width + ancho
      cmdtoolBar(i).Move ancho, 25
  Next
  'Para posicionar el PicToolBar
  PicToolBar.Move 25, 0, Screen.Width - 50, cmdtoolBar(0).Height + CboDir.Height + 200
  'Para posicionar el combo cboDir
  CboDir.Move LblDir.Width + 100, cmdtoolBar(0).Height + cmdtoolBar(0).Top + 100, PicToolBar.ScaleWidth - cmdNavigate.Width - 150 - LblDir.Width
  'Para posicionar el Label que dice direccion  lblDir
  LblDir.Move 50, CboDir.Top + 50
  'Para posicionar el botón cmdNavigate
  cmdNavigate.Move CboDir.Left + CboDir.Width + 50, CboDir.Top, cmdNavigate.Width - 100
  'Para redimensionar y posicionar el control WebBrowser
  WebBrowser.Move 10, PicToolBar.Height + 50, Screen.Width - 25, Screen.Height - PicToolBar.ScaleHeight - 1200
  'Para el Label de la barra de estado
  lblStatusbar.Move 150, WebBrowser.Top + WebBrowser.Height + 100, Screen.Width - 300
  'Para posicionar la barra de progreso (Progressbar)
  ProgressBar.Left = cmdtoolBar(4).Left + cmdtoolBar(4).Width + 50
End Sub

 

 

Procedimiento para quitar la propiedad TabStop de todos los controles del formulario menos del control WebBrowser y del control CboDir (combo de la barra de direcciones)

 

Para quitar el TabStop de todos los controles para no poder movernos con la tecla tab, podríamos hacerlo uno por uno, pero mejor es de esta manera, ya que si se agregan otros controles nuevos, nos despreocupamos de volver a establecer la propiedad manualmente, ya que el bucle recorrerá todos los controles, y solo dejará con la propiedad TabStop en true del control WebBrowser y del Combo de las direcciones url

 

Private Sub QuitartabStop()
On Error Resume Next
Dim i As Integer, ctl As Control

For Each ctl In Me.Controls
    'Deshabilitamos la propiedad TabStop de todos los controles, exepto del control WebBrowser
    'y del control cboDir (barra de direcciones)
    If Not TypeOf ctl Is WebBrowser And Not TypeOf ctl Is ComboBox Then
       ctl.TabStop = False
    End If
Next ctl
'Ponemos el botón que bavega (cboNavigate) con la propiedad Default en True
cmdNavigate.Default = True

End Sub 

 

Procedimientos que se ejecutan en la carga del form

En el evento Load del Form iría el siguiente código:

 

Private Sub Form_Load()


'Autocompletamos la caché de windows cuando tipeamos en el cboDir
Call AucompletarCache(CboDir)

'Ponemos en false la propiedad tabStop de los controles menos la _
 del WebBrowser y la del Combo cboDir

Call QuitartabStop

'Para posicionar y redimensionar los controles
Call RedimensionarControles

End Sub 

 

Los procedimientos QuitartabStop y RedimensionarControles, ya se vió anteriormente, ahora hay uno que no se explicó y es el procedimiento AutocompletarCahe.

Este procedimiento hace uso de una función Api llamada SHAutoComplete y otra llamada FindWindow. Lo que hace esta rutina, es poder asignarle al control ComboBox las entradas de la caché de Windows (esto lo hace de forma automática), para que al escribir una coincidencia, se autodesplieguen las entradas de las páginas ya visitadas, si no entendés a lo que voy, mirando la siguiente imagen te va a quedar mas claro:

vista previa de la función Api SHAutoComplete para completar la caché del historial de páginas de windows

 

Para poder hacer esto agregar un módulo bas, y pegar las siguientes declaraciones Api y el procedimiento AutocompletarCache

Aclaro que esto lo descubrí gracias al amigo Leandro Ascierto, ya que yo lo sabía hacer pero utilizando un control textBox y no con un Combo. Para hacerlo con un combo hay que utilizar otra Api (FinWindowEx).

 

'Constantes

Public Const SHACF_AUTOAPPEND_FORCE_OFF = &H80000000
Public Const SHACF_AUTOAPPEND_FORCE_ON = &H40000000
Public Const SHACF_AUTOSUGGEST_FORCE_OFF = &H20000000
Public Const SHACF_AUTOSUGGEST_FORCE_ON = &H10000000
Public Const SHACF_DEFAULT = &H0
Public Const SHACF_FILESYSTEM = &H1
Public Const SHACF_URLHISTORY = &H2
Public Const SHACF_URLMRU = &H4
Public Const SHACF_USETAB = &H8
Public Const SHACF_URLALL = (SHACF_URLHISTORY Or SHACF_URLMRU)

'Función Api SHAutoComplete para autocompletar la caché
Public Declare Sub SHAutoComplete Lib "shlwapi.dll" (ByVal hwndEdit As Long, ByVal dwFlags As Long)
Public Declare Function FindWindowEx Lib "user32" Alias "FindWindowExA" (ByVal hWnd1 As Long, _
                                                         ByVal hWnd2 As Long, ByVal lpsz1 As String, _
                                                         ByVal lpsz2 As String) As Long

'Procedimiento que recibe un combo como parámetro
Public Sub AucompletarCache(cbo As ComboBox)

Dim Handle As Long

Handle = FindWindowEx(cbo.hWnd, 0, "edit", nullstring)
SHAutoComplete Handle, SHACF_DEFAULT

End Sub 

 

 

20 - Mostrar en el combo de direcciones, la Url que se está cargando mediante el evento NavigateComplete2

 

Este evento como se dijo, se produce cuando al usar el método Navigate, se ha alcanzado la url solicitada, entonces utilizamos la propiedad locationUrl para mostrarla en el combo cboDir

 

Private Sub WebBrowser_NavigateComplete2(ByVal pDisp As Object, URL As Variant)


'Mostramos la url que se está cargando en el combo
CboDir = WebBrowser.LocationURL

'Agregamos la url al combo
CboDir.AddItem WebBrowser.LocationURL

'Mostramos en el la barra de titulo del formulario el title _
 de la página con la propiedad LocationName

Me.Caption = WebBrowser.LocationName

End Sub 

 

 

21 - Abrir una nueva instancia del navegador cuando se abra otra ventana en el evento NewWindow2

 

Como se había comentado antes, cuando hacemos click en un vínculo que se abre en otra ventana (las de tipo _Blank o PopUp ), se inicia el Internet Explorer o el navegador predeterminado que tengamos en el sistema para mostrar dicha página.

Para evitar esto y poder abrirlo con una nueva instancia de nuestro formulario web,se puede hacerlo con el evento llamado NewWindow2. Este evento que se produce cada ves que un vinculo se abre en una nueva ventana, y el mismo tiene una variable como parámetro llamada Cancel. Al colocar esta variable en True, se cancela la ventana impidiendo que se abra el navegador predeterminado, de esta manera, mediante la sentencia New, creamos una copia del formulario y cargamos esa Url en la nueva instancia:

El código fuente sería el siguiente:

Private Sub WebBrowser_NewWindow2(ppDisp As Object, Cancel As Boolean)


'Cancelamos la ventana del explorador predeterminado
Cancel = True

'Creamos una nueva instancia del navegador, es decir del formulario
Set NuevaVentana = New FrmWeb
    
    NuevaVentana.Show 'lo hacemos visible
    'cargamos la página en esta nueva ventana
    NuevaVentana.WebBrowser.Navigate lblStatusbar

End Sub


Private Sub Form_Unload(Cancel As Integer)

'Eliminamos la variable de tipo FrmWeb cuando descargamos el Formulario
Set NuevaVentana = Nothing

End Sub 

 

Ahora, para poder crear el formulario de tipo FrmWeb, es decir una nueva instancia , debemos declarar la variable, en la zona de declaraciones :

 

'Variable para crear la instancia del navegador
Dim NuevaVentana As FrmWeb

 

 

22 - Código para la Barra de progreso

 

El evento que se dispara y que va indicando el progreso de las descarga de los documentos en el control Web, es el evento ProgressChange. Este tiene 2 parámetros: Uno llamado ProgressMax y otro Progress.

El código fuente para la barra de progreso es el siguiente:

 

'Evento ProgressChange del control WebBrowser que _
 nos permite obtener los valores de descarga

Private Sub WebBrowser_ProgressChange(ByVal Progress As Long, ByVal ProgressMax As Long)
On Error GoTo men

'El Máximo de la barra es la variable ProgressMax

ProgressBar.Max = ProgressMax
ProgressBar.Value = Progress

    If ProgressMax <= 0 Then
       ProgressBar.Visible = False
    Else
       ProgressBar.Visible = True
    End If

Exit Sub

'Error
men:

If Err.Number = 380 Then Resume Next

End Sub 

 

Bueno acá termina este simple Navegador web en visual basic. Se pueden agregar muchas otras opciones, como por ejemplo un botón para añadir páginas de favoritos, Historial etc...

También un método interesante del control WebBrowser es ExecWb, este permite realizar varias operaciones, como por ejemplo abrir la ventana de búsqueda que usa el internet explorer, imprimir, guardar la página web , seleccionar texto, Copiar , Cortar, vista preeliminar del documento cargado, y varias otras opciones

Si querés ver un ejemplo de como poder realizar esto último, en este enlace se muesta como hacerlo: Método ExecWb del control WebBrowser

 

Ejemplo enviado por helmuth Schmelzer Campos

Este es otro ejemplo de un navegador simple usando el control webbrowser :

Descargar

 

... Y en este otro Link hay un código fuente de un navegador web con pestañas usando un control TabStrip

 

 

Buscar en Recursos vb

Recursos visual basic - Buscar - Privacidad - Copyright © 2005 - 2009 - www.recursosvisualbasic.com.ar