24 septiembre 2007

Creando un navegador con el componente WebBrowser

Delphi incorpora dentro de la pestaña Internet el componente de la clase TWebBrowser el cual utiliza el motor de Internet Explorer para añadir un navegador en nuestras aplicaciones.


Seguro que os preguntareis, ¿que utilidad puede tener esto si ya tengo Internet Explorer, Firefox, Opera, etc.? Pues hay ocasiones en que un cliente nos pide que ciertos usuarios sólo puedan entrar a ciertas páginas web. Por ejemplo, si un usuario está en el departamento de compras, es lógico que a donde sólo tiene que entrar es a las páginas de sus proveedores y no a otras para bajarse música MP3 a todo trapo (no os podeis imaginar la pasta que pierden las empresas por este motivo).

Entonces vamos a ver como crear un pequeño navegador con las funcionalidades mínimas.

CREANDO LA VENTANA DE NAVEGACION

Vamos a crear la siguiente ventana:


Incorpora los siguientes componentes:

- Un panel en la parte superior con su propiedad Align fijada a alTop (pegado arriba).

- Dentro del panel tenemos una etiqueta para la dirección.

- Un componente ComboBox llamado URL para la barra de direcciones.

- Tres botones para ir atrás, adelante y para detener.

- Una barra de progreso para mostrar la carga de la página web.

- Un componente WebBrower ocupando el resto del formulario mediante su propiedad Align en alClient, de tal manera que si maximizamos la ventana se respete el posicionamiento de todos los componentes.

CREANDO LAS FUNCIONES DE NAVEGACION

Una vez hecha la ventana pasemos a crear cada uno de los eventos relacionados con la navegación. Comencemos con el evento de pulsar Intro dentro de la barra de direcciones llamada URL:

procedure TFormulario.URLKeyDown( Sender: TObject; var Key: Word; Shift: TShiftState );
begin
if key = VK_RETURN then
begin
WebBrowser.Navigate( URL.Text );
URL.Items.Add( URL.Text );
end;
end;

Si se pulsa la tecla Intro hacemos el objeto WebBrowser navegue a esa dirección. Además añadimos esa dirección a la lista de direcciones URL por la que hemos navegado para guardar un historial de las mismas.

Cuando se pulse el botón atrás en la barra de navegación hacemos lo siguiente:

procedure TFormulario.BAtrasClick( Sender: TObject );
begin
WebBrowser.GoBack;
end;

Lo mismo cuando se pulse el botón adelante:

procedure TFormulario.BAdelanteClick( Sender: TObject );
begin
WebBrowser.GoForward;
end;

Y también si queremos detener la navegación:

procedure TFormulario.BDetenerClick( Sender: TObject );
begin
WebBrowser.Stop;
end;

Hasta aquí tenemos la parte básica de la navegación. Pasemos ahora a controlar el progreso de la navegación así como que el usuario sólo pueda entrar a una página en concreto.

A la barra de progreso situada a la derecha del botón BDetener la llamaremos Progreso y por defecto estará invisible. Sólo la vamos a hacer aparecer cuando comience la navegación. Eso se hace en el evento OnBeforeNavigate2:

procedure TFormulario.WebBrowserBeforeNavigate2( Sender: TObject;
const pDisp: IDispatch; var URL, Flags, TargetFrameName, PostData,
Headers: OleVariant; var Cancel: WordBool );
begin
if Pos( 'terra', URL ) = 0 then
Cancel := True;

Progreso.Show;
end;

Aquí le hemos dicho al evento que antes de navegar si la URL de la página web no contiene la palabra terra que cancele la navegación. Así evitamos que el usuario se distraiga en otras páginas web.

En el caso de que si pueda navegar entonces mostramos la barra de progreso de la carga de la página web. Para controlar el progreso de la navegación se utiliza el evento OnProgressChange:

procedure TFormulario.WebBrowserProgressChange( Sender: TObject; Progress, ProgressMax: Integer );
begin
Progreso.Max := ProgressMax;
Progreso.Position := Progress;
end;

Cuando termine la navegación debemos ocultar de nuevo la barra de progreso. Eso lo hará en el evento OnDocumentComplete:

procedure TFormulario.WebBrowserDocumentComplete( Sender: TObject;
const pDisp: IDispatch; var URL: OleVariant );
begin
Progreso.Hide;
end;

Con esto ya tenemos un sencillo navegador que sólo accede a donde nosotros le digamos. A partir de aquí podemos ampliarle muchas más características tales como memorizar las URL favoritas, permitir visualizar a pantalla completa (FullScreen) e incluso permitir múltiples ventanas de navegación a través de pestañas (con el componente PageControl).

También se pueden bloquear ventanas emergentes utilizando el evento OnNewWindow2 evitando así las asquerosas ventanas de publicidad:

procedure TFormulario.WebBrowserNewWindow2(Sender: TObject;
var ppDisp: IDispatch; var Cancel: WordBool);
begin
Cancel := True;
end;

