Erste Schritte mit WebView2 in Win32-Apps

In diesem Artikel richten Sie Ihre Entwicklungstools ein (falls noch nicht geschehen), erfahren, wie Sie WebView2-Code zu einem Win32-App-Projekt hinzufügen, und erfahren unterwegs mehr über WebView2-Konzepte.

In diesem Lernprogramm wird zunächst ein vorhandenes Win32-App-Projekt geöffnet, dem WebView2-Code hinzugefügt wurde. Das Projekt verwendet das Verzeichnis Win32_GettingStarted (WebView2GettingStarted.sln), das Teil des WebView2Samples Repositorys ist. Gehen Sie wie folgt vor, um diesen Artikel zu verwenden:

1. Klonen oder laden Sie das WebView2Samples Repository auf Ihr lokales Laufwerk herunter.
2. Führen Sie das abgeschlossene Projekt aus.
3. Löschen Sie optional den WebView2-Code, HelloWebView.cpp um die Win32-Basisplan-App wiederherzustellen.
4. Führen Sie die verbleibenden Schritte in diesem Artikel zum Hinzufügen und Verstehen des WebView2-Codes aus.

In diesem Lernprogramm müssen Sie kein neues Projekt erstellen. Sie verwenden keine Projektvorlage in Visual Studio, um ein neues Projekt zu erstellen. Stattdessen beginnen Sie mit dem abgeschlossenen Projekt, das sich im Repository befindet.

Abgeschlossenes Projekt

Das abgeschlossene Lernprogrammprojekt ist im WebView2Samples-Repository verfügbar:

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

Schritt 1 : Installieren von Visual Studio

Dieses Lernprogramm erfordert Microsoft Visual Studio, nicht Microsoft Visual Studio Code.

1. Wenn Microsoft Visual Studio in einem neuen Fenster oder einer neuen Registerkarte noch nicht installiert ist, lesen Sie "Installieren von Visual Studio " unter "Einrichten Ihrer Dev-Umgebung für WebView2". Führen Sie die dort aufgeführten Schritte aus, um eine einfache Standardinstallation von Visual Studio durchzuführen.

Kehren Sie dann zu dieser Seite zurück, und fahren Sie unten fort.

Schritt 2 : Installieren eines Vorschaukanals von Microsoft Edge

1. Wenn es noch nicht installiert ist, installieren Sie einen Vorschaukanal von Microsoft Edge. Informationen hierzu finden Sie in einem neuen Fenster oder einer neuen Registerkarte unter Installieren eines Vorschaukanals von Microsoft Edge in "Einrichten Ihrer Dev-Umgebung für WebView2".

Fahren Sie dann unten fort.

Schritt 3: Klonen oder Herunterladen des WebView2Samples-Repositorys

Der Code, den Sie in den Schritten dieses Lernprogramms hinzufügen, wurde bereits dem Beispielrepopo für Sie hinzugefügt. Mit einem optionalen Schritt unten können Sie den WebView2-Code löschen HelloWebView.cpp, damit Sie ihn bei Bedarf selbst hinzufügen können.

Um dieses Lernprogramm auf WebView2-spezifische Codierung zu konzentrieren, beginnen wir mit einem vorhandenen Microsoft Visual Studio-Projekt (WebView2GettingStarted), das im WebView2Samples GitHub-Repository gespeichert ist. Wir fügen WebView2-Features hinzu – tatsächlich wurden die Features bereits hinzugefügt, aber folgen Sie den Setup- und Erklärungsschritten.

Das vorhandene Visual Studio-Projekt, mit dem wir beginnen werden, ist Teil des Beispielcodes aus einer C++-Win32-Standarddesktopanwendung. Informationen zum zugrunde liegenden, standardmäßigen Win32-App-Beispiel in einem neuen Fenster oder einer neuen Registerkarte finden Sie unter Exemplarische Vorgehensweise: Erstellen einer herkömmlichen Windows-Desktopanwendung (C++).

---

Klonen oder laden Sie das WebView2Samples-Repository wie folgt herunter:

1. Wenn noch nicht geschehen, klonen oder laden Sie das WebView2Samples Repository herunter. Führen Sie dazu in einem separaten Fenster oder einer separaten Registerkarte die Schritte im Download des WebView2Samples-Repositorys oder klonen Sie das WebView2Samples-Repository in "Einrichten Ihrer Dev-Umgebung für WebView2" aus.

