Eine VB NET Webbrowser Alternative verwenden

Du möchtest eine VB NET Webbrowser Alternative installieren und einfach verwenden? Endlich dem mehr als veralteten Webbrowser Lebewohl sagen!? Dann bist Du in meinem heutigen Beitrag genau richtig!

Es war einmal..

Es war einmal ein veralteter Browser, Welcher leider langsam und fehleranfällig war. Er hatte viele Probleme mit gewissen Scripten und wollte auch visuell nicht so ganz. Die modernen CSS gestylten Elemente wurden falsch dargestellt und weitere Probleme warteten. Wäre es da nicht schön, auf eine modernere Alternative zurückgreifen zu können?

Diese Frage habe ich mir seitdem ich ca. 2008 mit Visual Basic NET angefangen habe auch öfters gestellt. Immer wieder hat man sich dann aber doch aus fehlerhafter Gemütlichkeit mit dem alten Browser begnügt.

Zeit für Veränderung – Eine VB NET Webbrowser Alternative muss her

Irgendwann war es aber doch Zeit für Veränderung, da die Problemchen einfach zu viele wurden. Zum damaligen Zeitpunkt, bzw. in der Vergangenheit was das Upgrade zu einem guten Browser-Control nicht einfach. Zum einen musste dieser Browser natürlich einfach und intuitiv zu nutzen sein.

Andererseits musste man die Browser-Control Alternative auch erstmal einfach installieren und konfigurieren können. Dies war zur damaligen Zeit leider nicht so prickelnd, da einige Projekte auch schnell wieder eingestampft wurden.

Zum Glück gibt es jedoch eine Variante, Welche ich bis heute noch gerne nutze. Damit werden wir uns gleich samt Installation, Konfiguration und der ersten Website beschäftigen.

Das erste Problem – die Skriptfehler

Wer jemals eine Seite mit dem Webbrowser aufgerufen hat wird wissen, dass es häufig zum gleich folgenden Fehler kommt. Teilweise wird man beim Öffnen einer Seite auch richtig mit diesem und ähnlichen Fehlern vollgespammt.

Das ist nicht nur blöd für den Nutzer, weil er alles wegklicken muss, sondern auch für uns als Entwickler. Zum Glück kann man zumindest dieses Problem durch die simple Einstellung einer Eigenschaft lösen.

Dazu ändert man einfach die „ScriptErrorsSuppressed“-Eigenschaft auf „true“, entweder via Designer, oder im Code. Meistens sollten diese Boxen dann aufhören zu erscheinen und wir sind zumindest das los..

Nicht mehr unterstützte Seiten – Das nächste Problem

Neben dem oben genannten Problem gibt es auch unter anderem noch das Nächste. Dabei handelt es sich um eine Art „nicht mehr unterstützt“ Meldung, Welche man auf vielen Seiten sieht. Wer also mit der normalen „Navigate“-Methode versucht Seiten zu besuchen, bekommt immer öfter solche Meldungen hier:

Neben dem problembehafteten Öffnen von oben ist dies natürlich ein „Worst Case„-Szenario. Hier können wir dann leider gar nichts mehr tricksen und müssen vollständig davon absehen.

JavaScript injizieren – net so prickelnd

Wer im Web-Bereich arbeitet, wird irgendwann wohl nicht um einen gewissen Bestandteil herumkommen: JavaScript. Es wird also sicherlich das ein oder andere Mal vorkommen, dass man JavaScript ausführen möchte. Ich selbst habe es schon öfters für gewisse Exports, oder eventuellen Automatisierungen verwendet.

Leider macht es einem das normale Webbrowser-Control auch hier nicht gerade einfach. Man muss einen umständlichen Weg über die Erstellung eines Html-Elements gehen.

Dazu muss man sich zuerst eine Referenz auf das Head-Element holen und ein neues Script-Element erstellen. Anschließend versieht man dieses Element dann mit Inhalt und fügt es dann an den Head an. Zum Schluss kann man dann z. B. eine Funktion mit Webbrowser.Document.InvokeScript(„<Funktionsname>“) ausführen.

Die moderne VB NET Webbrowser Alternative

Im nächsten Schritt kommen wir in diesem Tutorial an eine mögliche, moderne Alternative. Ich spreche hier wie im Bild schon angepriesen von dem tollen „CefSharp-Browser“. Dieser bringt uns alle modernen Funktionalitäten eines Browsers in unsere VB NET oder C# Anwendung.

Der CefSharp-Webbrowser funktioniert übrigens sowohl bei Winforms– als auch bei WPF-Anwendungen. Daher braucht man sich dort im Gegensatz zu eventuellen anderen Bibliotheken keine Sorgen machen – yay! Die Installation erfolgt – wie Du gleich sehen wirst – wirklich denkbar einfach.

Installation des neuen Webbrowsers

Starten wir nun mit der Installation der VB NET Webbrowser Alternative von CefSharp. Dazu gehen wir in Visual Studio hin und öffnen den NuGet-Paketmanager. Er ist sozusagen das Standard-Instrument zur Verwaltung von Paketen in Visual Studio.

Das kannst Du natürlich entweder über das Menü oben rechts, oder über einen passenden Hotkey erledigen. Wenn Du eine grafische Unterstützung benötigst, oder bevorzugst, empfehle ich Dir den Paketmanager.

Alternativ können Pakete auch über die im Bild zu sehende „Paket-Manager-Konsole“ installiert werden, allerdings ohne GUI. Dort verwendet man dann tatsächlich eine Art „cmd“, also eine Konsole.

Zum Öffnen über das Menü, findest Du den Menüpunkt hier:

Danach öffnet sich das gleich folgende Fenster, wo wir die Installation dann durchführen. Klicke im Fenster oben links auf den Reiter „Durchsuchen„, wodurch Du zu installierende Pakete finden kannst:

Wähle dann das passende Paket für deine Anwendung aus, sprich Winforms, oder WPF. Beachte hier auch ebenso, ob Du eine „Net Core„-Anwendung erstellt hast, dann brauchst Du eventuell die anderen Pakete.

