Erste Schritte mit WebView2 in WinForms-Apps

  • Artikel

Dieses Tutorial hilft Ihnen dabei:

  • Richten Sie Ihre Entwicklungstools ein.
  • Verwenden Sie die Visual Studio-Projektvorlage C# Windows Forms App (.NET Framework), um ein WinForms-Projekt zu erstellen.
  • Installieren Sie das Microsoft.Web.WebView2 SDK-Paket für das WinForms-Projekt.
  • Erfahren Sie mehr über WebView2-Konzepte auf dem Weg.

Schritt 1: Optionales Klonen oder Herunterladen des WebView2Samples-Repositorys

Führen Sie eine der folgenden Aktionen aus:

  • Erstellen Sie ein neues Projekt in Visual Studio anhand der Schritte in den folgenden Abschnitten, beginnend mit einer Projektvorlage. Dadurch erhalten Sie den neuesten Code und die aktuelle Projektstruktur.

  • Klonen Sie das Repository, oder laden Sie es WebView2Samples herunter, öffnen Sie das fertige Projekt in Visual Studio, und führen Sie die Schritte in diesem Artikel aus, um das Erstellen des WinForms-Projekts zu verstehen und den hinzugefügten WebView2-Code zu verstehen. Weitere Informationen finden Sie unter Herunterladen des WebView2Samples-Repositorys unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Eine vollständige Version dieses Tutorialprojekts ist im WebView2Samples-Repositoryverzeichnis WinForms_GettingStarted verfügbar.

    • Beispielname: Win32_GettingStarted
    • Repositoryverzeichnis: Win32_GettingStarted
    • Lösungsdatei: WebView2GettingStarted.sln

Das Beispiel im Repository ist möglicherweise nicht so aktuell wie ein Projekt, das Sie mit den neuesten Visual Studio-Projektvorlagen erstellen.

Schritt 2: Installieren von Visual Studio

Microsoft Visual Studio ist erforderlich. Microsoft Visual Studio Code wird für dieses Tutorial nicht unterstützt.

  1. Wenn Visual Studio noch nicht installiert ist, öffnen Sie die Seite Microsoft Visual Studio in einem neuen Fenster oder einer neuen Registerkarte, und installieren Sie Visual Studio 2017 oder höher, z. B. Visual Studio 2022 Professional.

    Kehren Sie dann hierher zurück, und fahren Sie unten fort.

Schritt 3: Erstellen einer App mit nur einem Fenster

Beginnen Sie mit einem einfachen Desktopprojekt, das ein einzelnes Standard Fenster enthält.

  1. Öffnen Sie Visual Studio.

  2. Wählen Sie Datei>Neu>Projekt.

    Das Fenster Zuletzt geöffnet in Visual Studio wird angezeigt:

    Im öffnenden Bereich von Visual Studio wird die Karte Neues Projekt erstellen angezeigt.

  3. Klicken Sie auf der rechten Seite auf das Karte Neues Projekt erstellen. Das Visual Studio-Fenster Neues Projekt erstellen wird geöffnet.

  4. Fügen Sie im Textfeld Suchen Folgendes ein, oder beginnen Sie mit der Eingabe:

    C# Windows Forms App (.NET Framework)

    Suchergebnisse werden angezeigt, die Projekttypen auflisten.

  5. Wählen Sie die Karte C# Windows Forms App (.NET Framework) aus. Stellen Sie sicher, dass der Name mit einem C#-Symbol und dem Namen Windows Forms App (.NET Framework) übereinstimmt. Klicken Sie dann auf die Schaltfläche Weiter :

    Wählen Sie im Bereich

  6. Geben Sie im Textfeld Projektname einen Projektnamen ein. In diesem Tutorialartikel wird der Name WinForms_GettingStarted verwendet, z. B. der Verzeichnisname des Repositorys für das abgeschlossene Projekt.

  7. Geben Sie im Textfeld Speicherort einen Pfad ein, z. B. "C:\Users\username\Documents\MyWebView2Projects".

  8. Wählen Sie in der Dropdownliste Framework.NET Framework 4.7.2 oder höher aus, z. B. .NET Framework 4.8:

    Ausfüllen des Fensters

  9. Klicken Sie auf die Schaltfläche Erstellen.

    Das Visual Studio-Fenster wird geöffnet, in dem das Geplante WinForms-Projekt im Projektmappen-Explorer und ein Formular-Designer-Fenster angezeigt wird:

    Das Visual Studio-Fenster mit dem Geplanten WinForms-Projekt und einem Forms-Designer

  10. Wählen Sie Datei>Alle speichern (STRG+UMSCHALT+S) aus.

  11. Wählen Sie Debuggen>Debuggen starten (F5) aus.

    Ein leeres Formular1-Fenster wird aus dem neuen WinForms-Projekt geöffnet:

    Das leere Form1-Fenster aus dem neuen WinForms-Projekt

  12. Schließen Sie das Fenster Form1 .