Aunque últimamente los publicistas muestran la publicidad en capas mediante hojas de estilo en cascada, teniendo que utilizar otros programas más avanzados para eliminar publicidad.

Pruebas realizadas en Delphi 7.

11 comentarios:

Anónimo dijo...

probando

Anónimo dijo...

interesantisimo, soy novato, pero me gustaria saber como le podriasmos hacer para meter el PageContro y que con arrastrar un link se abra en otra pestaña... muy agradecido por cualquier comentario..

Arsenio Lupín dijo...

Primero que nada: muchas gracias por el blog, lo consulto mucho.

Bueno, justo estaba haciendo un mini navegador web y me surgieron algunos inconvenientes que quizás sabés como resolverlos.

1. Cuando navego por cualquier página a la que no accedí directamente por la barra de direcciones (el combobox) no sé como hacer para actualizar la barra con la dirección actual (El título si con OnTitleChange).

2. Cuando copio texto (o direcciones) en una página web al intentar pegarlo en otro lado del programa, o inclusive en la barra de direcciones, me pego lo que tenía copiado desde antes... no encuentro como habilitar el clipboard del navegador...

3. Si intento ir hacia adelante cuando no tengo ninguna página me tira una excepción, no encontré como ver si existe algo en el historial... así que la "solución rápida" fue un try except sin nada dentro...

Si sabés de las soluciones a estos "problemas" te agradecería mucho... sino seguiré buscando y luchando...

Administrador dijo...

Para saber la última dirección por la que ha navegegado el Browser escribes esto en el evento OnNavigateComplete2:

procedure TForm1.NavegadorNavigateComplete2(ASender: TObject;
const pDisp: IDispatch; var URL: OleVariant);
begin
Direccion.Text := URL;
end;

Respecto a copiar algo de la web donde has navegado a nuestra la barra de direciones a mi me ocurre lo mismo. Creo que para ello hay que capturar el portapapeles de Windows y extraer la información.

Lo de controlar el botón GoFoward podrías hacerlo manualmente con un contador que se incrementa en el evento GoBack. Si es cero entonces no permites que el usuario avance.

Saludos.

Arsenio Lupín dijo...

Gracias... me había olvidado de volver aquí a comentar que lo pude resolver...

Para saber en cualquier momento la dirección en la que estoy, sea en el evento que propones o en otro momento:

webBrowser.LocationURL;

El webBrowser.GoForward hice algo parecido a lo que proponés, pero igual lo puse entre try except.

Lo de copiar texto o cualquier cosa desde el webform, agregué la librería ActiveX y al final, antes del end. (end principal) puse:

initialization
OleInitialize(nil);

finalization
OleUninitialize;

Y funciona... se puede copiar todo...

Estas y varias cosas más las obtube de otro blog: DelphiMagic, pero hay que tener el cuidado de cuando usa webBrowser.OleObject.Document ya que puede dar error cuando no está descargado...

Administrador dijo...

Muchas gracias por la información.

JeyEm dijo...

Hola amigos, les cuento mi problema a ver si me pueden dar una mano,
frecuentemente consultamos un documento word de 28 paginas, el cual esta hosteado en un sitio web con un content manager (Microsoft Share Point), lo que permite consultar el documento en su ultima version. Adentro cuenta de un monton de tablas (de word) que son consultadas permanentemente (de su actualizacion se encarga otra gente)
Frente al engorro que implica sea consultar este documento en su version impresa como en su version online que Sharepoint me ofrece, estaba pensando hacer una "Interfaz de consulta".
Algo sencillo que cuente con un edit, un boton de buscar y un control que muestre el documento y vaya resaltando cada resultado encontrado.
Para el control que muestre el control estaba pensando en un WebBrowser.
Bueno cualquier consejo/sugerencia/informacion/codigo/link sobre el uso de este control (y de como pasaría la busqueda de lo cargado en el edit al webBrowser) será de gran ayuda.

De antemano gracias!

tom dijo...

hola ,quiero que me expliquen eso de las ventanas emergentes , ls barra de progreso , memorizar las URL favoritas , permitir visualizar a pantalla completa , pestañas

Please alguien me ayuda a crear mi navegador , ya tengo la base echa osea los botones y anda la navegacion. Pero quiero agregarle mas cosas

PORFAVOR SE LOS PIDOO , QUE ALGUIEN ME AYUDE, ESTA MUY COMPLICADO ACA , PERO ESTA MUY INTERESANTE

Administrador dijo...

Yo intenté hacer lo mismo que tu pero al final desistí. Este componente es un Active X de Microsoft que se inserta a piñon fijo en los formularios de Delphi pero no deja hacer nada interesante.

Una lástima.

ALEXIS BOLIVAR dijo...

como puedo ver los historiales a travez de un boton

Unknown dijo...

Hola. Tengo una pregunta, como puedo hacer que el navegador tenga opción de descarga de archivos en mi PC?
La pregunta parece un poco tosca ahora que la formulo xD

Publicidad