Win32-Beispiel-App

Die WebView2APISample-App veranschaulicht die Verwendung des WebView2-Steuerelements und der WebView2-APIs zum Hinzufügen von Features zu einer Win32 C++-App.

• Beispielname: WebView2APISample
• Repositoryverzeichnis: WebView2APISample
• Lösungsdatei: WebView2Samples.sln (befindet sich im übergeordneten Verzeichnis, \SampleApps\)
• Projektname in Projektmappen-Explorer: WebView2APISample

WebView2APISample bettet ein WebView2-Steuerelement in eine native Win32-Anwendung ein.

Dieses Beispiel wurde als Win32 Visual Studio 2019-Projekt erstellt. Es verwendet C++ und HTML/CSS/JavaScript in der WebView2-Umgebung.

WebView2APISample zeigt eine Auswahl von WebView2-Ereignishandlern und API-Methoden, die es einer nativen Win32-Anwendung ermöglichen, direkt mit einem WebView2-Steuerelement zu interagieren und umgekehrt.

Dieses Beispiel und seine Lösungsdatei sind eindeutig: Sie enthält eine Kopie anderer Beispiele in Projektmappen-Explorer.

WebView2APISample ist eine Hybridanwendung, die mit dem Microsoft Edge WebView2-Steuerelement erstellt wurde. Das heißt, diese App kombiniert eine native Seite und eine Browser-Web-App-Seite. Weitere Informationen finden Sie unter Hybrid-App-Ansatz in Einführung in Microsoft Edge WebView2.

Das ausgeführte WebView2APISample-App-Fenster zeigt die WebView2 SDK-Version sowie die WebView2-Runtimeversion und den Pfad an. Es gibt viele nützliche Menüs und Menüelemente für Sie:

Wenn Sie WebView zum ersten Mal verwenden, empfiehlt es sich, zunächst das Tutorial Erste Schritte mit WebView2 in Win32-Apps zu befolgen, in dem beschrieben wird, wie Sie eine WebView2-App erstellen und einige grundlegende WebView2-Funktionen durchlaufen. Dieses bestimmte Tutorial beginnt nicht damit, dass Sie ein neues Win32-Projekt mithilfe einer Projektvorlage erstellen. Stattdessen beginnt es mit einem fertig gestellten Projekt im WebView2Samples-Repository und führt Sie durch den hinzugefügten WebView2-Code.

Ausführliche Informationen zu Ereignissen und API-Handlern in WebView2 finden Sie in der WebView2-API-Referenz.

Schritt 1: Installieren eines Vorschaukanals von Microsoft Edge

Stellen Sie als Nächstes sicher, dass ein Vorschaukanal von Microsoft Edge unter einem unterstützten Betriebssystem installiert ist. Derzeit empfehlen wir die neueste Version des Canary-Kanals.

1. Wenn noch kein Vorschaukanal von Microsoft Edge (Beta, Dev oder Canary) in einem separaten Fenster oder einer separaten Registerkarte installiert ist, finden Sie weitere Informationen unter Installieren eines Vorschaukanals von Microsoft Edge unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie mit den folgenden Schritten fort.

Schritt 2: Installieren von Visual Studio

Microsoft Visual Studio ist erforderlich (Mindestversion: Visual Studio 2019). Microsoft Visual Studio Code wird für dieses Beispiel nicht unterstützt. Dieses Repositorybeispiel ist ein Visual Studio 2019-Projekt. Das Beispiel kann auch mit Visual Studio 2022 geöffnet werden.

1. Wenn Visual Studio noch nicht mit C++-Unterstützung installiert ist, finden Sie weitere Informationen in einem separaten Fenster oder einer separaten Registerkarte unter Installieren von Visual Studio unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, um Visual Studio mit C++-Unterstützung zu installieren, kehren Sie dann zu dieser Seite zurück, und fahren Sie mit den folgenden Schritten fort.

Wenn Sie Visual Studio 2017 verwenden möchten, ändern Sie nach dem Öffnen der Projektmappe in Visual Studio 2017 das Plattformtoolset des Projekts unter Projekteigenschaften > Konfigurationseigenschaften > Allgemeines > Plattformtoolset.

Um Visual Studio 2017 verwenden zu können, müssen Sie möglicherweise auch ein aktuelles Windows SDK auf Ihrem Computer installieren.