Sie verfügen jetzt über ein leeres WinForms-Projekt, das ausgeführt wird. Richten Sie als Nächstes das Projekt ein, um WebView2-Inhalt hinzuzufügen.

Schritt 4: Installieren des WebView2 SDK

Für jedes WebView2-Projekt verwenden Sie den NuGet-Paket-Manager in Visual Studio, um dem Projekt das WebView2 SDK hinzuzufügen. Sie installieren das NuGet-Paket Microsoft.Web.WebView2 SDK zur Verwendung durch das aktuelle Projekt.

Verwenden Sie NuGet, um dem Projekt das WebView2 SDK wie folgt hinzuzufügen:

  1. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen (nicht auf den Projektmappennamen darüber), und wählen Sie dann NuGet-Pakete verwalten aus:

    Verwalten von NuGet-Paketen

    Der NuGet-Paket-Manager wird in Visual Studio geöffnet.

  2. Klicken Sie oben links auf die Registerkarte Durchsuchen .

  3. Deaktivieren Sie das Kontrollkästchen Vorabversion einschließen .

  4. Geben Sie in der Suchleiste WebView2 ein, und klicken Sie dann unter der Suchleiste auf Microsoft.Web.WebView2 , um es auszuwählen:

    NuGet-Paket-Manager in Visual Studio zum Installieren des Microsoft.Web.WebView2 SDK-NuGet-Pakets für das aktuelle Projekt

    Klicken Sie zum Zoomen mit der rechten Maustaste auf >Bild in neuer Registerkarte öffnen.

  5. Klicken Sie auf die Schaltfläche Installieren (oder Aktualisieren). Das Dialogfeld Vorschau der Änderungen wird geöffnet:

    Das Dialogfeld

  6. Klicken Sie auf die Schaltfläche OK .

  7. Wählen Sie Datei>Alle speichern (STRG+UMSCHALT+S) aus, um das Projekt zu speichern.

  8. Schließen Sie das Fenster NuGet-Paket-Manager.

  9. Wählen Sie Debuggen>Debuggen starten (F5) aus, um das Projekt zu erstellen und auszuführen.

    Das ausgeführte Projekt zeigt das gleiche leere Fenster wie zuvor an:

    Das leere Form1-Fenster aus dem neuen WinForms-Projekt

  10. Schließen Sie das Fenster Form1 .

Sie haben dem Projekt das WebView2 SDK hinzugefügt, dem Projekt aber noch keinen WebView2-Code hinzugefügt.

Schritt 5: Erstellen eines einzelnen WebView2-Steuerelements

Nachdem das WebView2 SDK für das WinForms-Projekt installiert wurde, fügen Sie der App wie folgt ein WebView2-Steuerelement hinzu:

