Exemple d’application Win32

L’application WebView2APISample montre comment utiliser le contrôle WebView2 et les API WebView2 pour ajouter des fonctionnalités à une application Win32 C++.

• Exemple de nom : WebView2APISample
• Répertoire du référentiel : WebView2APISample
• Fichier solution : WebView2Samples.sln (situé dans le répertoire parent, \SampleApps\)
• Nom du projet dans l’Explorateur de solutions : WebView2APISample

WebView2APISample incorpore un contrôle WebView2 dans une application native Win32.

Cet exemple est généré en tant que projet Visual Studio 2019 Win32. Il utilise C++ et HTML/CSS/JavaScript dans l’environnement WebView2.

WebView2APISample présente une sélection de gestionnaires d’événements et de méthodes d’API WebView2 qui permettent à une application Win32 native d’interagir directement avec un contrôle WebView2 et vice versa.

Cet exemple et son fichier solution sont uniques : il contient une copie d’autres exemples, dans l’Explorateur de solutions.

WebView2APISample est une application hybride créée avec le contrôle Microsoft Edge WebView2 ; autrement dit, cette application combine un côté natif et un côté application web de navigateur. Consultez Approche d’application hybride dans Présentation de Microsoft Edge WebView2.

La fenêtre d’application WebView2APISample en cours d’exécution affiche la version du Kit de développement logiciel (SDK) WebView2, ainsi que la version et le chemin d’accès du runtime WebView2. De nombreux menus et éléments de menu sont fournis pour vous :

Si vous utilisez WebView pour la première fois, nous vous recommandons de suivre le didacticiel Prise en main de WebView2 dans les applications Win32, qui explique comment créer une application WebView2 et décrit certaines fonctionnalités webView2 de base. Ce didacticiel particulier ne commence pas par la création d’un projet Win32 à l’aide d’un modèle de projet ; au lieu de cela, il commence par un projet terminé dans le référentiel WebView2Samples et vous guide tout au long du code WebView2 ajouté.

Pour plus d’informations sur les événements et les gestionnaires d’API dans WebView2, consultez Informations de référence sur l’API WebView2.

Étape 1 : Installer Visual Studio

Microsoft Visual Studio est requis (version minimale : Visual Studio 2019). Microsoft Visual Studio Code n’est pas pris en charge pour cet exemple. Cet exemple de référentiel est un projet Visual Studio 2019. L’exemple peut également être ouvert à l’aide de Visual Studio 2022.

1. Si Visual Studio n’est pas déjà installé avec la prise en charge de C++, dans une fenêtre ou un onglet distinct, consultez Installer Visual Studio dans Configurer votre environnement de développement pour WebView2. Suivez les étapes de cette section pour installer Visual Studio avec prise en charge de C++, puis revenez à cette page et poursuivez les étapes ci-dessous.

Si vous souhaitez utiliser Visual Studio 2017, après avoir ouvert la solution dans Visual Studio 2017, modifiez l’ensemble d’outils de plateforme du projet dans Propriétés du projet Propriétés > de configuration > Ensemble d’outils de plateforme générale>.

Pour utiliser Visual Studio 2017, vous devrez peut-être également installer un sdk Windows récent sur votre ordinateur.

Étape 2 : Cloner le référentiel WebView2Samples

1. Si ce n’est pas déjà fait, clonez le WebView2Sample référentiel sur votre lecteur local. Dans une fenêtre ou un onglet distinct, consultez Télécharger le référentiel WebView2Samples dans Configurer votre environnement de développement pour WebView2. Suivez les étapes décrites dans cette section, revenez à cette page et continuez ci-dessous.

2. Si vous avez précédemment cloné le référentiel, extrayez les derniers commits dans votre copie locale du dépôt.

Étape 3 : Ouvrir la solution dans Visual Studio

1. Sur votre lecteur local, ouvrez le .sln fichier dans Visual Studio :

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

   ou :

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

L’exemple et le projet WebView2APISample constituent l’exemple Win32 principal.

Contrairement à d’autres exemples, il n’existe pas de fichier dédié .sln dans le répertoire de l’exemple de référentiel qui contient le fichier Lisez-moi de cet exemple. Au lieu de cela, le .sln fichier de cet exemple (y compris d’autres exemples de projets) se trouve dans le répertoire parent.

