Erste Schritte mit WebView2 in Win32-Apps

  • Artikel

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

Dieses Tutorial beginnt mit dem Öffnen eines vorhandenen Win32-App-Projekts, in 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 Sie das WebView2Samples Repository, oder laden Sie es auf Ihr lokales Laufwerk herunter.
  2. Führen Sie das abgeschlossene Projekt aus.
  3. Löschen Sie optional den WebView2-Code aus HelloWebView.cpp , um die Win32-Baseline-App wiederherzustellen.
  4. Führen Sie die verbleibenden Schritte in diesem Artikel zum Hinzufügen und Verstehen des WebView2-Codes aus.

In diesem Tutorial können 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 Tutorialprojekt ist im WebView2Samples-Repository verfügbar:

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

Schritt 1: Installieren von Visual Studio

Für dieses Tutorial ist Microsoft Visual Studio und nicht Microsoft Visual Studio Code erforderlich.

  1. Wenn Microsoft Visual Studio noch nicht installiert ist, finden Sie weitere Informationen in einem neuen Fenster oder einer neuen Registerkarte unter Installieren von Visual Studio unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die dort beschriebenen Schritte aus, um eine einfache Standardinstallation von Visual Studio durchzuführen.

Kehren Sie dann zu dieser Seite zurück, und fahren Sie weiter 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 unter Einrichten Ihrer Entwicklungsumgebung für WebView2.

Fahren Sie dann weiter unten fort.

Schritt 3: Klonen oder Herunterladen des WebView2Samples-Repositorys

Der Code, den Sie in den Schritten dieses Tutorials hinzufügen, wurde dem Beispielrepository bereits hinzugefügt. In einem optionalen Schritt unten können Sie den WebView2-Code aus HelloWebView.cpplöschen, sodass Sie ihn bei Bedarf selbst hinzufügen können.

Damit sich dieses Tutorial auf die WebView2-spezifische Codierung konzentriert, beginnen wir mit einem vorhandenen Microsoft Visual Studio-Projekt (WebView2GettingStarted), das WebView2Samples im GitHub-Repository gespeichert ist. Wir fügen WebView2-Features hinzu. Tatsächlich wurden die Features bereits hinzugefügt, aber folgen Sie den Schritten zur Einrichtung und Erläuterung.

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

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

  1. Falls noch nicht geschehen, klonen Sie das Repository, oder laden Sie es WebView2Samples herunter. Führen Sie dazu in einem separaten Fenster oder einer separaten Registerkarte die Schritte unter Herunterladen des WebView2Samples-Repositorys oder Klonen des WebView2Samples-Repositorys unter Einrichten Ihrer Entwicklungsumgebung 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 Projektmappe (WebView2GettingStarted.sln)

Sie beginnen mit einem einfachen Desktopprojekt, das ein einzelnes Standard Fenster 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. Öffnen Sie WebView2GettingStarted.sln, das sich unter dem Pfad befindet: <your repo directory>/WebView2Samples/GettingStartedGuides/Win32_GettingStarted/WebView2GettingStarted.sln.

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

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

Visual Studio-Installer Aufforderung zur Installation der Workload

Wenn Visual Studio-Installer Sie aufgefordert, eine Workload zu installieren:

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

  2. Wenn Sie möchten, wählen Sie auch die .NET-Desktopentwicklungs-Karte aus (für dieses Tutorial nicht erforderlich), sodass auch in diesem Karte ein Häkchen angezeigt wird.

  3. Klicken Sie auf die Schaltfläche Installieren .

Das Installationsprogramm wird geschlossen.

Neuzuweisungsprojekte

Möglicherweise wird das Dialogfeld Projektmappenaktionen überprüfen angezeigt, in dem Sie gefragt werden, ob Sie Projekte neu festlegen möchten:

Visual Studio-Dialogfeld

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

Die Projektmappe WebView2GettingStarted wird in Visual Studio geöffnet. Die Projektmappe 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. Öffnen Sie WebView2GettingStarted.sln, das sich unter dem Pfad befindet: <your repo directory>/WebView2Samples/GettingStartedGuides/Win32_GettingStarted/WebView2GettingStarted.sln.

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

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

    Die Datei

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 Projektmappe für die Verwendung des Win10 SDK und des Visual Studio-Toolsets

Dieser Schritt ist nur für ältere Versionen von Visual Studio erforderlich, sodass Sie ihn wahrscheinlich überspringen können. Sie können sich diese Benutzeroberfläche jedoch auf jeden Fall ansehen:

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

  2. Wählen Sie Konfigurationseigenschaften>Allgemein aus, und wählen Sie dann (falls dies nicht bereits die richtige Einstellung ist):

    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 Versionen von Visual Studio erforderlich.

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

    Legen Sie in Visual Studio 2017 Die Windows SDK-Version auf 10 und das Plattformtoolset auf Visual Studio fest.

    Im Folgenden sehen Sie einen Visual Studio 2022-Screenshot. Die Werte waren bereits korrekt, sodass keine Änderung erforderlich war:

    In Visual Studio 2022 ist die Windows SDK-Version bereits 10, und das Plattformtoolset ist bereits Visual Studio.