Das Startprojekt verfügt bereits über ein Form1.cs Formular, aber wir fügen ein weiteres als hinzu, Form2.csum zu sehen, wie dies funktioniert.

  1. Wählen Sie Projekt>Formular hinzufügen (Windows Forms) aus.

  2. Wählen Sie im Fenster Neues Element hinzufügen auf der linken Seite Visual C#-Elemente>aus Windows Forms.

  3. Wählen Sie auf der rechten Seite Formular (Windows Forms) aus, und klicken Sie dann auf die Schaltfläche Hinzufügen:

    Das Fenster

    Das Projekt verfügt jetzt über ein zusätzliches Formular mit dem Dateinamen Form2.cs, der im formular-Designer und in Projektmappen-Explorer angezeigt wird:

    Das hinzugefügte Formular Form2.cs im formular-Designer und in Projektmappen-Explorer

  4. Klicken Sie auf den Zeichenbereich Form1 . Form2 wird nicht verwendet.

  5. Wählen Sie Toolbox anzeigen> aus.

    Hier fügen Sie webView2-spezifische Inhalte zur App hinzu:

  6. Klicken Sie in der Toolbox auf WebView2 Windows Forms Steuerelement, um die Optionen zu erweitern.

    In Visual Studio 2017 wird WebView2 standardmäßig nicht in der Toolbox angezeigt. Um die Anzeige von WebView2 in der Toolbox zu aktivieren, wählen Sie Extras>Optionen>Allgemein> aus, und legen Sie die Einstellung Toolbox automatisch aufTrue fest.

  7. Klicken sie in der Toolbox auf das WebView2-Steuerelement, oder ziehen Sie es auf die Forms Designer Canvas des Steuerelements, das Sie hinzugefügt haben, zForm2.cs. B. :

    Toolbox, die WebView2 anzeigt

  8. Ziehen Sie die Seiten des WebView2-Steuerelements, damit es fast den gesamten Zeichenbereich ausfüllt.

  9. Stellen Sie sicher, dass das neue WebView2-Steuerelement im Formular ausgewählt ist. Legen Sie im Bereich Eigenschaften im Abschnitt Entwurf die Eigenschaft (Name) auf webView fest (Kleinbuchstabe "w", Großbuchstaben "V", kein numerisches Suffix). Das Steuerelement kann zunächst einen anderen Namen haben, z. B. webView21. Verwenden Sie die Optionsschaltflächen Kategorisiert und Alphabetisch nach Bedarf, um Eigenschaften zu finden:

    Eigenschaften des WebView2-Steuerelements

  10. Legen Sie im Bereich Eigenschaften im Abschnitt Sonstiges die Source-Eigenschaft auf fest https://www.microsoft.com. Die Source-Eigenschaft legt die anfängliche URL fest, die im WebView2-Steuerelement angezeigt wird.

  11. Wählen Sie Datei>Alle speichern (STRG+UMSCHALT+S) aus, um das Projekt zu speichern.

  12. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.

    Das WebView2-Steuerelement zeigt Inhalt von https://www.microsoft.comin einem WebView2-Steuerelement im Windows Forms Formular mit dem Link Zu Standard Inhalt überspringen an, wenn Sie ALT+TAB gedrückt haben, um zum Fenster zu wechseln:

    ALT+TAB bewirkt, dass die Beispiel-App zunächst den Link

  13. Klicken Sie bei Bedarf auf den Link Zu Standard Inhalt springen.

    Das WebView2-Steuerelement zeigt Inhalt von https://www.microsoft.comin einem WebView2-Steuerelement im Windows Forms Formular an:

    Die Beispiel-App zeigt die Microsoft-Website an.

  14. Schließen Sie das Fenster Form1 .

Wenn Sie an einem hochauflösenden Monitor arbeiten, müssen Sie möglicherweise Ihre Windows Forms-App für die Unterstützung hoher DPI-Werte konfigurieren.

Schritt 6: Hinzufügen von Steuerelementen und Ändern der Größe des Prozessfensters