Étape 4 : Installer les charges de travail si vous y êtes invité

1. Charges de travail Visual Studio : si vous y êtes invité, installez toutes les charges de travail Visual Studio demandées. Dans une fenêtre ou un onglet distinct, consultez Installer des charges de travail Visual Studio dans Configurer votre environnement de développement pour WebView2. Suivez les étapes décrites dans cette section, revenez à cette page et continuez ci-dessous.

Poursuivez les étapes ci-dessous.

Étape 5 : Afficher le projet ouvert

1. Sur votre lecteur local, ouvrez à nouveau la solution WebView2Samples dans la même version de Visual Studio que celle que vous avez configurée :

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

   ou :

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

2. Cliquez sur le bouton OK . La boîte de dialogue Recibler les projets peut s’ouvrir :

   

   Exemple de versions installées :

   

3. Cliquez sur le bouton OK .

L’Explorateur de solutions affiche plusieurs projets, notamment le projet WebView2APISample :

Étape 6 : Générer le projet à l’aide de la version installée du Kit de développement logiciel (SDK)

En haut de Visual Studio, définissez la cible de build comme suit :

1. Dans la liste déroulante Configurations de solution, sélectionnez Déboguer ou Mettre en production.

2. Dans la liste déroulante Plateformes de solutions, sélectionnez x86, x64 ou ARM64.

3. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet WebView2APISample , puis sélectionnez Générer.

   

   Cela génère le fichier SampleApps/WebView2APISample/WebView2APISample.vcxprojprojet .

Étape 7 : Exécuter (déboguer) le projet

1. Sélectionnez Déboguer>Démarrer le débogage (F5).

   Résolution des problèmes : si vous ignorez l’étape de génération et sélectionnez immédiatement Démarrer> ledébogage (F5), une boîte de dialogue peut s’afficher, « Impossible de démarrer le programme : impossible de trouver le chemin spécifié » :

   

   Pour résoudre ce problème : dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet WebView2APISample , puis sélectionnez Générer.

   La fenêtre d’application WebView2APISample s’ouvre :

   

2. Dans Visual Studio, sélectionnez Déboguer>Arrêter le débogage. Visual Studio ferme l’application.

Étape 8 : Mettre à jour le Kit de développement logiciel (SDK) WebView2 préversion

Ensuite, vous allez mettre à jour le Kit de développement logiciel (SDK) WebView2, puis recréer le projet.

Si vous souhaitez voir rapidement quelle version du Kit de développement logiciel (SDK) WebView2 est installée dans la copie du dépôt de l’application WebView2APISample sur GitHub, consultez packages.config.

La version du référentiel de cet exemple dispose d’une version préliminaire du Kit de développement logiciel (SDK) WebView2. Ci-dessous, vous allez le mettre à jour vers la dernière version préliminaire du Kit de développement logiciel (SDK) WebView2, ou confirmer que le dernier SDK est installé. L’utilisation d’un KIT de développement logiciel (SDK) préversion vous permet d’accéder aux dernières fonctionnalités.

Examinez et éventuellement mettez à jour les packages NuGet installés, comme suit :

1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet WebView2APISample (et non sur le nœud de solution situé au-dessus), puis sélectionnez Gérer les packages NuGet.

   Le panneau Gestionnaire de package NuGet s’ouvre dans Visual Studio.

2. À droite de la zone de texte de recherche, cochez la case Inclure la préversion .

3. Dans le Gestionnaire de package NuGet, cliquez sur l’onglet Installé . Sur le côté droit de chaque package, vérifiez s’il existe un numéro de version plus récent répertorié ainsi que le numéro de version existant.

4. Cliquez sur l’onglet Mettre à jour . Si des mises à jour sont disponibles pour les packages WebView2 ou WIL, si vous le souhaitez, vous pouvez mettre à jour le package ici.

5. Sur la droite, dans la liste déroulante Version , vérifiez que la préversion la plus récente est sélectionnée, si vous souhaitez pouvoir essayer les dernières API :

   

6. Cliquez sur le bouton Mettre à jour .

   La boîte de dialogue Aperçu des modifications s’affiche :

   

   L’image ci-dessus provient d’un autre projet, mais elle est similaire.

7. Cliquez sur le bouton OK .

La dernière version du Kit de développement logiciel (SDK) WebView2 est maintenant installée pour ce projet.