Schritt 3: Klonen des WebView2Samples-Repositorys

1. Falls noch nicht geschehen, klonen Sie das WebView2Sample Repository auf Ihr lokales Laufwerk. In einem separaten Fenster oder einer separaten Registerkarte finden Sie weitere Informationen unter Herunterladen des WebView2Samples-Repositorys unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie weiter unten fort.

2. Wenn Sie das Repository zuvor geklont haben, ziehen Sie die neuesten Commits in Ihre lokale Kopie des Repositorys.

Schritt 4: Öffnen der Projektmappe in Visual Studio

1. Öffnen Sie die .sln Datei auf Ihrem lokalen Laufwerk in Visual Studio:

   • <your-repos-directory>/WebView2Samples/SampleApps/WebView2Samples.sln

   oder:

   • <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2Samples.sln

Das WebView2APISample-Beispiel und -Projekt ist das Standard Win32-Beispiel.

Im Gegensatz zu einigen anderen Beispielen gibt es keine dedizierte .sln Datei im Beispielrepositoryverzeichnis, die die Infodatei dieses Beispiels enthält. Stattdessen befindet sich die .sln Datei für dieses Beispiel (einschließlich anderer Beispielprojekte) im übergeordneten Verzeichnis.

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

1. Visual Studio-Workloads : Wenn Sie dazu aufgefordert werden, installieren Sie alle angeforderten Visual Studio-Workloads. In einem separaten Fenster oder einer separaten Registerkarte finden Sie weitere Informationen unter Installieren von Visual Studio-Workloads unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie weiter unten fort.

Fahren Sie mit den folgenden Schritten fort.

Schritt 6: Anzeigen des geöffneten Projekts

1. Öffnen Sie auf Ihrem lokalen Laufwerk erneut die WebView2Samples-Projektmappe in derselben Version von Visual Studio, die Sie eingerichtet haben:

   • <your-repos-directory>/WebView2Samples/SampleApps/WebView2Samples.sln

   oder:

   • <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2Samples.sln

2. Klicken Sie auf die Schaltfläche OK . Das Dialogfeld Projekte neu festlegen wird möglicherweise geöffnet:

   

   Beispiel für installierte Versionen:

   

3. Klicken Sie auf die Schaltfläche OK .

Projektmappen-Explorer zeigt mehrere Projekte, einschließlich des WebView2APISample-Projekts:

Schritt 7: Erstellen des Projekts mit der installierten SDK-Version

Legen Sie oben in Visual Studio das Buildziel wie folgt fest:

1. Wählen Sie in der Dropdownliste Projektmappenkonfigurationendie Option Debuggen oder Freigeben aus.

2. Wählen Sie in der Dropdownliste Lösungsplattformendie Option x86, x64 oder ARM64 aus.

3. Klicken Sie Projektmappen-Explorer mit der rechten Maustaste auf das Projekt WebView2APISample, und wählen Sie dann Erstellen aus.

   

   Dadurch wird die Projektdatei SampleApps/WebView2APISample/WebView2APISample.vcxprojerstellt.

Schritt 8: Ausführen (Debuggen) des Projekts

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

   Problembehandlung: Wenn Sie den Buildschritt überspringen und sofort Debuggen>Debuggen starten (F5) auswählen, wird möglicherweise das Dialogfeld "Programm kann nicht gestartet werden: Der angegebene Pfad wurde nicht gefunden" angezeigt:

   

   Um dieses Problem zu beheben, klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt WebView2APISample, und wählen Sie dann Erstellen aus.

   Das App-Fenster WebView2APISample wird geöffnet:

   

2. Wählen Sie in Visual Studio Debuggen>Debuggen Debuggen beenden aus. Visual Studio schließt die App.

Schritt 9: Aktualisieren der Vorabversion des WebView2 SDK

Als Nächstes aktualisieren Sie das WebView2 SDK und erstellen dann das Projekt neu.

Wenn Sie schnell sehen möchten, welche Version des WebView2 SDK in der Kopie des Repositorys der WebView2APISample-App auf GitHub installiert ist, lesen Sie packages.config.