Fügen Sie Ihrem Windows Forms Formular aus der Toolbox weitere Steuerelemente hinzu, und verarbeiten Sie dann Ereignisse zum Ändern der Fenstergröße wie folgt.

  1. Wählen SieToolboxanzeigen> aus, oder klicken Sie auf der linken Seite auf die Registerkarte Toolbox.

  2. Klicken Sie in der Toolbox auf Allgemeine Steuerelemente.

    Fügen Sie wie folgt ein Textfeld-Steuerelement hinzu:

  3. Ziehen Sie das TextBox-Steuerelement auf den Form1.cs Formular Designer Zeichenbereich.

  4. Stellen Sie sicher, dass das TextBox-Steuerelement den Fokus hat.

  5. Ändern Sie im Bereich Eigenschaften im Abschnitt Entwurf ( Name) ( wahrscheinlich von textBox1) in addressBar.

    Fügen Sie wie folgt ein Schaltflächensteuerelement hinzu:

  6. Ziehen Sie ein Schaltflächen-Steuerelement auf den Form1.cs Formular Designer Canvas.

  7. Stellen Sie sicher, dass das Schaltflächensteuerelement den Fokus hat.

  1. Ändern Sie im Bereich Eigenschaften im Abschnitt "Darstellung " (etwa 15 Eigenschaften nach unten) die Text-Eigenschaft (wahrscheinlich von button1) in Go!

    Richten Sie das Textfeld und die vorhandene Schaltfläche wie folgt aus:

  2. Positionieren Sie das Textfeld auf der linken Seite des Formulars, vertikal ausgerichtet an der Schaltfläche, wie unten gezeigt:

    WinForms-Designer

  3. Ändern Sie die Größe des Textfelds wie gezeigt:

    Textfeld und Schaltfläche des WinForms-Designers

  4. Klicken Sie aufCodeanzeigen>, um zu öffnenForm1.cs.

    Definieren Sie Form_Resize , um die Steuerelemente wie folgt beizubehalten, wenn die Größe des App-Fensters geändert wird.

  5. Löschen Sie den folgenden Code:

       public Form1()
{
   InitializeComponent();
}

  6. Fügen Sie diesen Code an derselben Stelle ein:

    public Form1()
{
   InitializeComponent();
   this.Resize += new System.EventHandler(this.Form_Resize);
}

private void Form_Resize(object sender, EventArgs e)
{
   webView.Size = this.ClientSize - new System.Drawing.Size(webView.Location);
   goButton.Left = this.ClientSize.Width - goButton.Width;
   addressBar.Width = goButton.Left - addressBar.Left;
}

    Form_Resize Code hinzugefügt

  7. Wählen Sie Datei>Alle speichern (STRG+UMSCHALT+S) aus, um das Projekt zu speichern.

  8. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.

    Ein Formular1-Fenster wird angezeigt, in dem Webseiteninhalte aus angezeigt werden https://www.microsoft.com:

    Ein WinForm-Fenster von Form1, in dem Webseiteninhalte aus microsoft.com

    Wenn Sie ALT+TAB drücken, um zum Fenster Form1 zu wechseln, müssen Sie möglicherweise auf den Hinzugefügten Link Zu Standard Inhalt überspringen klicken.

  9. Scrollen Sie mit dem Mausrad im Fenster nach oben und unten. Die Eingabesteuerelemente bleiben an Ort und Stelle.

  10. Ziehen Sie die Ecke des Fensters, um die Größe des Fensters zu ändern. Die Breite des Textfelds ändert sich.

  11. Schließen Sie das Fenster Form1 .

Schritt 7: Navigation