Étape 9 : Générer et exécuter le projet avec le KIT de développement logiciel (SDK) mis à jour

1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet WebView2APISample , puis sélectionnez Générer.

   

2. Sélectionnez Déboguer>Démarrer le débogage (F5).

   La fenêtre d’application WebView2APISample s’ouvre :

   

3. Utilisez l’application WebView2APISample .

4. Dans Visual Studio, sélectionnez Déboguer>Arrêter le débogage. Visual Studio ferme l’application.

Cela termine les étapes numérotées pour la création et l’exécution de l’exemple d’application Win32. Ensuite, dans l’éditeur de code Visual Studio, inspectez le code, conformément aux sections suivantes.

Architecture d’application hybride

L’application WebView2APISample est un exemple d’application hybride, avec un composant natif Win32 et un composant WebView.

• La partie Win32 peut accéder directement aux API Windows natives.
• WebView est un conteneur pour les technologies web standard (HTML, CSS et JavaScript).

• Section 1 : La partie supérieure de l’application WebView2APISample est un composant Win32 écrit en C++. Cette partie de l’application accepte les entrées d’interface utilisateur de l’utilisateur et les utilise pour contrôler le WebView.

• Section 2 : La partie principale de l’application WebView2APISample est une vue WebView qui peut être réaffectée à l’aide de technologies web standard (HTML/CSS/JavaScript). Il peut être redirigé vers des sites web ou du contenu local.

Cette approche hybride vous permet de créer et d’itérer plus rapidement à l’aide des technologies web, tout en étant en mesure de tirer parti des fonctionnalités natives. L’application WebView2APISample montre comment le composant Win32 et le composant WebView peuvent interagir entre eux.

Cet exemple d’application à grande échelle s’est développé pour inclure plus de 150 éléments de menu, illustrant de nombreuses API WebView2 dans l’infrastructure Win32/C++. Les sections suivantes se concentrent sur les principes de base de l’implémentation d’applications hybrides.

Fichiers projet

Cette section décrit brièvement certains fichiers clés dans le dépôt. L’application WebView2APISample est divisée verticalement en composants, plutôt qu’horizontalement en couches. Chaque composant implémente l’ensemble du flux de travail d’une catégorie d’exemples de fonctionnalités, de l’écoute des commandes de menu à l’appel des méthodes de l’API WebView pour les implémenter.

App.cpp

Il s’agit du fichier de niveau supérieur qui exécute l’application WebView2APISample . Il lit les options de ligne de commande, configure l’environnement de processus et gère le modèle de thread de l’application.

AppWindow.cpp (menu Fenêtre)

Ce fichier implémente la fenêtre d’application en procédant comme suit :

1. Configurez tous les contrôles Win32.

2. Initialisez l’environnement WebView et le WebView.

3. Ajoutez des gestionnaires d’événements au WebView et créez tous les composants qui gèrent les différentes fonctionnalités de l’application.

La AppWindow classe gère les commandes du menu Fenêtre de l’exemple d’application.

Ce fichier est décrit plus en détail dans Fonctions clés dans AppWindow.cpp ci-dessous.

FileComponent.cpp (menu Fichier)

Ce composant gère les commandes du menu Fichier (à l’exception de Exit), ainsi que l’événement DocumentTitleChanged .

ScriptComponent.cpp (menu Script)

Ce composant gère les commandes du menu Script , qui impliquent l’interaction avec le WebView en injectant du Code JavaScript, en publiant des WebMessages, en ajoutant des objets natifs à la page web ou en utilisant le protocole DevTools pour communiquer avec la page web.

ProcessComponent.cpp (menu Processus)

Ce composant gère les commandes du menu Processus , qui impliquent une interaction avec le processus du navigateur. Il gère également l’événement ProcessFailed , au cas où le processus du navigateur ou l’un de ses processus de rendu se bloque ou ne répond pas.

SettingsComponent.cpp (menu Paramètres)

Ce composant gère les commandes à partir du menu Paramètres . Ce composant est également chargé de copier les paramètres d’un ancien WebView lors de la création d’un nouveau. La plupart du code qui interagit avec l’interface ICoreWebView2Settings se trouve ici.

ViewComponent.cpp (menu Affichage)