Fahren Sie mit den folgenden Schritten fort.

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

An diesem Punkt ist Ihre Entwicklungsumgebung 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 die WebView2-Codierung eingerichtet ist, führen Sie das Projekt wie folgt im Debugmodus aus:

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

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

    Die Beispiel-App zeigt ein Popupfenster mit DER URL und der Schaltfläche OK über einem leeren WebView2-Fenster an.

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

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

    Die Beispiel-App zeigt jetzt die Bing-Website an.

  3. Schließen Sie das WebView-Beispielfenster .

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

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

In einem Moment installieren Sie die Windows-Implementierungsbibliotheken (WIL) – Eine C++-Bibliothek, die nur für Header verwendet wird, um Entwicklern das Leben unter Windows 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 Tutorial wird auch Windows-Runtime C++-Vorlagenbibliothek (WRL) verwendet: Eine Vorlagenbibliothek, die eine low-level-Möglichkeit zum Erstellen und Verwenden von Windows-Runtime-Komponenten bietet.

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

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

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

    Verwalten von NuGet-Paketen

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

  4. Geben Sie in der Suchleiste oben links ein Microsoft.Windows.ImplementationLibrary. Alternativ können Sie den einzeiligen Codeblock unten kopieren und einfügen. 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:

    Auswählen des Pakets

    Klicken Sie zum Zoomen mit der rechten Maustaste auf >Bild in neuer 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 unter Paketquellen eine nuget.com Quelle vorhanden ist, die auf https://api.nuget.org/v3/index.jsonverweist.

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

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