Danach kannst Du rechts außen noch das Projekt bestimmen, wo das Paket hinzugefügt werden soll. Zum Schluss kannst Du „installieren“ klicken und musst ggf. einige Sekündchen warten.

Falls Du doch die Installation via Konsole bevorzugst, kannst Du diese beiden Befehle ausführen:

Install-Package CefSharp.Common

Dann brauchst Du noch die Winforms, bzw. WPF spezifische Installation:

Install-Package CefSharp.WinForms
Install-Package CefSharp.Wpf

Beachte hierbei auch unter Umständen die „NETCore-Variante„, die Pakete gibt es jeweils auch für NETCore. Schaue dafür einfach im Paket-Manager nach, wenn Du nach „CefSharp“ suchst.

Achtung: Bei meiner Installation für das Beispielprojekt hatte ich einige Probleme. Daher mein Tipp: Wenn Du den momentanen Projekt-Standard „.NET Core 3.1“ verwendest, installiere das „Common.NetCore„-Paket zuerst. Anschließend dann das Paket für deine jeweilige „Plattform„, also Winforms, oder WPF. Falls Du dennoch Probleme haben solltest, lade Dir am besten das Beispielprojekt unten herunter.

Einrichtung des neuen Webbrowser Controls

Im nächsten Step werden wir das Webbrowser-Control von CefSharp einrichten, bzw. vorbereiten. Dazu gehört einerseits, dass es auf der Form erscheint und andererseits z. B. der Session-Cache.

Um den Chromium-Webbrowser nun auf die Form zu bekommen, gehen wir wie folgt vor:

• Wir definieren eine Eigenschaft, o. Ä. innerhalb der Form-Klasse
• Wir instanziieren diese Eigenschaft
• Danach setzen wir eventuelle Einstellungen
• Und fügen den Browser der Form hinzu

Füge der Form-Klasse also nun eine neue Eigenschaft (oder Feld) vom Typ „ChromiumWebBrowser“ hinzu:

Imports CefSharp.WinForms

Public Class Form1

    Public Property Wb As ChromiumWebBrowser

End Class

Vergiss nicht, den dafür notwendigen Import oben hinzuzufügen, sonst wirst Du einen Fehler bekommen.

Erstelle anschließend eine kleine asynchrone Funktion, Welche uns die Konfiguration des Browsers abnimmt:

Private Async Function PrepareBrowserAsync() As Task
    ' ...
End Function

Diese Funktion rufen wir dann einfach im „Load„-Ereignis auf – keine Sorge, ich erkläre alles Notwendige sofort.

Private Async Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    Await PrepareBrowserAsync()
End Sub

Inhalte der Hilfs-Methode

Im ersten Schritt dieser Methode werden wir uns um den Cache des Browsers kümmern. Das machen wir, damit eventuelle Popups a la „Bitte Cookies bestätigen blabla“ nicht jedes Mal beim Start kommen. Je nach Anforderungen deinerseits, kannst Du es natürlich auslassen.

Zuerst müssen wir dafür erstmal sicherstellen, dass das notwendige Verzeichnis für den Cache existiert:

Dim cachePath = IO.Path.Combine(Environment.CurrentDirectory, "cache")
If Not IO.Directory.Exists(cachePath) Then
    IO.Directory.CreateDirectory(cachePath)
End If

Danach legen wir Einstellungen für die „Cef-Umgebung“ fest, Welche durch eine statische Methode geladen werden. Wir aktivieren die Session-Cookies und legen den Pfad für den Cache fest:

Dim settings = New CefSettings() With {
    .PersistSessionCookies = True,
    .CachePath = cachePath
}
Cef.Initialize(settings)

Zuletzt instanziieren wir die vorher definierte „Wb„-Eigenschaft und fügen die Browser-Instanz einem Panel auf der Form hinzu.

Wart‘ mal ne Sekunde..

Danach lasse ich die Funktion nochmal eine halbe Sekunde asynchron warten. Das musste ich in meinem Beispiel machen, damit das Laden der anschließenden Adresse funktionierte.

Hier gibt es vermutlich noch bessere Alternativen, aber ich denke das passt hier an der Stelle. Du kannst ja mal probieren, das Warten wegzulassen, falls Du nicht direkt nach dem Start des Programmes eine Adresse lädst. Melde Dich dann gerne in der Kommentar-Sektion!

Wb = New ChromiumWebBrowser("") With {
    .Dock = DockStyle.Fill
}
pnlWebbrowserContainer.Controls.Add(Wb)
Await Task.Delay(500)

Die komplette Hilfs-Funktion

Private Async Function PrepareBrowserAsync() As Task
    Dim cachePath = IO.Path.Combine(Environment.CurrentDirectory, "cache")
    If Not IO.Directory.Exists(cachePath) Then
        IO.Directory.CreateDirectory(cachePath)
    End If
    Dim settings = New CefSettings() With {
        .PersistSessionCookies = True,
        .CachePath = cachePath
    }
    Cef.Initialize(settings)
    Wb = New ChromiumWebBrowser("") With {
        .Dock = DockStyle.Fill
    }
    Await Task.Delay(500)
    pnlWebbrowserContainer.Controls.Add(Wb)
End Function

Das Ganze sauber schließen

Zum Schluss könnte man noch im „FormClosing„-Ereignis die – ich nenne Sie mal – „Cef-Engine“ sauber schließen. Dafür rufst Du einfach die statische „Shutdown„-Methode der Cef-Klasse auf.

Private Sub Form1_FormClosing(sender As Object, e As FormClosingEventArgs) Handles Me.FormClosing
    Cef.Shutdown()
End Sub

Basis-Funktionalitäten der VB NET Webbrowser Alternative

Nachdem wir nun den CefSharp ChromiumWebBrowser aufgesetzt haben, können wir uns nun an die Funktionalität machen. Die einfachste Funktionalität, die man jetzt vermutlich sehen möchte ist: Wie rufe ich eine URL auf!? Wir werden uns gleich außerdem anschauen, wie man verschiedene JavaScript-Scripts ausführen kann.