Ce composant gère les commandes du menu Affichage et toutes les fonctionnalités liées au dimensionnement et à la visibilité du WebView. Lorsque la fenêtre d’application est redimensionnée, réduite ou restaurée, ViewComponent elle redimensionne, masque ou affiche webView en réponse. Il répond également à l’événement ZoomFactorChanged .

ScenarioWebMessage.cpp et ScenarioWebMessage.html (menu Scénario)

Le ScenarioWebMessage composant est créé lorsque vous sélectionnez l’élément de menu Scénario>de messagerie web . Ce composant implémente un exemple d’application avec un composant C++ et un composant HTML + JavaScript, qui communiquent entre eux en publiant et en recevant des messages de manière asynchrone.

Ce composant est décrit plus en détail dans ScenarioWebMessage (.html, .cpp et .h) ci-dessous.

ScenarioAddHostObject.cpp et ScenarioAddHostObject.html (menu Scénario)

Ce composant est créé lorsque vous sélectionnez l’élément de menuObjets hôtesdu scénario>. Il illustre la communication entre l’application native et la page web HTML au moyen de l’injection d’objets hôtes. L’interface de l’objet hôte est déclarée dans HostObjectSample.idlet l’objet lui-même est implémenté dans HostObjectSampleImpl.cpp.

Voir aussi :

• Appeler du code natif à partir d’un code côté web

Fonctions clés dans AppWindow.cpp

AppWindow.cpp implémente la fenêtre d’application en procédant comme suit :

1. Configurez tous les contrôles Win32.

2. Initialisez l’environnement WebView et le WebView.

3. Ajoutez des gestionnaires d’événements au WebView et créez tous les composants qui gèrent les différentes fonctionnalités de l’application.

La AppWindow classe gère les commandes du menu Fenêtre de l’exemple d’application. Voici quelques-unes des fonctions clés dans AppWindow.cpp.

InitializeWebView()

Dans AppWindow.cpp, la InitializeWebView() fonction crée l’environnement WebView2 à l’aide de CreateCoreWebView2EnvironmentWithOptions.

Pour voir ces appels d’API en action, inspectez le code suivant à partir de 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()

Après avoir créé l’environnement, nous créons le WebView à l’aide de CreateCoreWebView2Controller.

La OnCreateEnvironmentCompleted fonction de rappel est passée à CreateCoreWebView2EnvironmentWithOptions dans InitializeWebView(). Le rappel stocke le pointeur d’environnement, puis l’utilise pour créer un webView :

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()

La OnCreateCoreWebView2ControllerCompleted fonction de rappel est passée à CreateCoreWebView2Controller dans InitializeWebView(). Ce rappel :

• Initialise l’état lié à WebView.
• Inscrit certains gestionnaires d’événements.
• Crée les composants de l’application.

RegisterEventHandlers()

La RegisterEventHandlers fonction est appelée dans CreateCoreWebView2Controller. Il configure certains des gestionnaires d’événements utilisés par l’application et les ajoute à WebView.

Pour plus d’informations sur les gestionnaires d’événements dans WebView2, consultez ICoreWebView2.

Vous trouverez ci-dessous un extrait de code de RegisterEventHandlers(), où nous avons configuré un gestionnaire d’événements pour l’événement NewWindowRequested . Cet événement est déclenché lorsque JavaScript dans la page web appelle window.open(). ICoreWebView2NewWindowRequestedEventHandlercrée un nouveau AppWindow et transmet le WebView de la nouvelle fenêtre au navigateur, afin qu’il puisse le retourner à partir de l’appelwindow.open(). Contrairement à nos appels à CreateCoreWebView2EnvironmentWithOptions et CreateCoreWebView2Controller, au lieu de fournir une méthode pour le rappel, nous fournissons simplement une lambda C++ à ce moment-là :

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 et .h)

Les ScenarioWebMessage fichiers montrent comment l’hôte Win32 peut modifier le WebView, comment le WebView peut modifier l’hôte Win32 et comment le WebView peut se modifier lui-même en accédant aux informations de l’hôte Win32. Cette opération est effectuée de manière asynchrone.

Le ScenarioWebMessage composant est créé lorsque vous sélectionnez l’élément de menu Scénario>de messagerie web . Le ScenarioWebMessage composant implémente un exemple d’application avec un composant C++ et un composant HTML+JavaScript, qui communiquent entre eux en publiant et en recevant des messages de manière asynchrone :