In der Repositoryversion dieses Beispiels ist eine Vorabversion des WebView2 SDK installiert. Im Folgenden aktualisieren Sie es auf die neueste Vorabversion des WebView2 SDK oder bestätigen, dass das neueste SDK installiert ist. Die Verwendung eines Vorabversions-SDK bietet Ihnen Zugriff auf die neuesten Funktionen.

Untersuchen und aktualisieren Sie möglicherweise die installierten NuGet-Pakete wie folgt:

1. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt WebView2APISample (nicht auf den Darüber stehenden Projektmappenknoten), und wählen Sie dann NuGet-Pakete verwalten aus.

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

2. Aktivieren Sie rechts neben dem Suchtextfeld das Kontrollkästchen Vorabversion einschließen .

3. Klicken Sie im NuGet-Paket-Manager auf die Registerkarte Installiert . Überprüfen Sie auf der rechten Seite jedes Pakets, ob eine neuere Versionsnummer sowie die vorhandene Versionsnummer aufgeführt sind.

4. Klicken Sie auf die Registerkarte Aktualisieren . Wenn Updates für WebView2- oder WIL-Pakete verfügbar sind, können Sie das Paket bei Bedarf hier aktualisieren.

5. Stellen Sie auf der rechten Seite in der Dropdownliste Version sicher, dass Neueste Vorabversion ausgewählt ist, wenn Sie die neuesten APIs ausprobieren möchten:

   

6. Klicken Sie auf die Schaltfläche Aktualisieren .

   Das Dialogfeld Vorschau der Änderungen wird angezeigt:

   

   Das obige Bild stammt aus einem anderen Projekt, ist aber ähnlich.

7. Klicken Sie auf die Schaltfläche OK .

Die neueste Version des WebView2 SDK ist jetzt für dieses Projekt installiert.

Schritt 10: Erstellen und Ausführen des Projekts mit dem aktualisierten SDK

1. Klicken Sie Projektmappen-Explorer mit der rechten Maustaste auf das Projekt WebView2APISample, und wählen Sie dann Erstellen aus.

   

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

   Das App-Fenster WebView2APISample wird geöffnet:

   

3. Verwenden Sie die WebView2APISample-App .

4. Wählen Sie in Visual Studio Debuggen>Debuggen Debuggen beenden aus. Visual Studio schließt die App.

Damit werden die nummerierten Schritte zum Erstellen und Ausführen der Win32-Beispiel-App abgeschlossen. Überprüfen Sie als Nächstes im Code-Editor von Visual Studio den Code gemäß den folgenden Abschnitten.

Hybrid-App-Architektur

Die WebView2APISample-App ist ein Beispiel für eine Hybridanwendung mit einem nativen Win32-Teil und einem WebView-Teil.

• Der Win32-Teil kann direkt auf native Windows-APIs zugreifen.
• WebView ist ein Container für Standardwebtechnologien (HTML, CSS und JavaScript).

• Abschnitt 1: Der oberste Teil der WebView2APISample-App ist eine win32-Komponente, die in C++ geschrieben wurde. Dieser Teil der Anwendung akzeptiert Benutzeroberflächeneingaben vom Benutzer und verwendet sie, um die WebView zu steuern.

• Abschnitt 2: Der Standard Teil der WebView2APISample-App ist eine WebView, die mithilfe von Standardwebtechnologien (HTML/CSS/JavaScript) umfunktioniert werden kann. Es kann zu Websites oder lokalen Inhalten navigiert werden.

Dieser Hybridansatz ermöglicht es Ihnen, mithilfe von Webtechnologien schneller zu erstellen und zu durchlaufen, während Sie gleichzeitig native Funktionen nutzen können. Die WebView2APISample-App zeigt, wie die Win32-Komponente und die WebView-Komponente miteinander interagieren können.

Diese umfangreiche Beispiel-App ist auf mehr als 150 Menüelemente angewachsen, was viele WebView2-APIs im Win32/C++-Framework veranschaulicht. Die folgenden Abschnitte konzentrieren sich auf die Grundlagen der Hybrid-App-Implementierung.

Projektdateien

In diesem Abschnitt werden einige wichtige Dateien im Repository kurz erläutert. Die WebView2APISample-App ist vertikal in Komponenten und nicht horizontal in Ebenen unterteilt. Jede Komponente implementiert den gesamten Workflow einer Kategorie von Beispielfeatures, vom Lauschen auf Menübefehle bis hin zum Aufrufen von WebView-API-Methoden, um sie zu implementieren.