Kehren Sie dann hierher zurück, nachdem Sie das Repository auf Ihr lokales Laufwerk kopiert haben, und fahren Sie mit den folgenden Schritten fort.

Schritt 4 : Öffnen der fertigen Lösung (WebView2GettingStarted.sln)

Sie beginnen mit einem einfachen Desktopprojekt, das ein einzelnes Hauptfenster enthält. Wir beginnen mit einem vorhandenen App-Projekt aus dem WebView2Samples-Repository , das Sie im vorherigen Schritt geklont oder von GitHub heruntergeladen haben.

1. Öffnen Sie Visual Studio (nicht Visual Studio Code).

2. Open WebView2GettingStarted.sln, die sich am Pfad befindet: <your repo directory>/WebView2Samples/GettingStartedGuides/Win32_GettingStarted/WebView2GettingStarted.sln.

Schritt 5 : Installieren von Workloads, wenn Sie dazu aufgefordert werden

Visual Studio-Installer werden möglicherweise geöffnet, und Sie werden aufgefordert, eine Workload zu installieren:

Wenn Visual Studio-Installer Sie zur Installation eines Workloads auffordert:

1. Wählen Sie die Desktopentwicklung mit C++- Karte aus, damit ein Häkchen angezeigt wird.

2. Wenn Sie möchten, wählen Sie auch die .NET-Desktopentwicklungskarte aus (die für dieses Lernprogramm nicht benötigt wird), damit auch auf dieser Karte ein Häkchen angezeigt wird.

3. Klicken Sie auf die Schaltfläche " Installieren ".

Das Installationsprogramm wird geschlossen.

Projekte neu anordnen

Möglicherweise wird das Dialogfeld " Projektmappenaktionen überprüfen " von Visual Studio angezeigt, in dem Sie gefragt werden, ob Sie Projekte neu anordnen möchten:

1. Wenn dieses Dialogfeld angezeigt wird, können Sie auf "OK" klicken.

Die WebView2GettingStarted-Lösung wird in Visual Studio geöffnet. Die Lösung enthält ein einzelnes Projekt: WebView2GettingStarted, das eine einzelne CPP-Datei enthält: HelloWebView.cpp.

Schritt 6 : Anzeigen des geöffneten Projekts in Visual Studio

Wenn das WebView2GettingStarted-Projekt nicht in Visual Studio geöffnet ist, öffnen Sie es in Visual Studio:

1. Open WebView2GettingStarted.sln, die sich am Pfad befindet: <your repo directory>/WebView2Samples/GettingStartedGuides/Win32_GettingStarted/WebView2GettingStarted.sln.

2. Erweitern Sie in Projektmappen-Explorer den Knoten "Quelldateien", und wählen Sie dann "HelloWebView.cpp" aus.

   HelloWebView.cpp wird im Code-Editor von Visual Studio geöffnet.

   