Ermöglichen Sie Es Benutzern, die URL zu ändern, die vom WebView2-Steuerelement angezeigt wird, indem Sie den in das Textfeld eingegebenen Text lesen, um als Adressleiste zu dienen.

  1. Wählen SieCodeanzeigen> aus, Form1.cs damit dieser im Code-Editor geöffnet ist.

  2. Form1.csFügen Sie in den CoreWebView2 -Namespace hinzu, indem Sie den folgenden Code am Anfang der Datei als Zeile 1 einfügen:

    using Microsoft.Web.WebView2.Core;

  3. Wählen Sie die Registerkarte Form1.cs [Entwurf] aus, und doppelklicken Sie dann auf die Go! Schaltfläche. Die goButton_Click -Methode wird in der Form1.cs Datei hinzugefügt.

  4. Fügen Sie den folgenden Code in die Datei ein, um die leere goButton_Click Methode zu ersetzen, sodass der Methodentext wie folgt lautet:

    private void goButton_Click(object sender, EventArgs e)
{
   if (webView != null && webView.CoreWebView2 != null)
   {
      webView.CoreWebView2.Navigate(addressBar.Text);
   }
}

    Nun navigiert die goButton_Click Funktion im WebView2-Steuerelement zu der URL, die in das Textfeld der Adressleiste eingegeben wird.

  5. Wählen Sie Datei>Alle speichern (STRG+UMSCHALT+S) aus, um das Projekt zu speichern.

  6. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.

  7. Geben Sie in der Adressleiste eine URL ein, die mit httpsbeginnt, zhttps://www.bing.com. B. , und klicken Sie dann auf die Schaltfläche Los!

    bing.com

    Das WebView2-Steuerelement zeigt den Webseiteninhalt für die URL an.

  8. Geben Sie in der Adressleiste eine Zeichenfolge ein, die nicht mit httpbeginnt, zwww.bing.com. B. , und klicken Sie dann auf die Schaltfläche Los!

    Argument-Ausnahme aufgrund der Eingabe einer Nicht-URL

    Ein ArgumentException wird ausgelöst, wenn die URL nicht mit http:// oder https://beginnt.

  9. Wählen Sie Debuggen>Debuggen Debuggen beenden aus, oder klicken Sie auf Weiter. Das Formular1-Fenster wird geschlossen.

Schritt 8: Navigationsereignisse

Während der Webseitennavigation löst das WebView2-Steuerelement Ereignisse aus. Die App, die WebView2-Steuerelemente hostet, lauscht auf die folgenden Ereignisse:

  • NavigationStarting
  • SourceChanged
  • ContentLoading
  • HistoryChanged
  • NavigationCompleted

Weitere Informationen finden Sie unter Navigationsereignisse für WebView2-Apps.

Navigationsereignisse

Wenn ein Fehler auftritt, werden die folgenden Ereignisse ausgelöst und können von der Navigation zu einer Fehlerwebseite abhängen:

  • SourceChanged
  • ContentLoading
  • HistoryChanged

Hinweis

Wenn eine HTTP-Umleitung auftritt, gibt es mehrere NavigationStarting Ereignisse in einer Zeile.

Um die Verwendung der Ereignisse zu veranschaulichen, beginnen Sie mit der Registrierung eines Handlers, NavigationStarting der alle Anforderungen ohne HTTPS abbricht.

  1. Aktualisieren Form1.csSie in den Form1() Konstruktor so, dass er mit dem folgenden Code übereinstimmt, und fügen Sie auch die EnsureHttps(sender, args) Funktion unter dem Konstruktor wie folgt hinzu:

    public Form1()
{
   InitializeComponent();
   this.Resize += new System.EventHandler(this.Form_Resize);

   webView.NavigationStarting += EnsureHttps;
}