Les sections suivantes illustrent le fonctionnement de chaque fonction discrète à l’aide de l’application WebView2APISample , puis expliquent comment implémenter cette fonctionnalité.

Tout d’abord, accédez à l’application web ScenarioWebMessage dans l’exemple d’application :

1. Ouvrez (exécutez) l’application WebView2APISample .

2. Dans le menu Scénario , sélectionnez Messagerie web.

   WebView affiche une page web intitulée Exemple de page WebMessage (ScenarioWebMessage.html) :

   

Pour explorer les ScenarioWebMessage fonctionnalités, vous pouvez suivre les instructions de la page ou suivre les étapes ci-dessous.

Publication de messages de l’hôte Win32 dans WebView

Les étapes suivantes montrent comment l’hôte Win32 peut modifier un WebView. Dans cet exemple, vous allez rendre le texte bleu :

1. Ouvrez l’exemple de page WebMessage (ScenarioWebMessage.html) comme décrit ci-dessus.

2. Dans le menu Script , sélectionnez Post Web Message JSON.

   Une boîte de dialogue contenant le code {"SetColor":"blue"} préécrit s’affiche.

3. Cliquez sur OK.

   Le texte de la section Publication de messages de la page passe du noir au bleu.

Mode de fonctionnement

1. Dans ScriptComponent.cpp, l’appel à PostWebMessageAsJson publie une entrée utilisateur dans l’application ScenarioMessage.html web :

   // 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. Dans l’application web, les écouteurs d’événements sont utilisés pour recevoir le message web et y répondre. L’extrait de code ci-dessous provient de ScenarioWebMessage.html. L’écouteur d’événements change la couleur du texte si l’argument est « SetColor » :

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

Réception de messages (du WebView à l’hôte Win32)

Les étapes suivantes montrent comment WebView peut modifier l’application hôte Win32 en modifiant le titre de l’application Win32 :

1. Ouvrez l’exemple de page WebMessage (ScenarioWebMessage.html) comme décrit ci-dessus.

2. Notez le titre de l’application WebView2APISample , affiché en haut à gauche de la fenêtre à côté de l’icône. Il s’agit initialement de WebView2APISample - Microsoft Edge WebView2.

3. Dans la section Réception de messages de la page, entrez un nouveau titre, puis cliquez sur le bouton Envoyer .

4. Notez le nouveau titre affiché dans la barre de titre de l’application WebView2APISample .

Mode de fonctionnement

1. Dans ScenarioWebMessage.html, window.chrome.webview.postMessage() envoie l’entrée utilisateur à l’application hôte :

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

2. Dans ScenarioWebMessage.cpp, nous utilisons add_WebMessageReceived pour inscrire le gestionnaire d’événements. Lorsque nous recevons l’événement, après avoir validé l’entrée, nous modifions le titre de la fenêtre d’application (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));
   

Messages aller-retour (du WebView à l’hôte vers le WebView)

Les étapes suivantes montrent comment WebView peut obtenir des informations à partir de l’hôte Win32 et se modifier lui-même en affichant la taille de l’application Win32.

1. Ouvrez l’exemple de page WebMessage (ScenarioWebMessage.html) comme décrit ci-dessus.

2. Dans la section Aller-retour de la page, cliquez sur le bouton GetWindowBounds .

   La zone de texte sous le bouton affiche les limites de l’application WebView2APISample .

Mode de fonctionnement

1. Lorsque l’utilisateur clique sur le bouton Obtenir les limites de la fenêtre, la GetWindowBounds fonction dans ScenarioWebMessage.html est appelée. GetWindowBounds appelle window.chrome.webview.postMessage() pour envoyer un message à l’application hôte :

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

2. Dans ScenarioWebMessage.cpp, nous utilisons add_WebMessageReceived pour inscrire le gestionnaire d’événements reçus. Après avoir validé l’entrée, le gestionnaire d’événements obtient des limites de fenêtre à partir de la fenêtre Application. PostWebMessageAsJson envoie les limites à l’application web :

   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. Dans ScenarioWebMessage.html, un écouteur d’événements répond au WindowBounds message et affiche les limites de la fenêtre :

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

Voir aussi

• Informations de référence sur l’API WebView2
• Prise en main de WebView2 dans les applications Win32