App.cpp

Dies ist die Datei der obersten Ebene, die die WebView2APISample-App ausführt. Es liest Befehlszeilenoptionen, richtet die Prozessumgebung ein und verarbeitet das Threadingmodell der App.

AppWindow.cpp (Fenstermenü)

Diese Datei implementiert das Anwendungsfenster wie folgt:

1. Richten Sie alle Win32-Steuerelemente ein.

2. Initialisieren Sie die WebView-Umgebung und die WebView.

3. Fügen Sie der WebView Ereignishandler hinzu, und erstellen Sie alle Komponenten, die verschiedene Features der Anwendung behandeln.

Die AppWindow -Klasse verarbeitet Befehle aus dem Fenstermenü der Beispiel-App.

Diese Datei wird weiter unten unter Schlüsselfunktionen in AppWindow.cpp ausführlicher beschrieben.

FileComponent.cpp (Menü Datei)

Diese Komponente verarbeitet Befehle aus dem Menü Datei (mit Ausnahme von Exit) sowie das DocumentTitleChanged -Ereignis.

ScriptComponent.cpp (Skriptmenü)

Diese Komponente verarbeitet Befehle aus dem Menü Skript , bei denen die Interaktion mit der WebView durch Einfügen von JavaScript, Bereitstellen von WebMessages, Hinzufügen nativer Objekte zur Webseite oder Verwenden des DevTools-Protokolls für die Kommunikation mit der Webseite erfolgt.

ProcessComponent.cpp (Menü "Prozess")

Diese Komponente verarbeitet Befehle aus dem Menü Prozess , die eine Interaktion mit dem Prozess des Browsers beinhalten. Es behandelt auch das ProcessFailed -Ereignis, falls der Browserprozess oder einer seiner Renderprozesse abstürzt oder nicht reagiert.

SettingsComponent.cpp (Menü Einstellungen)

Diese Komponente verarbeitet Befehle aus dem Menü Einstellungen . Diese Komponente ist auch für das Kopieren von Einstellungen aus einer alten WebView zuständig, wenn eine neue erstellt wird. Der meiste Code, der mit der ICoreWebView2Settings -Schnittstelle interagiert, finden Sie hier.

ViewComponent.cpp (Menü Ansicht)

Diese Komponente verarbeitet Befehle aus dem Menü Ansicht sowie alle Funktionen im Zusammenhang mit der Dimensionierung und Sichtbarkeit der WebView. Wenn die Größe des App-Fensters geändert, minimiert oder wiederhergestellt wird, ViewComponent ändert die Größe, blendet oder zeigt die WebView als Antwort an. Außerdem wird auf das ZoomFactorChanged Ereignis reagiert.

ScenarioWebMessage.cpp und ScenarioWebMessage.html (Menü "Szenario")

Die ScenarioWebMessage Komponente wird erstellt, wenn Sie das Menüelement Scenario>Web Messaging auswählen. Diese Komponente implementiert eine Beispielanwendung mit einem C++-Teil und einem HTML + JavaScript-Teil, die miteinander kommunizieren, indem Nachrichten asynchron bereitgestellt und empfangen werden.

Diese Komponente wird unter ScenarioWebMessage (.html, .cpp und .h) weiter unten ausführlicher beschrieben.

ScenarioAddHostObject.cpp und ScenarioAddHostObject.html (Menü Szenario)

Diese Komponente wird erstellt, wenn Sie das MenüelementSzenariohostobjekte> auswählen. Es veranschaulicht die Kommunikation zwischen der nativen App und der HTML-Webseite mittels Hostobjektinjektion. Die Schnittstelle des Hostobjekts wird in HostObjectSample.idldeklariert, und das Objekt selbst wird in HostObjectSampleImpl.cppimplementiert.

Siehe auch:

• Aufrufen von systemeigenem Code aus webseitigem Code

Wichtige Funktionen in AppWindow.cpp

AppWindow.cpp implementiert das Anwendungsfenster wie folgt:

1. Richten Sie alle Win32-Steuerelemente ein.

2. Initialisieren Sie die WebView-Umgebung und die WebView.