void EnsureHttps(object sender, CoreWebView2NavigationStartingEventArgs args)
{
   String uri = args.Uri;
   if (!uri.StartsWith("https://"))
   {
      args.Cancel = true;
   }
}

    Im Konstruktor EnsureHttps ist als Ereignishandler für das NavigationStarting Ereignis im WebView2-Steuerelement registriert.

  2. Wählen Sie Datei>Alle speichern (STRG+UMSCHALT+S) aus, um das Projekt zu speichern.

  3. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.

  4. Geben Sie in der Adressleiste eine URL ein, die mit httpsbeginnt, zhttps://www.bing.com. B. , und klicken Sie dann auf die Schaltfläche Los!

    Die HTTPS-URL wird geladen. Der Webinhalt ändert sich von der Standardeinstellung (Microsoft.com) in Bing.com.

  5. Geben Sie in der Adressleiste eine URL ein, die mit httpbeginnt, zhttp://www.microsoft.com. B. , und klicken Sie dann auf die Schaltfläche Los!

    Die HTTP-URL wird nicht geladen. die Bing.com Webseite bleibt angezeigt. Im Gegensatz dazu funktioniert die Eingabe von http://www.microsoft.com Microsoft Edge. Es wird zur https-Website umgeleitet, um Microsoft.com.

  6. Geben Sie in der Adressleiste eine URL ein, die mit httpsbeginnt, zhttps://www.microsoft.com. B. , und klicken Sie dann auf die Schaltfläche Los!

    Die HTTPS-URL wird geladen. die Microsoft.com Webseite wird nun angezeigt, da Sie die "s" nach "http" hinzugefügt haben.

Schritt 9: Skripterstellung

Sie können Host-Apps verwenden, um JavaScript-Code zur Laufzeit in WebView2-Steuerelemente einzufügen. Mit WebView2 können Sie beliebiges JavaScript ausführen oder Initialisierungsskripts hinzufügen. Das eingefügte JavaScript gilt für alle neuen Dokumente der obersten Ebene und alle untergeordneten Frames, bis das JavaScript entfernt wird. Das eingefügte JavaScript wird mit einem bestimmten Timing ausgeführt.

  • Führen Sie das eingefügte JavaScript nach der Erstellung des globalen Objekts aus.

  • Führen Sie das eingefügte JavaScript aus, bevor ein anderes im HTML-Dokument enthaltenes Skript ausgeführt wird.

Fügen Sie z. B. wie folgt ein Skript hinzu, das eine Warnung sendet, wenn ein Benutzer zu einer Nicht-HTTPS-Website navigiert:

  1. Ändern Sie die EnsureHttps -Funktion, um die folgende Zeile hinzuzufügen, die enthält ExecuteScriptAsync:

    void EnsureHttps(object sender, CoreWebView2NavigationStartingEventArgs args)
{
   String uri = args.Uri;
   if (!uri.StartsWith("https://"))
   {
      webView.CoreWebView2.ExecuteScriptAsync($"alert('{uri} is not safe, try an https link')");
      args.Cancel = true;
   }
}

    Die hinzugefügte Zeile fügt ein Skript in den Webinhalt ein, das die ExecuteScriptAsync-Methode verwendet. Das hinzugefügte Skript lautet:

    alert('{uri} is not safe, try an https link')

  2. Wählen Sie Datei>Alle speichern (STRG+UMSCHALT+S) aus, um das Projekt zu speichern.

  3. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.

  4. Versuchen Sie, zu zu http://www.bing.com wechseln (mit http anstelle des https Präfixes).

    Die App zeigt eine Warnung an:

    Eine HTTP-Warnung, die besagt, dass sie stattdessen https ausprobieren

Schritt 10: Kommunikation zwischen Host- und Webinhalten

Host- und Webinhalte können für die Kommunikation untereinander wie folgt verwendet postMessage werden:

  • Webinhalte in einem WebView2-Steuerelement können verwenden window.chrome.webview.postMessage , um eine Nachricht auf dem Host zu posten. Der Host verarbeitet die Nachricht mit allen auf dem Host registrierten WebMessageReceived Nachrichten.

  • Hostet Postnachrichten für Webinhalte in einem WebView2-Steuerelement mithilfe von CoreWebView2.PostWebMessageAsString oder CoreWebView2.PostWebMessageAsJSON. Diese Nachrichten werden von Handlern abgefangen, die zu window.chrome.webview.addEventListenerhinzugefügt wurden.

Der Kommunikationsmechanismus übergibt Nachrichten von Webinhalten mithilfe nativer Funktionen an den Host.

