Le contrôle WebBrowser vous permet d’afficher une page Web et de naviguer avec. Ce contrôle permet notamment l’interopérabilité entre le code de votre application et une page Web.

Il vous permet aussi de la modifier puisque nous avons accès au DOM (Document Object Model). On peut donc injecter du code, en retirer, déclencher un clic, valider un formulaire, etc… assez facilement.

N’oubliez pas d’ajouter la référence Microsoft.mshtml dans votre projet et de l’appeler ensuite:

using mshtml;

Accéder au DOM d’une page:

WebBrowser webBrowser = new WebBrowser();
HTMLDocument DOMPage = webBrowser.Document as HTMLDocument;

Si notre page possède des cadres/frames (booouuuh !), le framework nous permet d’y accéder aussi.

IHTMLWindow2 frame2 = DOMPage.frames.item(2); // Accès à la 2ème frame
HTMLDocument DOMFrame2 = frame2.document as HTMLDocument; // Accès au DOM

Ecouter les clics sur le WebBrowser:

Il n’est pas possible de s’abonner par exemple, à un seul bouton de la page Web. Il faut s’abonner dans un premier temps aux clics du WebBrowser et vérifier que le bouton cliqué est bien celui que l’on souhaite.

HTMLDocumentEvents2_Event evenements = DOMPage as HTMLDocumentEvents2_Event;

evenements.onclick += new HTMLDocumentEvents2_onclickEventHandler(evenements_onclick);

La dernière ligne nous génère une fonction qui se déclenche lors des clics.

// Booléen en retour. Par exemple, pour valider le formulaire ou non
bool evenements_onclick(IHTMLEventObj e)
{
   IHTMLElement sender = e.srcElement; // Déclencheur du clic

   string id = sender.id; // ID de l'élément
   string tagName = sender.tagName; // Type de l'élément (INPUT, IMG...)
   string classeCSS = sender.className; // Classe CSS

   // ... et bien d'autres !

   return true;
}

La même chose est possible pour tous les évènements HTML tels que onmouseout, onmouseover, onkeyup…

Obtenir/Modifier la valeur d’un élément particulier:

Il nous est possible d’obtenir et de modifier les propriétés des éléments de notre page (saisie d’un champs de formulaire, source d’une image, classe CSS d’un paragraphe, etc…)

Accès par ID:

Un ID est censé être unique. Un seul élément HTML ne peut être désigné par cet ID.

Exemple avec un bouton ou champs de texte:

// <input type="text" id="nom" />
IHTMLInputElement input = DOMPage.getElementById("nom") as IHTMLInputElement;
Console.WriteLine(input.value);
input.width = 100;

Exemple avec une image:

// <img id="logo" />
IHTMLImgElement image = DOMPage.getElementById("logo") as IHTMLImgElement;
image.src = "http://www.epsilab.net/Images/logo.png";

Exemple avec un formulaire:

// <form id="connexion">
IHTMLFormElement formulaire = DOMPage.getElementById("connexion") as IHTMLFormElement;

// Il existe une méthode submit() mais qui n'appelle pas l'évènement onsubmit() s'il existe. Il faut l'appeler manuellement en premier
formulaire.onsubmit();
formulaire.submit();

Accès par nom (name):

En HTML, il est possible que plusieurs éléments portent le même nom. Pour cela, on récupère une liste contenant les éléments portant un nom précis puis on indique l’index de celui que l’on souhaite. Cette liste peut ne contenir qu’un seul élément.

// <input type="text" name="code" />
IHTMLElementCollection inputs = DOMPage.getElementsByName("code") as IHTMLElementCollection;

// Obtenir le premier élément de la liste
IHTMLInputElement input = inputs.item("code", 0) as IHTMLInputElement;

Appeler une fonction Javascript contenue dans la page:

Exemple de fonction:

function Ecrire(nom, prenom)
{
   document.write("Bonjour: " + prenom + " " + nom);
}

Appeler cette fonction:

webBrowser.InvokeScript("Ecrire", new object[] { "Dupont", "Jean" });