3. Fügen Sie der WebView Ereignishandler hinzu, und erstellen Sie alle Komponenten, die verschiedene Features der Anwendung behandeln.

Die AppWindow -Klasse verarbeitet Befehle aus dem Fenstermenü der Beispiel-App. Im Folgenden sind einige der wichtigsten Funktionen in AppWindow.cppaufgeführt.

InitializeWebView()

In AppWindow.cpperstellt die InitializeWebView() Funktion die WebView2-Umgebung mithilfe von CreateCoreWebView2EnvironmentWithOptions.

Um diese API-Aufrufe in Aktion zu sehen, überprüfen Sie den folgenden Code von InitializeWebView():

HRESULT hr = CreateCoreWebView2EnvironmentWithOptions(
    subFolder, nullptr, options.Get(),
    Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(
        this, &AppWindow::OnCreateEnvironmentCompleted)
        .Get());
if (!SUCCEEDED(hr))
{
    if (hr == HRESULT_FROM_WIN32(ERROR_FILE_NOT_FOUND))
    {
        MessageBox(
            m_mainWindow,
            L"Couldn't find Edge installation. "
            "Do you have a version installed that's compatible with this "
            "WebView2 SDK version?",
            nullptr, MB_OK);
    }
    else
    {
        ShowFailure(hr, L"Failed to create webview environment");
    }
}

OnCreateEnvironmentCompleted()

Nach dem Erstellen der Umgebung erstellen wir die WebView mithilfe CreateCoreWebView2Controllervon .

Die OnCreateEnvironmentCompleted Rückruffunktion wird in CreateCoreWebView2EnvironmentWithOptionsInitializeWebView()an übergeben. Der Rückruf speichert den Umgebungszeiger und verwendet ihn dann, um eine neue WebView zu erstellen:

HRESULT AppWindow::OnCreateEnvironmentCompleted(
    HRESULT result, ICoreWebView2Environment* environment)
{
    CHECK_FAILURE(result);

    m_webViewEnvironment = environment;

    CHECK_FAILURE(m_webViewEnvironment->CreateCoreWebView2Controller(
        m_mainWindow, Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(
                            this, &AppWindow::OnCreateCoreWebView2ControllerCompleted)
                            .Get()));
    return S_OK;
}

OnCreateCoreWebView2ControllerCompleted()

Die OnCreateCoreWebView2ControllerCompleted Rückruffunktion wird in CreateCoreWebView2ControllerInitializeWebView()an übergeben. Dieser Rückruf:

• Initialisiert den WebView-bezogenen Zustand.
• Registriert einige Ereignishandler.
• Erstellt die App-Komponenten.

RegisterEventHandlers()

Die RegisterEventHandlers Funktion wird in CreateCoreWebView2Controlleraufgerufen. Es richtet einige der von der Anwendung verwendeten Ereignishandler ein und fügt sie der WebView hinzu.

Weitere Informationen zu Ereignishandlern in WebView2 finden Sie unter ICoreWebView2.

Im Folgenden finden Sie einen Codeausschnitt aus RegisterEventHandlers(), in dem wir einen Ereignishandler für das NewWindowRequested -Ereignis einrichten. Dieses Ereignis wird ausgelöst, wenn JavaScript auf der Webseite aufruft window.open(). ICoreWebView2NewWindowRequestedEventHandlererstellt eine neue AppWindow und übergibt die WebView des neuen Fensters zurück an den Browser, damit sie vom window.open() Aufruf zurückgegeben werden kann. Im Gegensatz zu unseren Aufrufen von CreateCoreWebView2EnvironmentWithOptions und CreateCoreWebView2Controllerwird anstelle einer -Methode für den Rückruf nur ein C++-Lambda direkt und dort bereitgestellt:

CHECK_FAILURE(m_webView->add_NewWindowRequested(
    Callback<ICoreWebView2NewWindowRequestedEventHandler>(
        [this](
            ICoreWebView2* sender,
            ICoreWebView2NewWindowRequestedEventArgs* args) {
            wil::com_ptr<ICoreWebView2Deferral> deferral;
            CHECK_FAILURE(args->GetDeferral(&deferral));

            auto newAppWindow = new AppWindow(L"");
            newAppWindow->m_isPopupWindow = true;
            newAppWindow->m_onWebViewFirstInitialized = [args, deferral, newAppWindow]() {
                CHECK_FAILURE(args->put_NewWindow(newAppWindow->m_webView.get()));
                CHECK_FAILURE(args->put_Handled(TRUE));
                CHECK_FAILURE(deferral->Complete());
            };

            return S_OK;
        })
        .Get(),
    nullptr));