Eine URL aufrufen

Die erste und wohl bekannteste Aufgabe eines Browsers ist vermutlich das Aufrufen einer Webadresse. Wir schauen uns also diese Grundfunktionalität als allererstes an. Der ChromiumWebBrowser verwendet statt der vom normalen Webbrowser bekannten „Navigate„-Methode eine Andere.

Beim CefShap-Browser handelt es sich dabei um diese Methoden hier:

• LoadUrl
• LoadUrlAsync
• LoadUrlWithPostData

Wenn wir nun also eine URL laden wollen, kann das wie gleich folgend aussehen. Beachte hier noch meine Hinweise bezüglich der „PrepareBrowserAsync„-Methode oben.

Private Async Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    Await PrepareBrowserAsync()
    Await Wb.LoadUrlAsync("https://google.de")
End Sub

JavaScript-Code ausführen

Die nächst wichtigste Funktionalität wird das Ausführen von JavaScript-Code innerhalb des Browsers sein. Statt wie im alten Webbrowser-Control irgendwelche Elemente zu „injecten„, können wir die Scripts hier einfach direkt ausführen. Dazu verwende ich zum Beispiel die „EvaluateScriptAsync„-Funktion regelmäßig.

Wenn Du genauere Details haben möchtest, solltest Du die Dokumentation aufsuchen.

Grundsätzlich gibt es dort 2 wichtige Überladungen:

• der Aufruf mit dem „Methoden-Namen“ und den Parametern
• und ein Aufruf des Scripts an sich

Einen Klick auf einen Button simulieren

Führen wir im nächsten Schritt einfach mal einen Code aus, Welcher einen „Button-Click“ simuliert:

Await Wb.EvaluateScriptAsync("document.querySelector('#theButtonId').click();")

Um Informationen über die Ausführung dieses Codes zu bekommen, können wir den Rückgabewert nutzen.

Dim response = Await Wb.EvaluateScriptAsync("document.querySelector('#theButtonId').click();")

Danach können wir prüfen, ob alles in Ordnung gelaufen ist:

If response.Success Then
  ' ...
End If

Anschließend können wir an die eventuell zurückgegebenen Daten kommen. Es könnte ja zum Beispiel sein, dass wir geprüft haben, ob ein gewisses Element existiert:

Dim response = Await Wb.EvaluateScriptAsync("(function () { return document.querySelector('#theId') !== null; })();")
If Not response.Success Then
  ' early return..
  Return
End If
Dim elementExists = response.ToString().ToLower() = "true"

Dazu habe ich hier eine „Self-Executing-Function“ in JavaScript gebaut, Welche dann „true“ oder „false“ zurückgibt. In der letzten Zeile haben wir dann die Rückgabe getestet.

Warten bis ein Element vorhanden ist

Ich denke im nächsten Schritt, können wir eines der vorherigen Beispiele ein wenig erweitern. Wir haben zwar im letzten Beispiel prüfen können, ob ein gewisses Element existiert, aber.. Leider konnten wir nicht aktiv warten, bis das Element dann tatsächlich vorhanden ist.

Dies wird allerdings – zumindest aus meiner Erfahrung heraus – ein sehr wichtiger Bestandteil vieler webbrowser-basierter Anwendungen sein. Möchten wir beispielsweise ein Formular ausfüllen, müssen wir natürlich warten, bis Dieses sichtbar ist. Das wirst Du auch weiter unten im Autologin-Beispiel verwenden können.

Eine mögliche Vorgehensweise dafür, kannst Du Dir in der gleich folgenden Funktion ansehen. Eventuell möchtest Du die Funktion ja auch als Erweiterung definieren, je nachdem wie es Dir besser passt.

Die Funktion und Erklärungen

Hier aber erst einmal die Funktion und vorerst die Erklärungen zu den einzelnen Anweisungen. Zuerst initialisieren wir eine Variable namens „timeoutReached„, mit dem „booleschen False“. Somit bekommt die Variable auch über Typinferenz dessen Datentyp (also Boolean).

Danach merken wir uns in „started“, wann unser Such-Durchlauf gestartet wurde. Das wird gleich noch für eine Timeout-Funktionalität relevant. Ebenso benötigen wir eine Variable, um das Ergebnis der Javascript-Ausführung zwischen zu speichern. Anschließend kommt noch die Variable, um das notwendige Javascript-Skript zu speichern.

Dort ergänzen wir die Funktionalität der „document.querySelector„-Funktion um den dynamischen Parameter „selector“. Das machen wir, damit unsere VB-Funktion dynamisch auf ein Element via CSS-Selektor warten kann.

Die Schleife zur Prüfung

Nun kommt die „Do“-Schleife, Welche im Endeffekt immer wieder diese Punkte hier durcharbeitet:

• hole das Ergebnis des Skripts aus dem Browser
• wenn die Rückgabe der „EvaluateScriptAsync“-Funktion „.Success“ auf „True“ ist und „.Result“ nicht „Nothing“ ist..
• dann verarbeite die Ausgabe von JavaScript und falls diese „True“ ergibt, gebe selbst „True“ zurück, da das Element gefunden wurde
• andernfalls ginge der Schleifendurchlauf weiter, wo das Timeout geprüft wird
• und gewartet wird – falls dann am Ende das Timeout erreicht wird, verlassen wir mit „False„
• Dieser Schritt wird dementsprechend übersprungen, wenn das Timeout auf „kleiner gleich“ 0 eingestellt wird.

    Private Async Function WaitForElementAsync(selector As String, Optional timeout As Integer = 4000, Optional waitInterval As Integer = 500) As Task(Of Boolean)
        Dim timeoutReached = False
        Dim started = Date.Now
        Dim result As JavascriptResponse
        Dim checkElementScript = "
            (function () {
                var element = document.querySelector('" & selector & "');
                return element !== null;
            })();"
        Do
            result = Await Wb.EvaluateScriptAsync(checkElementScript)
            If result.Success AndAlso result.Result IsNot Nothing Then
                dim jsResultText = result.Result.ToString()
                Dim elementFound = Boolean.Parse(jsResultText)
                If elementFound Then Return True
            End If
            If timeout > 0 Then
                timeoutReached = (Date.Now - started).TotalMilliseconds >= timeout
            End If
            Await Task.Delay(waitInterval)
        Loop While Not timeoutReached
        Return False
    End Function