Wenn das WebView2-Steuerelement in Ihrem Projekt zu einer URL navigiert, zeigt es die URL in der Adressleiste an und benachrichtigt den Benutzer über die url, die im WebView2-Steuerelement angezeigt wird.

  1. Aktualisieren Sie Form1.csin den Form1() Konstruktor, und erstellen Sie darunter eine InitializeAsync() Funktion, die dem folgenden Code entspricht:

    public Form1()
{
   InitializeComponent();
   this.Resize += new System.EventHandler(this.Form_Resize);
   webView.NavigationStarting += EnsureHttps;
   InitializeAsync();
}

async void InitializeAsync()
{
   await webView.EnsureCoreWebView2Async(null);
}

    Die InitializeAsync Funktion wartet auf EnsureCoreWebView2Async, da die Initialisierung von CoreWebView2 asynchron ist.

    Registrieren Sie als Nächstes einen Ereignishandler, um auf zu WebMessageReceivedreagieren. Dieser Ereignishandler wird registriert, nachdem CoreWebView2 initialisiert wurde.

  2. Aktualisieren Form1.csInitializeAsyncSie in , und fügen Sie darunter wie folgt hinzuUpdateAddressBar:

    async void InitializeAsync()
{
   await webView.EnsureCoreWebView2Async(null);
   webView.CoreWebView2.WebMessageReceived += UpdateAddressBar;
}

void UpdateAddressBar(object sender, CoreWebView2WebMessageReceivedEventArgs args)
{
   String uri = args.TryGetWebMessageAsString();
   addressBar.Text = uri;
   webView.CoreWebView2.PostWebMessageAsString(uri);
}

    Damit WebView2 die Webnachricht sendet und darauf reagiert, fügt der Host nach CoreWebView2 der Initialisierung ein Skript in den Webinhalt ein:

    • Senden Sie die URL mithilfe von postMessagean den Host.

    • Registrieren Sie einen Ereignishandler, um eine vom Host gesendete Nachricht in einem Warnungsfeld anzuzeigen, bevor Webseiteninhalte angezeigt werden.

  3. Aktualisieren Sie Form1.csInitializeAsync in so, dass sie mit dem folgenden Code übereinstimmt:

    async void InitializeAsync()
{
   await webView.EnsureCoreWebView2Async(null);
   webView.CoreWebView2.WebMessageReceived += UpdateAddressBar;

   await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("window.chrome.webview.postMessage(window.document.URL);");
   await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("window.chrome.webview.addEventListener(\'message\', event => alert(event.data));");
}

  4. Wählen Sie Datei>Alle speichern (STRG+UMSCHALT+S) aus, um die Änderungen zu speichern.

  5. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.

  6. Geben Sie eine URL ein, z https://www.bing.com. B. :

    Die aktualisierte Url der Adressleiste wird zunächst in einem Warnungsfeld angezeigt.

    Zunächst wird eine Warnung mit der resultierenden URL angezeigt, die von der Hostwebsite gesendet wird.

  7. Klicken Sie auf die Schaltfläche OK .

    Das WebView2-Steuerelement zeigt nun die neue URL in der Adressleiste an, und Webseiteninhalte aus der URL werden im WebView2-Steuerelement im WinForms-Fenster angezeigt:

    Die Anwendung zeigt die URL in der Adressleiste an.

    • Wenn die App gestartet wird, lautet https://www.microsoft.comdie Standard-URL , und die resultierende angezeigte Adresse zeigt das Gebietsschema an, z https://www.microsoft.com/en-us/. B. .

    • Wenn Sie eingeben https://www.bing.com, ist die resultierende Adresse eine Variante, z https://www4.bing.com/?form=DCDN. B. .

Herzlichen Glückwunsch, Sie haben Ihre erste WebView2-App erstellt!

Verteilen einer WebView2-App

Wenn Sie die App, die sich aus diesem Tutorial ergibt, verteilen würden, müssten Sie die WebView2-Runtime zusammen mit Ihrer App verteilen. Die WebView2-Runtime wird dann automatisch auf Benutzercomputern installiert. Weitere Informationen finden Sie unter Verteilen Ihrer App und der WebView2-Runtime.

Siehe auch