Der obige Screenshot zeigt webView2-Code (#include "WebView2.h"), der bereits unmittelbar nach dem Klonen (Herunterladen) des Repositorys in der Datei vorhanden ist.

Festlegen der Lösung für die Verwendung des Win10 SDK- und Visual Studio-Toolsets

Dieser Schritt ist nur für ältere Versionen von Visual Studio erforderlich, daher ist es wahrscheinlich, dass Sie ihn überspringen können. Sie können sich diese Benutzeroberfläche jedoch in jedem Fall ansehen:

1. Klicken Sie im Projektmappen-Explorer von Visual Studio mit der rechten Maustaste auf das WebView2GettingStarted-Projekt __ (nicht auf die Projektmappe mit demselben Namen), und wählen Sie dann "Eigenschaften" aus.

2. Wählen Sie "Konfigurationseigenschaften > allgemein" und dann (wenn dies nicht bereits die richtige Einstellung ist) aus:

   1. Ändern Sie die Windows SDK-Version , um das Win10 SDK zu verwenden.

   2. Ändern Sie das Plattformtoolset , um ein Visual Studio-Toolset zu verwenden.

   Diese Änderungen sind nur für ältere Benutzer erforderlich. Versionen von Visual Studio.

   Hier ist ein Screenshot von Visual Studio 2017 mit einigen gültigen Einstellungen:

   

   Es folgt ein Screenshot von Visual Studio 2022. die Werte bereits korrekt waren, sodass keine Änderung erforderlich war:

   

Fahren Sie mit den folgenden Schritten fort.

Schritt 7 : Erstellen und Ausführen des abgeschlossenen Projekts des Repositorys

An diesem Punkt ist Ihre Dev-Umgebung so eingerichtet, dass Win32 WebView2-Apps im Debugmodus in Visual Studio ausgeführt und WebView2-Features hinzugefügt werden.

---

Um zu bestätigen, dass Ihr System für WebView2-Codierung eingerichtet ist, führen Sie das Projekt im Debugmodus wie folgt aus:

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

   Die Beispiel-App öffnet zunächst ein Popupfenster, in dem die zu ladende URL zusammen mit einer Schaltfläche "OK " angezeigt wird:

   

2. Klicken Sie auf die Schaltfläche "OK ", um das Popupfenster zu schließen, und fahren Sie mit der URL fort:

   Im WebView2-Fenster werden nun Webseiteninhalte angezeigt: die Bing-Website, http://www.bing.com.

   

3. Schließen Sie das WebView-Beispielfenster .

Schritt 8 – Aktualisieren oder Installieren der Windows-Implementierungsbibliotheken (WIL)

WIL ist bereits im Projekt im Repository installiert, aber gehen Sie durch diese Schritte, um mehr über das Setup zu erfahren und das Setup des Projekts zu überprüfen.

In einem Moment installieren Sie die Windows-Implementierungsbibliotheken (WIL) – eine C++-Bibliothek, die nur kopfzeilenfähig ist, um Entwicklern unter Windows das Leben durch lesbare, typsichere C++-Schnittstellen für Windows COM-Codierungsmuster zu erleichtern. Sie installieren dieses Microsoft.Windows.ImplementationLibrary-Paket über Projektmappen-Explorer in Visual Studio für das Projekt.

In diesem Lernprogramm wird auch Windows-Runtime C++-Vorlagenbibliothek (WRL) verwendet– eine Vorlagenbibliothek, die eine allgemeine Möglichkeit zum Erstellen und Verwenden Windows-Runtime Komponenten bietet.

---

Installieren Sie die Windows-Implementierungsbibliotheken (WIL) wie folgt in Visual Studio:

1. Stellen Sie in Visual Studio sicher, dass die WebView2GettingStarted-Lösung noch geöffnet ist.

2. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Projektknoten "WebView2GettingStarted" (nicht auf den Lösungsknoten), und wählen Sie dann "NuGet-Pakete verwalten" aus.

   

3. Klicken Sie im NuGet-Fenster auf die Registerkarte "Durchsuchen ".

4. Geben Sie Microsoft.Windows.ImplementationLibraryin der Suchleiste oben links ein. Oder kopieren Sie den nachfolgenden einzeiligen Codeblock, und fügen Sie ihn ein. Wählen Sie dann "Microsoft.Windows.ImplementationLibrary" aus.

   Microsoft.Windows.ImplementationLibrary
   

   Auswählen des Pakets "Microsoft.Windows.ImplementationLibrary " im NuGet-Paket-Manager in Visual Studio:

   

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

   Wenn Microsoft.Windows.ImplementationLibrary nicht aufgeführt ist, überprüfen Sie den NuGet-Quellspeicherort wie folgt:

   1. Wählen Sie Extras > Optionen > NuGet-Paket-Manager-Paketquellen > aus.****

   2. Stellen Sie sicher, dass in Paketquellen eine nuget.com Quelle vorhanden ist, auf die verweist https://api.nuget.org/v3/index.json.

   3. Wenn Paketquellen diese Quelle nicht enthalten, geben Sie nuget.com das Textfeld "Name " und https://api.nuget.org/v3/index.json das Textfeld " Quelle " ein. Klicken Sie dann auf "Aktualisieren" und " OK".

5. Klicken Sie oben rechts auf die Schaltfläche " Installieren " (oder auf die Schaltfläche " Aktualisieren "). NuGet lädt die Windows-Implementierungsbibliothek (WIL) auf Ihren Computer herunter.

Windows-Implementierungsbibliotheken (WIL) sind jetzt zusammen mit Windows-Runtime C++-Vorlagenbibliothek (WRL) installiert.

Fahren Sie mit den folgenden Schritten fort.

Schritt 9 – Aktualisieren oder Installieren des WebView2 SDK

Für das fertige Projekt im Repository ist bereits eine Version des WebView2 SDK für das Projekt installiert. Wenn Sie ein Projekt von Grund auf neu erstellen, indem Sie mit einer Win32-Projektvorlage beginnen, müssen Sie das WebView SDK-Paket für das Projekt installieren, wie hier beschrieben.

Aktualisieren (oder installieren) Sie als Nächstes das WebView2 SDK. Das WebView2 SDK enthält das WebView2-Steuerelement, das von Microsoft Edge unterstützt wird, und ermöglicht Es Ihnen, Webtechnologien (HTML, CSS und JavaScript) in Ihre nativen Anwendungen einzubetten.

---

Aktualisieren (oder installieren) Sie das WebView2 SDK wie folgt:

1. Stellen Sie in Visual Studio sicher, dass die WebView2GettingStarted-Lösung geöffnet ist, wie oben beschrieben.

2. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Projektknoten "WebView2GettingStarted" (nicht auf den Projektmappenknoten "WebView2GettingStarted") und wählen Sie dann "NuGet-Pakete verwalten" aus.

   Die Registerkarte und der Bereich des NuGet-Paket-Managers werden in Visual Studio geöffnet.

   

3. Wenn das WebView2 SDK bereits für das Projekt installiert ist, wie dies beim Repositoryprojekt der Fall ist, klicken Sie im NuGet-Fenster auf die Registerkarte " Installiert " oder auf die Registerkarte " Aktualisieren ".

4. Wenn Sie das WebView2 SDK in einem neuen Projekt installieren, klicken Sie auf die Registerkarte "Durchsuchen ".

5. Deaktivieren Sie auf der rechten Seite der Suchleiste das Kontrollkästchen " Vorabversion einschließen " (es sei denn, Sie wissen, dass Sie eine Vorabversion des SDK wünschen).

6. Geben Sie Microsoft.Web.WebView2in der Suchleiste oben links ein. Oder kopieren Sie den nachfolgenden einzeiligen Codeblock, und fügen Sie ihn ein. Wählen Sie dann "Microsoft.Web.WebView2" aus.

   Microsoft.Web.WebView2
   

7. Klicken Sie im rechten Fenster auf "Aktualisieren " (oder " Installieren"). NuGet lädt das WebView2 SDK auf Ihren Computer herunter.

   

8. Schließen Sie die Registerkarte "NuGet-Paket-Manager ".

Das WebView2 SDK ist jetzt aktualisiert oder installiert, sodass Ihre Entwicklungsumgebung jetzt so eingerichtet ist, dass WebView2-Features zu Ihrer Win32-App hinzugefügt werden.

Fahren Sie mit den folgenden Schritten fort.

Schritt 10 – Optionales Löschen des WebView2-Codes aus HelloWebView.cpp

Wenn Sie die folgenden Schritte ausführen möchten, um den WebView2-Code HelloWebView.cpp zu sich selbst hinzuzufügen, löschen Sie die beiden Blöcke von WebView2-Code wie folgt:

1. Löschen HelloWebView.cppSie in den folgenden Code:

2. HelloWebView.cppLöschen Sie in die Codezeilen, die sich zwischen diesen beiden Kommentarzeilen befinden, behalten Sie jedoch diese beiden Kommentarzeilen bei:

   // <-- WebView2 sample code starts here -->
   ...
   // <-- WebView2 sample code ends here -->
   

Schritt 11 : Einschließen des WebView2.h-Headers in "HelloWebView.cpp"

Oben haben wir Folgendes gemacht:

• Das Beispielrepopo wurde geklont oder heruntergeladen, einschließlich eines vorhandenen Projekts, das eine C++-Standard-Windows-Desktopanwendung enthält.
• Die Windows-Implementierungsbibliothek (WIL) wurde aktualisiert oder installiert.
• Das WebView2 SDK wurde aktualisiert oder installiert, um WebView2-Features hinzuzufügen.
• Optional wurde der WebView2-Code aus HelloWebView.cppgelöscht.

---

Fügen Sie der App als Nächstes WebView2-Features wie folgt hinzu:

1. Stellen Sie in Visual Studio sicher, dass die WebView2GettingStarted-Lösung geöffnet ist.

2. Erweitern Sie in Projektmappen-Explorer die Quelldateien, und klicken Sie dann auf HelloWebView.cpp.

3. Wenn der folgende Code noch nicht vorhanden ist, fügen Sie nach der letzten #include Zeile den folgenden Code in HelloWebView.cppein:

   Stellen Sie sicher, dass der include Abschnitt wie folgt aussieht:

   ...
   #include <wrl.h>
   #include <wil/com.h>
   // include WebView2 header
   #include "WebView2.h"
   

4. Beachten Sie die verwendeten Kopfzeilen:

   • wrl.h - Windows-Runtime C++-Vorlagenbibliothek (WRL) – Eine Vorlagenbibliothek, die eine allgemeine Möglichkeit zum Erstellen und Verwenden Windows-Runtime Komponenten bietet.

   • wil/com.h – Windows-Implementierungsbibliotheken (WIL) – Eine C++-Bibliothek, die nur kopfzeilenfähig ist, um Entwicklern unter Windows das Leben durch lesbare, typsichere C++-Schnittstellen für allgemeine Windows-Codierungsmuster zu erleichtern.

   • WebView2.h – Das WebView2-Steuerelement wird von Microsoft Edge unterstützt und ermöglicht ihnen das Einbetten von Webtechnologien (HTML, CSS und JavaScript) in Ihre systemeigenen Anwendungen.

5. Wählen Sie "Alle > speichern" (Ctrl++Shift``S) aus, um das Projekt zu speichern.

Die Quellcodedatei und das Projekt können für die WebView2-API verwendet und erstellt werden.

Fahren Sie mit den folgenden Schritten fort.

Schritt 12 : Erstellen ihrer leeren Beispiel-App

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

   Die Beispiel-App wird geöffnet und zeigt ein leeres Fenster an:

   

   Sie verfügen jetzt über eine aktive, leere Win32-Desktop-App mit potenziellen WebView2-Funktionen.

2. Schließen Sie das WebView-Beispiel-App-Fenster .

Fahren Sie mit den folgenden Schritten fort.

Schritt 13 – Hinzufügen eines WebView2-Steuerelements im übergeordneten Fenster

Fügen Sie als Nächstes dem Hauptfenster ein WebView2-Steuerelement hinzu.

Sie verwenden die CreateCoreWebView2Environment Methode, um die Umgebung einzurichten und den Microsoft Edge-Browser zu suchen, der das Steuerelement lädt.

Wenn Sie die folgenden Standardwerte außer Kraft setzen möchten, können Sie stattdessen die Version "mit Optionen" dieser Methode CreateCoreWebView2EnvironmentWithOptionsverwenden:

• Browserspeicherort
• Benutzerdatenordner
• Browserkennzeichnungen

Nach Abschluss der CreateCoreWebView2Environment Methode gehen Sie wie folgt vor:

• Führen Sie die ICoreWebView2Environment::CreateCoreWebView2Controller Methode im ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler Rückruf aus.

• Führen Sie die ICoreWebView2Controller::get_CoreWebView2 Methode aus, um das zugeordnete WebView2-Steuerelement abzurufen.

Gehen Sie nun wie folgt vor, und im Rückruf gehen Sie wie folgt vor:

• Legen Sie einige weitere Einstellungen fest.
• Ändern Sie die Größe des WebView2-Steuerelements, um 100 % des übergeordneten Fensters auszufüllen.
• Zeigen Sie dann die Bing.com Website im WebView2-Steuerelement in Ihrer Win32-App an.

---

1. Suchen HelloWebView.cppSie in den folgenden Code:

      UpdateWindow(hWnd);
   
      // <-- WebView2 sample code starts here -->
   

2. Wenn der folgende Code noch nicht vorhanden ist, fügen Sie den folgenden Code in HelloWebView.cppein. Fügen Sie den Code zwischen den Zeilen // <-- WebView2 sample code starts here --> ein und // <-- WebView2 sample code ends here -->:

   // Step 3 - Create a single WebView within the parent window
   // Locate the browser and set up the environment for WebView
   CreateCoreWebView2EnvironmentWithOptions(nullptr, nullptr, nullptr,
      Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(
         [hWnd](HRESULT result, ICoreWebView2Environment* env) -> HRESULT {
   
            // Create a CoreWebView2Controller and get the associated CoreWebView2 whose parent is the main window hWnd
            env->CreateCoreWebView2Controller(hWnd, Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(
               [hWnd](HRESULT result, ICoreWebView2Controller* controller) -> HRESULT {
                  if (controller != nullptr) {
                     webviewController = controller;
                     webviewController->get_CoreWebView2(&webview);
                  }
   
                  // Add a few settings for the webview
                  // The demo step is redundant since the values are the default settings
                  wil::com_ptr<ICoreWebView2Settings> settings;
                  webview->get_Settings(&settings);
                  settings->put_IsScriptEnabled(TRUE);
                  settings->put_AreDefaultScriptDialogsEnabled(TRUE);
                  settings->put_IsWebMessageEnabled(TRUE);
   
                  // Resize WebView to fit the bounds of the parent window
                  RECT bounds;
                  GetClientRect(hWnd, &bounds);
                  webviewController->put_Bounds(bounds);
   
                  // Schedule an async task to navigate to Bing
                  webview->Navigate(L"https://www.bing.com/");
   
                  // Step 4 - Navigation events
   
                  // Step 5 - Scripting
   
                  // Step 6 - Communication between host and web content
   
                  return S_OK;
               }).Get());
            return S_OK;
         }).Get());
   

3. Wählen Sie "Alle > speichern" (Ctrl++Shift``S) aus, um das Projekt zu speichern.

Erstellen Ihrer Bing-Beispiel-App

1. Drücken Sie F5 , um das Projekt zu erstellen und auszuführen.

   Wenn Sie mit dem Löschen des gesamten WebView2-Codes begonnen haben, haben Sie jetzt ein Win32-Fenster, das mit einem WebView2-Steuerelement gefüllt ist, das mit Webseiteninhalten gefüllt ist:

   

2. Schließen Sie das WebView-Beispiel-App-Fenster .

   Wenn Sie den gesamten WebView2-Code beibehalten haben, wird zu diesem Zeitpunkt über einem leeren WebView2-Fenster ein Popupfenster mit einem Benachrichtigungsdialogfeld von Bing geöffnet. Klicken Sie auf die Schaltfläche "OK ", um das Bing-Dialogfeld zu schließen. Jetzt wird das WebView2-Steuerelement durch Bing-Seiteninhalt gefüllt:

   

3. Wenn das WebView-Beispiel-App-Fenster geöffnet ist, schließen Sie es.

Fahren Sie mit den folgenden Schritten fort.

Schritt 14 – Navigationsereignisse

Im vorherigen Schritt wurde die Navigation zur URL mithilfe der ICoreWebView2::Navigate Methode erläutert. Während der Navigation löst WebView2 eine Abfolge von Ereignissen aus, auf die der Host lauschen kann:

1. NavigationStarting

2. SourceChanged

3. ContentLoading

4. HistoryChanged

5. NavigationCompleted

   Wenn Sie jetzt weitere Informationen in einem neuen Fenster oder einer neuen Registerkarte benötigen, lesen Sie navigationsereignisse für WebView2-Apps.

In Fehlerfällen kann eines oder mehrere der folgenden Ereignisse auftreten, je nachdem, ob die Navigation zu einer Fehlerwebseite fortgesetzt wurde:

• SourceChanged
• ContentLoading
• HistoryChanged

Wenn eine HTTP-Umleitung erfolgt, befinden sich mehrere NavigationStarting Ereignisse in einer Zeile.

---

Registrieren Sie als Beispiel für die Verwendung von Navigationsereignissen einen Handler für das NavigationStarting Ereignis, um alle Nicht-Https-Anforderungen (nicht sicher) wie folgt abzubrechen.

1. Wenn sie noch nicht vorhanden ist, fügen Sie den folgenden Code unter dem Schritt 3-Code ein HelloWebView.cpp:

Jetzt öffnet die App keine Nicht-HTTPS-Websites. Sie können einen ähnlichen Mechanismus verwenden, um andere Aufgaben auszuführen, z. B. das Einschränken der Navigation innerhalb Ihrer eigenen Domäne.

Fahren Sie mit den folgenden Schritten fort.

Schritt 15 – Skripterstellung

Verwenden Sie Host-Apps, um JavaScript-Code zur Laufzeit in WebView2-Steuerelemente einzufügen. Sie können WebView2 mit der Ausführung von beliebigem JavaScript oder dem Hinzufügen von Initialisierungsskripts versehen. Das eingefügte JavaScript gilt für alle neuen Dokumente auf oberster Ebene und alle untergeordneten Frames, bis das JavaScript entfernt wird.

Das eingefügte JavaScript wird mit einer bestimmten Zeitdauer ausgeführt:

• Führen Sie es nach der Erstellung des globalen Objekts aus.
• Führen Sie es aus, bevor ein anderes Skript im HTML-Dokument ausgeführt wird.

---

1. Wenn der folgende Code noch nicht vorhanden ist, fügen Sie den folgenden Code in HelloWebView.cppein:

2. Wählen Sie "Alle > speichern" (Ctrl++Shift``S) aus, um das Projekt zu speichern.

   Jetzt fixiert WebView2 das Object Seitendokument und gibt es einmal zurück.

Wenn Code in der angegebenen Reihenfolge ausgeführt werden muss, verwenden Sie Rückrufe

Die Skripteinfügungs-APIs (und einige andere WebView2-APIs) sind asynchron. Wenn Code also in einer bestimmten Reihenfolge ausgeführt werden muss, sollten Sie Rückrufe verwenden.

Fahren Sie mit den folgenden Schritten fort.

Schritt 16 – Kommunikation zwischen Host- und Webinhalt

Der Host und der Webinhalt können auch über die postMessage Methode miteinander kommunizieren. Der Webinhalt, der in einem WebView2-Steuerelement ausgeführt wird, kann über die Methode an den window.chrome.webview.postMessage Host veröffentlicht werden, und die Nachricht wird von jedem registrierten ICoreWebView2WebMessageReceivedEventHandler Ereignishandler auf dem Host verarbeitet.

Ebenso kann der Host den Webinhalt über die ICoreWebView2::PostWebMessageAsString Oder-Methode ICoreWebView2::PostWebMessageAsJSON senden, und die Nachricht wird von Handlern abgefangen, die window.chrome.webview.addEventListener vom Listener hinzugefügt werden. Dieser Kommunikationsmechanismus ermöglicht es den Webinhalten, systemeigene Funktionen zu verwenden, indem Nachrichten übergeben werden, um den Host aufzufordern, systemeigene APIs auszuführen.

Um den Mechanismus zu verstehen, führen Sie die folgenden Schritte aus, wenn Sie versuchen, die Dokument-URL in WebView2 auszugeben:

1. Der Host registriert einen Handler, um empfangene Nachrichten an den Webinhalt zurückzugeben.

2. Der Host fügt ein Skript in den Webinhalt ein, der einen Handler zum Drucken von Nachrichten vom Host registriert.

3. Der Host fügt ein Skript in den Webinhalt ein, der die URL an den Host sendet.

4. Der Handler des Hosts wird ausgelöst und gibt die Nachricht (die URL) an den Webinhalt zurück.

5. Der Handler des Webinhalts wird ausgelöst und gibt eine Meldung vom Host (der URL) aus.

---

Lassen Sie die Host-App und Webinhalte wie folgt kommunizieren postMessage:

1. Wenn sie noch nicht vorhanden ist, fügen Sie den folgenden Code in folgendes ein HelloWebView.cpp:

2. Wählen Sie "Alle > speichern" (Ctrl++Shift``S) aus, um das Projekt zu speichern.

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

   Die Beispiel-App öffnet zunächst ein Popupfenster, in dem die zu ladende URL zusammen mit einer Schaltfläche "OK " angezeigt wird:

   

4. Klicken Sie auf die Schaltfläche "OK ", um das Popupfenster zu schließen, und fahren Sie mit der URL fort:

   Im WebView2-Fenster werden nun Webseiteninhalte angezeigt: die Bing-Website, http://www.bing.com.

   

5. Wenn Sie fertig sind, schließen Sie das WebView-Beispielfenster .

Herzlichen Glückwunsch, Sie haben eine Win32-App erstellt, die das WebView2-Steuerelement hostet und verwendet! Ihre Entwicklungsumgebung ist jetzt für die WebView2-App-Entwicklung eingerichtet, um das WebView2-Steuerelement in Ihre Win32-Apps einzuschließen. Sie haben auch eine Einführung in WebView2-Programmierkonzepte erhalten.

API-Referenz

• API-Referenz für WebView2 Win32 C++
• WebView2-API-Referenz – API-Referenz für jede Plattform.

Weitere Informationen

• Beispielcode für WebView2
• C++-Vorlagenbibliothek für Windows-Runtime (WRL)
• Windows-Implementierungsbibliotheken (WIL) GitHub-Repository.