Einen kleinen Autologin umsetzen

Nachdem ich nun seit einiger Zeit auf diesen Blogpost zurückblicke, dachte ich mir: „Da muss noch was rein“. Schon allein aus dem Grund, dass das Webbrowser hier und da halt immer mal wieder zum Einsatz kommt.

Grundsätzlich denkt man dann meiner Erfahrung nach früher oder später über die Automation gewisser Prozesse nach. Ich meine wer hat schon Lust alles im Sinne der „Monkey–Work“ selbst zu machen. Unsere Zeit ist schließlich kostbar und als Entwickler sind wir ja meist „faul“ – eher innovativ/kreativ.

Daher dachte ich mir, ich mache mal einen kleinen Autologin, also eine durch Programm-Code durchgeführte Anmeldung als Beispiel. Der Browser soll also eine gewisse Webseite öffnen und dann eine automatisierte Anmeldung durchführen. Zum Glück ist das mit unserer VB NET Webbrowser Alternative überhaupt nicht schwer!

Oben habe ich ja auch schon ein wenig gezeigt, davon können wir dann noch nochmal Gebrauch machen. Ganz speziell ist natürlich jetzt JavaScript am Zug, da wir hiermit die clientseitigen Aspekte manipulieren können. Dabei spreche ich von den Eingabefeldern einer Form und z. B. das Abschicken des Login-Formulars.

Die Eingabefelder müssen mit unseren Anmeldedaten befüllt und der „Anmelde“-Knopf geklickt werden. Danach geht der Web-Flow seinen üblichen Weg, also die Form wird dadurch an den Server geschickt und verarbeitet.

Dazu werde ich hier auch zwei wirklich einfache PHP-Scripts bereitstellen. Diese kannst Du dann auf Deinen Webspace hochladen, oder mit einem lokalen Webserver in Eigenregie testen. Beachte, dass ich die Skripte nach der Erledigung des Tutorials wieder von meinem Webspace lösche. Es könnte also sein, dass eventuelle URLs nicht mehr aufrufbar sind.

Die PHP-Skripte für die Server-Seite

Bevor wir uns nun an die Ausführung von irgendwelchem Visual Basic NET Code machen, müssen wir erstmal die Server-Seite abhaken. Ansonsten hätten wir keine Möglichkeit das Ganze – meiner Meinung nach –sinnig zu testen. Dafür verwenden wir wie bereits angekündigt 2 simple PHP-Skripte:

• login.php – Die Login-Seite
• index.php – Der „geschützte“ Bereich

Das „login.php“-Skript zur Anmeldung

Kümmern wir uns im ersten Schritt der serverseitigen Programmierung um das Login-Skript selbst. Im Endeffekt haben wir einen HTML5 Standard-Aufbau, mit ein wenig PHP und Styling-Informationen via CSS.

Eigentlich relativ überflüssig zu erwähnen – vermutlich jedenfalls – aber dennoch: Bedenke bitte, dass es sich hierbei um Beispiel-Code speziell für die Demo handelt. Gehe bitte nicht hin und speichere irgendwelche Zugangsdaten hardcoded in produktiven Skripten.

<?php
session_start();

$loggedIn = isset($_SESSION['loggedin']);
$loggedOut = false;
if (isset($_GET['logout']) && $loggedIn) {
  unset($_SESSION['loggedin']);
  $loggedOut = true;
}

if ($loggedIn) {
  header('Location: index.php');
  die();
}

$loginAttempted = isset($_POST['login']);
// ONLY FOR THE DEMO!!!
$user = 'benutzer';
$password = 'passwort';
if ($loginAttempted) {
  $correctUser = isset($_POST['user']) && $_POST['user'] === $user;
  $correctPassword = isset($_POST['password']) && $_POST['password'] === $password;
  $loginSuccessful = $correctUser && $correctPassword;
  if ($loginSuccessful) {
    $_SESSION['loggedin'] = true;
    header('Location: index.php');
    die();
  }
}
?>

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Auto-Login Beispiel | VB.NET Cefsharp</title>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #frmLogin {
      display: flex;
      flex-direction: column;
    }

    input {
      background: white;
      margin-bottom: 0.5em;
    }

    input[type="submit"] {
      cursor: pointer;
    }
  </style>
</head>