ScenarioWebMessage (.html, .cpp und .h)

Die ScenarioWebMessage Dateien zeigen, wie der Win32-Host die WebView ändern kann, wie die WebView den Win32-Host ändern kann und wie die WebView sich selbst ändern kann, indem auf Informationen vom Win32-Host zugegriffen wird. Dies erfolgt asynchron.

Die ScenarioWebMessage Komponente wird erstellt, wenn Sie das Menüelement Scenario>Web Messaging auswählen. Die ScenarioWebMessage Komponente implementiert eine Beispielanwendung mit einem C++-Teil und einem HTML+JavaScript-Teil, die miteinander kommunizieren, indem Nachrichten asynchron bereitgestellt und empfangen werden:

In den folgenden Abschnitten wird veranschaulicht, wie jede einzelne Funktion mit der WebView2APISample-App funktioniert. Anschließend wird erläutert, wie diese Funktionalität implementiert wird.

Wechseln Sie zunächst zur Web-App ScenarioWebMessage innerhalb der Beispiel-App:

1. Öffnen (ausführen) Sie die WebView2APISample-App .

2. Wählen Sie im Menü Szenario die Option Webmessaging aus.

   Die WebView zeigt eine Webseite mit dem Titel WebMessage-Beispielseite (ScenarioWebMessage.html):

   

Um die ScenarioWebMessage Funktionalität zu erkunden, können Sie den Anweisungen auf der Seite folgen oder die folgenden Schritte ausführen.

Veröffentlichen von Nachrichten vom Win32-Host in der WebView

Die folgenden Schritte zeigen, wie der Win32-Host eine WebView ändern kann. In diesem Beispiel wird der Text blau gedreht:

1. Öffnen Sie die WebMessage-Beispielseite (ScenarioWebMessage.html) wie oben beschrieben.

2. Wählen Sie im Menü Skript die Option Post Web Message JSON aus.

   Ein Dialogfeld mit dem vorgeschriebenen Code {"SetColor":"blue"} wird angezeigt.

3. Klicken Sie auf OK.

   Der Text im Abschnitt Posten von Nachrichten der Seite ändert sich von Schwarz in Blau.

So funktioniert es

1. In ScriptComponent.cppsendet der Aufruf von PostWebMessageAsJson Benutzereingaben an die ScenarioMessage.html Webanwendung:

   // Prompt the user for some JSON and then post it as a web message.
   void ScriptComponent::SendJsonWebMessage()
   {
      TextInputDialog dialog(
         m_appWindow->GetMainWindow(),
         L"Post Web Message JSON",
         L"Web message JSON:",
         L"Enter the web message as JSON.",
         L"{\"SetColor\":\"blue\"}");
      if (dialog.confirmed)
      {
         m_webView->PostWebMessageAsJson(dialog.input.c_str());
      }
   }
   

2. Innerhalb der Webanwendung werden Ereignislistener verwendet, um die Webnachricht zu empfangen und darauf zu reagieren. Der folgende Codeausschnitt stammt aus ScenarioWebMessage.html. Der Ereignislistener ändert die Farbe des Texts, wenn das Argument "SetColor" lautet:

   window.chrome.webview.addEventListener('message', arg => {
      if ("SetColor" in arg.data) {
         document.getElementById("colorable").style.color = arg.data.SetColor;
      }
   });
   

Empfangen von Nachrichten (von der WebView an den Win32-Host)

Die folgenden Schritte zeigen, wie webView die Win32-Host-App ändern kann, indem der Titel der Win32-App geändert wird:

1. Öffnen Sie die WebMessage-Beispielseite (ScenarioWebMessage.html) wie oben beschrieben.

2. Notieren Sie sich den Titel der WebView2APISample-App , die oben links im Fenster neben dem Symbol angezeigt wird. Es handelt sich zunächst um WebView2APISample – Microsoft Edge WebView2.

3. Geben Sie auf der Seite im Abschnitt Empfangene Nachrichten einen neuen Titel ein, und klicken Sie dann auf die Schaltfläche Senden .