Windows-Implementierungsbibliotheken (Windows Implementation Libraries, 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 würden, indem Sie mit einer Win32-Projektvorlage beginnen, müssten 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 Projektmappe WebView2GettingStarted wie oben beschrieben geöffnet ist.

  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.

    Verwalten von NuGet-Paketen

  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 rechts auf der Suchleiste das Kontrollkästchen Vorabversion einschließen (es sei denn, Sie wissen, dass Sie eine Vorabversion des SDK benötigen).

  6. Geben Sie in der Suchleiste oben links ein Microsoft.Web.WebView2. Alternativ können Sie den einzeiligen Codeblock unten kopieren und einfügen. Wählen Sie dann Microsoft.Web.WebView2 aus.

    Microsoft.Web.WebView2

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

    Auswählen des Pakets

  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: Löschen Sie optional den WebView2-Code aus HelloWebView.cpp.

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

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

    // include WebView2 header
#include "WebView2.h"

  2. Löschen HelloWebView.cppSie 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 ausgeführt:

  • Das Beispielrepository wurde geklont oder heruntergeladen, einschließlich eines vorhandenen Projekts, das eine Standardmäßige C++-Windows-Desktopanwendung enthält.
  • Die Windows-Implementierungsbibliothek (Windows Implementation Library, 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 Projektmappe WebView2GettingStarted geöffnet ist.

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

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

    // include WebView2 header
#include "WebView2.h"

    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 Header:

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

    • wil/com.h - Windows-Implementierungsbibliotheken (WIL): Eine C++-Bibliothek, die nur für Header verwendet wird, um Entwicklern das Leben unter Windows durch lesbare, typsichere C++-Schnittstellen für gängige Windows-Codierungsmuster zu erleichtern.

    • WebView2.h – Das WebView2-Steuerelement wird von Microsoft Edge unterstützt und ermöglicht es Ihnen, Webtechnologien (HTML, CSS und JavaScript) in Ihre nativen Anwendungen einzubetten.

  5. Wählen Sie Datei>Alle speichern (STRG+UMSCHALT+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 Einer leeren Beispiel-App

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

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

    Die Beispiel-App zeigt ein leeres Fenster an.

    Sie verfügen jetzt über eine ausgeführte, 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 fenster Standard ein WebView2-Steuerelement hinzu.

Sie verwenden die CreateCoreWebView2Environment -Methode, um die Umgebung einzurichten und den Microsoft Edge-Browser zu suchen, der das Steuerelement unterstützt.

Wenn Sie die folgenden Standardwerte außer Kraft setzen möchten, können Sie stattdessen die Version "with options" dieser Methode verwenden: CreateCoreWebView2EnvironmentWithOptions

  • Browserspeicherort
  • Benutzerdatenordner
  • Browserflags

Nach Abschluss der CreateCoreWebView2Environment -Methode führen Sie folgende Schritte aus:

  • Führen Sie die ICoreWebView2Environment::CreateCoreWebView2Controller -Methode innerhalb des Rückrufs ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler aus.

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

Um nun die oben genannten Schritte durchzuführen, führen Sie im Rückruf folgendes aus:

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

  1. Suchen Sie in HelloWebView.cppden 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 ein HelloWebView.cpp. Fügen Sie den Code zwischen den Zeilen // <-- WebView2 sample code starts here --> und // <-- WebView2 sample code ends here -->ein:

    // 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 Datei>Alle speichern (STRG+UMSCHALT+S) aus, um das Projekt zu speichern.

Erstellen Ihrer Bing-Beispiel-App

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

    Wenn Sie zu Beginn den gesamten WebView2-Code gelöscht haben, verfügen Sie jetzt über ein Win32-Fenster, das mit einem WebView2-Steuerelement gefüllt ist, das mit Webseiteninhalten gefüllt ist:

    Bing-Fenster

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

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

    Die Beispiel-App zeigt ein anfänglich leeres Fenster mit einem Bing-Dialogfeld an.

  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 haben wir die Navigation zur URL mithilfe der ICoreWebView2::Navigate -Methode erläutert. Während der Navigation löst WebView2 eine Sequenz von Ereignissen aus, auf die der Host lauschen kann:

  1. NavigationStarting

  2. SourceChanged

  3. ContentLoading

  4. HistoryChanged

  5. NavigationCompleted

    Weitere Informationen finden Sie in einem neuen Fenster oder einer neuen Registerkarte unter Navigationsereignisse für WebView2-Apps.

Navigationsereignisse

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 auftritt, gibt es 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 er noch nicht vorhanden ist, fügen Sie den folgenden Code unter dem Code von Schritt 3 in HelloWebView.cppein:

    // Step 4 - Navigation events
// register an ICoreWebView2NavigationStartingEventHandler to cancel any non-https navigation
EventRegistrationToken token;
webview->add_NavigationStarting(Callback<ICoreWebView2NavigationStartingEventHandler>(
    [](ICoreWebView2* webview, ICoreWebView2NavigationStartingEventArgs* args) -> HRESULT {
        wil::unique_cotaskmem_string uri;
        args->get_Uri(&uri);
        std::wstring source(uri.get());
        if (source.substr(0, 5) != L"https") {
            args->put_Cancel(true);
        }
        return S_OK;
    }).Get(), &token);

Jetzt öffnet die App keine Websites, die nicht https sind. Sie können einen ähnlichen Mechanismus verwenden, um andere Aufgaben auszuführen, z. B. das Einschränken der Navigation auf 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. 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 Zeitpunkt ausgeführt:

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

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

    // Step 5 - Scripting
// Schedule an async task to add initialization script that freezes the Object object
webview->AddScriptToExecuteOnDocumentCreated(L"Object.freeze(Object);", nullptr);
// Schedule an async task to get the document URL
webview->ExecuteScript(L"window.document.URL;", Callback<ICoreWebView2ExecuteScriptCompletedHandler>(
    [](HRESULT errorCode, LPCWSTR resultObjectAsJson) -> HRESULT {
        LPCWSTR URL = resultObjectAsJson;
        //doSomethingWithURL(URL);
        return S_OK;
    }).Get());

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

    WebView2 friert nun ein Object und gibt das Seitendokument einmal zurück.

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

Die Skripteinschleusungs-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 Webinhalten

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 window.chrome.webview.postMessage -Methode an den Host gesendet werden, und die Nachricht wird von jedem registrierten ICoreWebView2WebMessageReceivedEventHandler Ereignishandler auf dem Host verarbeitet.

Auf ähnliche Weise kann der Host den Webinhalt über die - oder ICoreWebView2::PostWebMessageAsJSON -ICoreWebView2::PostWebMessageAsStringMethode 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, native Funktionen zu verwenden, indem Nachrichten übergeben werden, um den Host aufzufordern, native APIs auszuführen.

Um den Mechanismus zu verstehen, werden die folgenden Schritte ausgeführt, 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, das einen Handler zum Drucken von Nachrichten vom Host registriert.

  3. Der Host fügt dem Webinhalt ein Skript ein, das 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 Nachricht vom Host aus (die URL).

Lassen Sie die Host-App und die Webinhalte wie folgt über postMessagekommunizieren:

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

    // Step 6 - Communication between host and web content
// Set an event handler for the host to return received message back to the web content
webview->add_WebMessageReceived(Callback<ICoreWebView2WebMessageReceivedEventHandler>(
    [](ICoreWebView2* webview, ICoreWebView2WebMessageReceivedEventArgs* args) -> HRESULT {
        wil::unique_cotaskmem_string message;
        args->TryGetWebMessageAsString(&message);
        // processMessage(&message);
        webview->PostWebMessageAsString(message.get());
        return S_OK;
    }).Get(), &token);

// Schedule an async task to add initialization script that
// 1) Add an listener to print message from the host
// 2) Post document URL to the host
webview->AddScriptToExecuteOnDocumentCreated(
    L"window.chrome.webview.addEventListener(\'message\', event => alert(event.data));" \
    L"window.chrome.webview.postMessage(window.document.URL);",
    nullptr);

  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.

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

    Die Beispiel-App zeigt ein Popupfenster mit DER URL und der Schaltfläche OK über einem leeren WebView2-Fenster an.

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

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

    Die Beispiel-App zeigt jetzt die Bing-Website an.

  5. Wenn Sie bereit 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 die WebView2-Programmierkonzepte gehabt.

API-Referenz

Siehe auch