<body>

  <form id="frmLogin" method="POST" action="">
    <input name="user">
    <input type="password" name="password">
    <input type="submit" name="login" value="Anmelden">

    <?php
    if ($loginAttempted && !$loginSuccessful) {
      ?>
      <hr>
      <p>Login fehlgeschlagen :(</p>
      <?php
    }
    ?>
  </form>

</body>

</html>

Erklärung zum Login-Skript

Nun versuche ich einmal relativ kurz und bündig die einzelnen Bestandteile zu erklären. Diese bestehen wie erwähnt aus einem PHP-Teil, einem Styling-Abschnitt und dem mehr oder weniger dynamisch generierten „Body“.

Zuerst müssen wir wie immer wenn wir mit PHP-Sitzungen arbeiten wollen, die „session_start„-Methode verwenden. Anschließend haben wir dann den Zugriff auf die globale „$_SESSION„-Variable. Somit können wir beispielsweise den „ich bin eingeloggt“-Status speichern und überprüfen.

Der erste Block sorgt dafür, dass wir bei entsprechender GET-Anfrage an der Server einen Logout durchführen. Somit können wir uns nicht nur ein- sondern auch ausloggen. Den Status darüber geben wir dann an die PHP-Sitzung weiter.

Anschließend legen wir ein paar Nutzerdaten hardcoded fest (beachte den Hinweis oben – bitte nicht in Produktiv-Systemen..). Diese werden dann überprüft und bei Erfolg gespeichert. Natürlich können wir dann in diesem Schritt auch sofort zum geschützten Bereich umleiten.

Um das Ganze jetzt nicht noch in einen CSS-Kurs ausarten zu lassen, würde ich das jetzt erstmal so stehen lassen. Letztendlich sorge ich z. B. dafür, dass das Formular n bissl mittig dargestellt wird. Dann bekommen die Inputs noch eine Hintergrundfarbe und der Button einen anderen Cursor.

Im „Body“ des HTML-Dokuments bauen wir dann ein relativ billiges Login-Formular. Falls eine fehlgeschlagene Anmeldung stattgefunden hat, geben wir hier noch eine entsprechende Information aus.

Der geschützte Bereich – index.php

Nach dem Login erstellen wir nun den geschützten Bereich, Welcher hier erstmal nur eine simple Meldung darstellt. Zusätzlich haben wir analog zum Code oben die Möglichkeit, einen Logout durchzuführen.

Hier ist das kleinere „index.php“-Skript:

<?php
session_start();

$notLoggedIn = !isset($_SESSION['loggedin']);
if ($notLoggedIn) {
  header('Location: login.php');
  die();
}

?>

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Yay, Du bist eingeloggt | VB.NET Cefsharp</title>
</head>
<body>
  <h1>Yay eingeloggt..</h1>
  <a href="login.php?logout">ausloggen..</a>
</body>
</html>

Ähnlich zum oben geschriebenen Code benutzen wir auch hier die „session_start“-Methode. Danach können wir mit den Sitzungsdaten prüfen, ob wir eingeloggt sind. Wenn dem nicht so ist, schmeißen wir den jeweiligen Nutzer an dieser Stelle raus und leiten ihn zum Login-Skript um.

Final kommt dann die letztliche minimale Ausgabe im „Body“, um etwas sehen zu können.

Die Visual Basic Seite des Autologins

Im nächsten Schritt kommen wir zur VB NET basierten Seite des Autologins. Wir müssen kurzum dafür sorgen, dass der Browser zuerst unsere URL öffnet. Die Umleitung zur jeweiligen Seite passiert ja auch schon mehr oder weniger automatisch. Dennoch nehmen wir die Login-URL als Start-URL.

Ändere den Form-Load-Ereignishandler daher so ab:

Private Async Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    Await PrepareBrowserAsync()
    Await Wb.LoadUrlAsync("https://robbelroot.de/wbloginbeispiel/login.php")
    Await WaitForElementAsync("#frmLogin")
    ' MessageBox.Show("Die Login-Form ist da!")
    Await AutologinAsync()
End Sub

Wir sagen hier, dass wir gerne die jeweilige URL öffnen möchten. Beachte wie gesagt, dass ich Diese nach Veröffentlichung des Beitrags „deaktivieren“ werde. Danach warten wir auf das HTML-Element mit der Id „frmLogin„. Zuletzt geben wir dann eine Meldung aus.

Probiere doch einfach mal aus, im Login-Skript nach der „session_start„-Methode ein „sleep(2)“ einzuführen. Damit kannst Du das PHP-Skript 2 Sekunden warten lassen. Dadurch zeigt sich die „WaitForElementAsync„-Funktion noch einmal in Ihrer vollen Gänze.

Danach beschäftigen wir uns mit der automatischen Anmeldung auf einer Webseite via VB NET selbst. Lösche also gerne wieder die „MessageBox“ von oben heraus und ersetze dies durch z. B. eine „AutologinAsync()“-Funktion.

Diese Funktion werden wir natürlich im nächsten Schritt erstellen. Ich habe hier übrigens Warte–Anweisungen eingeführt, damit wir überhaupt etwas mitbekommen. Diese Anweisungen kannst Du natürlich dann rauswerfen.

Das Skript selbst macht letztendlich nichts Anderes, als die verschiedenen Elemente durch normale Selektoren anzuwählen. Danach setzen wir die Werte der Eingabefelder und simulieren zum Schluss einen Klick auf den Login-Button.

    Private Async Function AutologinAsync() As Task
        ' ONLY FOR THE DEMO!!
        Dim user = "benutzer"
        Dim password = "passwort"
        Await Wb.EvaluateScriptAsync($"document.querySelector('input[name=""user""]').value = '{user}'")
        Await Task.Delay(1000)
        Await Wb.EvaluateScriptAsync($"document.querySelector('input[name=""password""]').value = '{password}'")
        Await Task.Delay(1000)
        Await Wb.EvaluateScriptAsync($"document.querySelector('input[name=""login""]').click()")
    End Function

Fazit – VB NET Webbrowser Alternative

In Vergangenheit war der Umgang mit dem Webbrowser Control teilweise ein Graus. Aus verschiedenen Gründen, hat er unseren Entwickler-Alltag erschwert. An sich war der Browser natürlich eine tolle Integrations-Möglichkeit, allerdings mit „Macken“.

Dabei spreche ich von diversen Fehlern, Styling-Probleme und fehlende einfache JavaScript Verwendung. Diese machen es nicht nur den Nutzern selbst schwer, sondern nerven uns auch als Entwickler ungemein.

Im heutigen Beitrag habe ich Dir daher gezeigt, wie Du die moderne Alternative namens Cefsharp installieren kannst. Diese für NET–Entwickler erstellte Chromium–Portierung bietet uns eine moderne Alternative zum alten Webbrowser-Control.

Neben Standard-Funktionen, wie z. B. das Aufrufen einer URL, haben wir uns auch noch mit der Ausführung von JavaScript beschäftigt. Im letzten Abschnitt des Beitrages haben wir uns dann sogar noch eine automatisierte Anmeldung angeschaut.

Downloads

Weiterführende Links

• VB NET Webbrowser Beispiel
• Webbrowser Elemente anhand Klasse finden
• Timer Beispiel in VB.NET

Der Beitrag 🌐 VB NET Webbrowser Alternative erschien zuerst auf Robert Skibbe.

VB.NET Webbrowser Get element by Class

Du möchtest im Webbrowser Control an ein gewisses Element anhand der Klasse kommen und der Suchbegriff „VB.NET Webbrowser Get element by Class“ führte Dich her?

Dann bist Du hier richtig, denn in diesem Beitrag zeige ich Dir unter anderem, wie Du mit Hilfe der Webbrowser–Control–Methoden an ein Element mit einem Klassen–Namen kommst.

Falls Du allerdings auf der Suche nach einem einfachen VB.NET Webbrowser-Control Beispiel bist, kannst Du in meinen Beitrag dazu nachlesen.

Noch einen Schritt einfacher, hast Du es mit meinem Beitrag über das öffnen einer Webseite in „VB.NET Webseite öffnen„.

Element anhand Id bekommen

Wer schonmal detaillierter mit dem Webbrowser-Control gearbeitet hat, wird sicherlich schon Bekanntschaft mit der getElementById-Funktion der Document-Eigenschaft gemacht haben.

Die getElementById–Funktion wird ähnlich der von uns hier benötigten Funktion aufgerufen und gehört zu den essentiellen Webbrowser-Hilfsmitteln, daher zeige ich Sie hier noch einmal.

Um mit dessen Hilfe an ein Element via Id zu kommen, sieht ein Aufruf zum Beispiel wie folgt aus:

Dim theElement = wb.getElementById("<theId>")

Fehler unterbinden

Fehler vermeiden – VB.NET Webbrowser Get element by Class

Um ggf. besser mit dem Webbrowser arbeiten zu können, empfiehlt es sich eventuell, die ScriptErrorsSuppressed-Eigenschaft auf True zu stellen.

Damit werden wie der Name schon sagt, diverse Skriptfehler unterdrückt und gewähren somit einen flüssigeren, bzw. besseren Ablauf.

Wer sich ggf. bei der Arbeit gewisse Abläufe, oder Fehler nicht erklären kann, sollte die Eigenschaft auch testweise wieder deaktivieren, um zu schauen, ob es eventuell einen relevanten Fehler gibt.

GetElementsByClass – eigene Erweiterungen

Hier stelle ich zwei Erweiterungsmethoden für das WebBrowser-Document vor, um leichter an Elemente via Klassennamen zu kommen.

GetElementByClass

Die erste der beiden Funktionen greift auf die zweite Funktion zu, um dessen erstes Ergebnis oder Nothing zu liefern.

Sie liefert also entweder das erste Element mit diesem Klassennamen, oder eben Nothing, wenn nichts gefunden wurde.

GetElementsByClass

Diese Funktion iteriert alle Html-Elemente des Dokuments und ruft das className-Attribut des Elements ab.

Vorher gehe ich noch hin und kille den führenden Punkt, falls einer beim Aufruf der Funktion – wie bei Klassennamen üblich – übergeben wurde.

Leider heißt das so, obwohl man aus dem Web halt an das Attribut „class“ gewöhnt ist.

Nachdem wir die Klassennamen als String noch mit Trim von führenden und nachstehenden Leerzeichen gesäubert haben, können wir die Klassen durch Split in eine Auflistung packen.

Wenn diese Auflistung dann unsere übergebene Klasse beinhaltet, dann handelt es sich bei dem Element um ein Element unserer Begierde und wird letztendlich der elements-Variable für die Rückgabe hinzugefügt.

Imports System.Runtime.CompilerServices

Module modBrowserExtensions

    <Extension>
    Public Function GetElementByClass(doc As HtmlDocument, cls As String) As HtmlElement
        Dim elements = GetElementsByClass(doc, cls)
        Return elements.FirstOrDefault()
    End Function

    <Extension>
    Public Function GetElementsByClass(doc As HtmlDocument, cls As String) As List(Of HtmlElement)
        If cls.StartsWith(".") Then
            cls = cls.Substring(1)
        End If
        Dim elements = New List(Of HtmlElement)
        For Each element As HtmlElement In doc.All
            Dim className = element.GetAttribute("className").Trim()
            Dim classNames = className.Split(" ")
            If classNames.Contains(cls) Then
                elements.Add(element)
            End If
        Next
        Return elements
    End Function

End Module

Code – VB.NET Webbrowser Get element by Class

So nun kommen wir zum Code des heutigen Beitrages, wo wir schauen, wie man an ein Element im Webbrowser-Document mit Hilfe des Klassennamen kommen kann (VB.NET Webbrowser Get element by Class).

Vorbereitung

Styling

Auch in diesem Beitrag werde ich dem Webbrowser den Namen „wb“ geben, da es schließlich unser einziges Webbrowser-Control sein wird.

Ansonsten sollten wir natürlich immer auf einen prägnanten Namen für Controls achten!

Als nächstes habe ich die Dock-Eigenschaft auf None gestellt, damit der Webbrowser nicht den gesamten Platz einnimmt und wir noch Platz für eventuelle andere Steuerelemente haben.

Wie oben vorgestellt, stelle ich auch die ScriptErrorsSuppressed-Eigenschaft auf True.

Die Form, bzw. dessen Startposition habe ich wie fast immer auf „CenterScreen“ gestellt, da es besonders auf großen Bildschirmen nervig ist (bei mir 50″ Curved..), wenn das Fenster jedes Mal oben links in der letzten Ecke hängt..

Controls

TextBox – tbUrl

Mit dieser TextBox kannst Du eine URL eingeben und anschließend dorthin navigieren.

Ich wollte die URL nicht hardcoden, da sich die Ziel-Seite nach Erstellung meines Beitrages ggf. ändert und deshalb nicht mehr funktioniert.

Button – btnGo

Mit diesem Button kann zur angegebenen URL navigiert werden.

WebBrowser – wb

Der Browser mit dem wir alles in diesem Beitrag ausprobieren.

TextBox – tbClassName

In dieser TextBox kannst Du einen Klassennamen (mit oder ohne Punkt) eingeben und somit nach dem jeweiligen Element suchen.

Anschließend wird dessen „InnerText“ abgegriffen und in der dafür vorgesehenen TextBox angezeigt.

Button – btnGetElementsInnerText

Mit diesem Button wird die Suche nach dem Element via Klassenname ausgelöst und dessen InnerText in die rechte TextBox ausgegeben.

TextBox – tbInnerText

Hier wird der ausgelesene InnerText des Html-Elements ausgegeben und angezeigt.

Die TextBox ist bewusst auf ReadOnly gestellt, damit man dort nicht rumpfuschen kann.

Zur URL navigieren

Via Button

Mit diesem Button navigieren wir zur Ziel-Seite, nachdem wir vorher die URL aus der TextBox mit der Trim-Funktion abgegriffen haben.

Private Sub btnGo_Click(sender As Object, e As EventArgs) Handles btnGo.Click
    Dim url = tbUrl.Text.Trim()
    wb.Navigate(url)
End Sub

Via Enter

Um via Enter zur jeweiligen Seite zu navigieren, fügen wir folgenden Code ein:

Private Sub tbUrl_KeyDown(sender As Object, e As KeyEventArgs) Handles tbUrl.KeyDown
    If e.KeyCode = Keys.Enter Then
        Dim url = tbUrl.Text.Trim()
        wb.Navigate(url)
    End If
End Sub

Könnte man natürlich durch eine zentrale Sub lösen, um duplicated Code zu vermeiden..

Den InnerText auslesen

Um nun den InnerText auszulesen, müssen wir zuerst an das jeweilige Element mit Hilfe des Klassennamens kommen.

Leider fängt hier das große Fragezeichen an, denn das WebBrowser-Control hat dämlicherweise keine native Funktion um ein Element anhand seines Klassennamens zu bekommen.

Zum Glück haben wir aber dafür weiter oben unsere eigene Extension-Methoden gebaut!

Private Sub btnGetElementsInnerText_Click(sender As Object, e As EventArgs) Handles btnGetElementsInnerText.Click
    Dim className = tbClassName.Text.Trim()
    Dim element = wb.Document.GetElementByClass(className)
    If element IsNot Nothing Then
        tbInnerText.Text = element.InnerText
    End If
End Sub

Kompletter Code – VB.NET Webbrowser Get element by Class

Hier findest Du wie fast bei allen meiner Beiträge den kompletten Beispielcode, achte nur darauf, dass Dieser je nach Webseite eventuell nicht funktioniert (was nicht am Code direkt liegt!).

Dabei solltest Du auf die korrekten Klassennamen achten und überprüfen, ob der Klassenname sich nicht etwa bei jedem Aufruf der Seite ändert.

Public Class Form1

    Private Sub btnGo_Click(sender As Object, e As EventArgs) Handles btnGo.Click
        Dim url = tbUrl.Text.Trim()
        wb.Navigate(url)
    End Sub

    Private Sub tbUrl_KeyDown(sender As Object, e As KeyEventArgs) Handles tbUrl.KeyDown
        If e.KeyCode = Keys.Enter Then
            Dim url = tbUrl.Text.Trim()
            wb.Navigate(url)
        End If
    End Sub

    Private Sub btnGetElementsInnerText_Click(sender As Object, e As EventArgs) Handles btnGetElementsInnerText.Click
        Dim className = tbClassName.Text.Trim()
        Dim element = wb.Document.GetElementByClass(className)
        If element IsNot Nothing Then
            tbInnerText.Text = element.InnerText
        End If
    End Sub

End Class

Imports System.Runtime.CompilerServices

Module modBrowserExtensions

    <Extension>
    Public Function GetElementByClass(doc As HtmlDocument, cls As String) As HtmlElement
        Dim elements = GetElementsByClass(doc, cls)
        Return elements.FirstOrDefault()
    End Function

    <Extension>
    Public Function GetElementsByClass(doc As HtmlDocument, cls As String) As List(Of HtmlElement)
        If cls.StartsWith(".") Then
            cls = cls.Substring(1)
        End If
        Dim elements = New List(Of HtmlElement)
        For Each element As HtmlElement In doc.All
            Dim className = element.GetAttribute("className").Trim()
            Dim classNames = className.Split(" ")
            If classNames.Contains(cls) Then
                elements.Add(element)
            End If
        Next
        Return elements
    End Function

End Module

Downloads

Der Beitrag VB.NET Webbrowser Get element by Class erschien zuerst auf Robert Skibbe.

VB.NET Webbrowser Control

In diesem Beitrag zeige ich Dir wichtige Eigenschaften und Funktionalitäten des VB.NET Webbrowser Control.

Von Zeit zu Zeit könnte es vorkommen, dass Du in deinem Programm auch mal einen Webbrowser darstellen und ggf. im Detail damit arbeiten musst.

Diese Arbeit kann unter anderem sein, dass Du den Quelltext einer Seite auslesen oder die Oberfläche automatisieren möchtest, das zeige ich auch im Beitrag „VB.NET Get Element By Class„.

Falls Du z. B. nur eine Webseite ohne eigenes Steuerelement öffnen möchtest, wirst Du in meinem VB.NET Webseite öffnen Beitrag fündig.

Code

Um mit dem VB.NET Webbrowser Control zu starten, ziehen wir es einfach aus der Toolbox auf die Form und starten durch 🤓.

In meinem ersten Beispiel stelle ich die Dock-Eigenschaft des Webbrowsers auf None, damit Dieser nicht die komplette Form einnimmt und ich noch für Buttons Platz habe.

Ebenso stelle ich die Eigenschaft ScriptErrorsSuppressed auf True, ansonsten bekommt man so gut wie auf jeder Seite hunderte Errors an den Kopf geschmissen.

Zu guter Letzt stelle ich den Namen des Webbrowsers auf „wb„, um nicht jedes Mal „Webbrowser1“ schreiben zu müssen.

Da es der einzige Webbrowser der Anwendung sein wird, sehe ich hier auch keinen Grund es – wie sonst immer – passend zu benennen, denn: „Was ist hier passend!?“.

Seite öffnen

Um mit dem VB.NET Webbrowser Control gezielt, also via URL zu navigieren, bzw. Ihn mehr oder weniger navigieren zu lassen, können wir dessen Navigate-Methode verwenden.

Dafür nehme ich das Beispiel aus dem Sample-Code, wo wir analog zu den gängigen Browsern aus einer Textbox heraus navigieren:

Private Sub btnGo_Click(sender As Object, e As EventArgs) Handles btnGo.Click
    wb.Navigate("https://google.de")
End Sub

Seite bei Start laden – VB.NET Webbrowser Control

Wir können neben dem manuellen Navigieren auch schon bei Start der Form eine URL laden lassen.

Um den Browser schon bei Start eine Url laden zu lassen, setzen wir einfach im Designer die Url-Eigenschaft

Aktualisieren

Ähnlich wie in bekannten Webbrowsern, haben wir auch hier die Möglichkeit den Browser, bzw. dessen Seite mit Hilfe der Refresh-Methode zu aktualisieren.

In unserem Beispiel platziere ich den Aktualisierungs-Button – wie gängig – oben:

Private Sub btnRefresh_Click(sender As Object, e As EventArgs) Handles btnRefresh.Click
    wb.Refresh()
End Sub

Vorwärts navigieren

Der Webbrowser kann durch den Aufruf der „GoForward“-Methode vorwärts navigieren, aber um es sauber zu machen, müssen wir auch auf die passende Eigenschaft namens „CanGoForward“ achten.

Private Sub btnForward_Click(sender As Object, e As EventArgs) Handles btnForward.Click
    If wb.CanGoForward Then
        wb.GoForward()
    End If
End Sub

Rückwärts navigieren

Ähnlich wie beim navigieren nach vorn, verfahren wir auch hier, wir prüfen die „CanGoBack“-Eigenschaft und navigieren entsprechend.

Private Sub btnBack_Click(sender As Object, e As EventArgs) Handles btnBack.Click
    If wb.CanGoBack Then
        wb.GoBack()
    End If
End Sub

Scrollbalken – ScrollBarsEnabled

Man kann in dem Webbrowser-Control auch die Scrollbalken kontrollieren indem man dafür die vorgesehene Eigenschaft namens „ScrollBarsEnabled“ entsprechend auf True, oder False stellt.

Kontextmenü – IsWebBrowserContextMenuEnabled

Da Webbrowser für gewöhnlich ein eigenes Kontextmenü haben, hat sich das .NET-Team auch hier für eine Konfigurationsmöglichkeit entschieden

Es handelt sich um die IsWebBrowserContextMenuEnabled-Eigenschaft, mit dessen Hilfe wir – wie der Name schon erraten lässt – das native Kontextmenü des Browsers aktivieren, oder deaktivieren können.

Seite fixieren – AllowNavigation

In gewissen Anwendungsfällen kann es vorkommen, dass man nach dem initialen Aufruf einer Webseite nicht möchte, dass zu einer anderen Seite navigiert werden kann.

Mit der AllowNavigation–Eigenschaft können wir vermeiden, dass andere Webseiten aufgerufen werden.

Tastenkombinationen – WebBrowserShortcutsEnabled

Die WebBrowserShortcutsEnabled-Eigenschaft legt fest, ob im Browser die Tastenkombinationen, bzw. die Tastenkürzel aktiviert, oder deaktiviert sind.

Style & Engine

Moderneres VB.NET Webbrowser Control

Nach einiger Zeit die Du mit dem Webbrowser verbracht hast, wirst Du Dich vermutlich fragen, ob es nicht auch eine schönere und modernere Variante für das Steuerelement gibt.

Zum Glück kann ich dich beruhigen, ja diese neuere und tollere Variante gibt es!

So können wir einerseits die Verarbeitung von Stylesheets verbessern, die Fehler die im alten Control häufiger auftreten reduzieren und vor allem Performance und Support optimieren.

Wie man ein alternatives Webbrowser-Control verwendet zeige ich Dir in einem anderen Beitrag.

Dokument – VB.NET Webbrowser Control

Wer ein wenig Erfahrung mit JavaScript hat wird sich eventuell fragen, ob man auch in VB.NET an das Document des Webbrowsers rankommen kann, kurze Antwort: „Ja, kann man!“.

Um an das Document des Browsers zu kommen, muss man einfach nur die Document-Eigenschaft des Browsers verwenden und kann dann einige gewohnte Funktionen wie getElementById() aus JavaScript verwenden.

Diese Funktionen sind insbesondere für die Automation des VB.NET Webbrowser Controls von Vorteil und können Dir so auf verschiedene Arten und Weisen einen Vorteil verschaffen z. B. für einen Login o. Ä.

Kompletter Code – VB.NET Webbrowser Control

Public Class Form1

    Private Sub btnRefresh_Click(sender As Object, e As EventArgs) Handles btnRefresh.Click
        wb.Refresh()
    End Sub

    Private Sub btnGo_Click(sender As Object, e As EventArgs) Handles btnGo.Click
        wb.Navigate(tbUrl.Text)
    End Sub

    Private Sub btnBack_Click(sender As Object, e As EventArgs) Handles btnBack.Click
        If wb.CanGoBack Then
            wb.GoBack()
        End If
    End Sub

    Private Sub btnForward_Click(sender As Object, e As EventArgs) Handles btnForward.Click
        If wb.CanGoForward Then
            wb.GoForward()
        End If
    End Sub

    Private Sub tbUrl_KeyDown(sender As Object, e As KeyEventArgs) Handles tbUrl.KeyDown
        If e.KeyCode = Keys.Enter Then
            wb.Navigate(tbUrl.Text)
        End If
    End Sub

End Class

Downloads

Der Beitrag VB.NET Webbrowser Control erschien zuerst auf Robert Skibbe.