4. Notieren Sie sich den neuen Titel, der in der Titelleiste der WebView2APISample-App angezeigt wird.

So funktioniert es

1. In ScenarioWebMessage.htmlsendet window.chrome.webview.postMessage() die Benutzereingabe an die Hostanwendung:

   function SetTitleText() {
      let titleText = document.getElementById("title-text");
      window.chrome.webview.postMessage(`SetTitleText ${titleText.value}`);
   }
   

2. In ScenarioWebMessage.cppverwenden wir add_WebMessageReceived , um den Ereignishandler zu registrieren. Wenn wir das Ereignis empfangen, ändern wir nach dem Überprüfen der Eingabe den Titel des App-Fensters (m_appWindow):

   // Setup the web message received event handler before navigating to
   // ensure we don't miss any messages.
   CHECK_FAILURE(m_webview->add_WebMessageReceived(
      Microsoft::WRL::Callback<ICoreWebView2WebMessageReceivedEventHandler>(
         [this](ICoreWebView2* sender, ICoreWebView2WebMessageReceivedEventArgs* args)
   {
      wil::unique_cotaskmem_string uri;
      CHECK_FAILURE(args->get_Source(&uri));
   
      // Always validate that the origin of the message is what you expect.
      if (uri.get() != m_sampleUri)
      {
         return S_OK;
      }
      wil::unique_cotaskmem_string messageRaw;
      CHECK_FAILURE(args->TryGetWebMessageAsString(&messageRaw));
      std::wstring message = messageRaw.get();
   
      if (message.compare(0, 13, L"SetTitleText ") == 0)
      {
         m_appWindow->SetTitleText(message.substr(13).c_str());
      }
      return S_OK;
   }).Get(), &m_webMessageReceivedToken));
   

Roundtripnachrichten (von der WebView zum Host zurück zur WebView)

Die folgenden Schritte zeigen, wie webView Informationen vom Win32-Host abrufen und sich selbst ändern kann, indem die Größe der Win32-App angezeigt wird.

1. Öffnen Sie die WebMessage-Beispielseite (ScenarioWebMessage.html) wie oben beschrieben.

2. Klicken Sie im Abschnitt Roundtrip der Seite auf die Schaltfläche GetWindowBounds .

   Das Textfeld unter der Schaltfläche zeigt die Begrenzungen für die WebView2APISample-App an.

So funktioniert es

1. Wenn auf die Schaltfläche Get window bounds (Fenstergrenzen abrufen) geklickt wird, wird die GetWindowBounds Funktion in ScenarioWebMessage.html aufgerufen. GetWindowBounds ruft window.chrome.webview.postMessage() auf, um eine Nachricht an die Hostanwendung zu senden:

   function GetWindowBounds() {
       window.chrome.webview.postMessage("GetWindowBounds");
   }
   

2. In ScenarioWebMessage.cppwird add_WebMessageReceived verwendet, um den empfangenen Ereignishandler zu registrieren. Nach dem Überprüfen der Eingabe ruft der Ereignishandler Fenstergrenzen aus dem App-Fenster ab. PostWebMessageAsJson sendet die Begrenzungen an die Webanwendung:

   if (message.compare(L"GetWindowBounds") == 0)
   {
      RECT bounds = m_appWindow->GetWindowBounds();
      std::wstring reply =
         L"{\"WindowBounds\":\"Left:" + std::to_wstring(bounds.left)
         + L"\\nTop:" + std::to_wstring(bounds.top)
         + L"\\nRight:" + std::to_wstring(bounds.right)
         + L"\\nBottom:" + std::to_wstring(bounds.bottom)
         + L"\"}";
      CHECK_FAILURE(sender->PostWebMessageAsJson(reply.c_str()));
   }
   

3. In ScenarioWebMessage.htmlantwortet ein Ereignislistener auf die WindowBounds Nachricht und zeigt die Grenzen des Fensters an:

   window.chrome.webview.addEventListener('message', arg => {
      if ("WindowBounds" in arg.data) {
         document.getElementById("window-bounds").value = arg.data.WindowBounds;
      }
   });
   

Siehe auch

• WebView2-API-Referenz
• Erste Schritte mit WebView2 in Win32-Apps