Introducción a WebView2 en aplicaciones Win32

  • Artículo

En este artículo, configurará las herramientas de desarrollo (si aún no lo ha hecho), aprenderá a agregar código WebView2 a un proyecto de aplicación Win32 y obtendrá información sobre los conceptos de WebView2 a lo largo del proceso.

Este tutorial comienza abriendo un proyecto de aplicación Win32 existente que tiene código WebView2 agregado. El proyecto usa el directorio Win32_GettingStarted (WebView2GettingStarted.sln) que forma parte del WebView2Samples repositorio. Para usar este artículo, haga lo siguiente:

  1. Clone o descargue el repositorio en la WebView2Samples unidad local.
  2. Ejecute el proyecto completado.
  3. Opcionalmente, elimine el código WebView2 de para restaurar la aplicación de HelloWebView.cpp línea base win32.
  4. Siga los pasos restantes de este artículo sobre cómo agregar y comprender el código WebView2.

En este tutorial no se crea un proyecto nuevo; no se usa una plantilla de proyecto en Visual Studio para crear un nuevo proyecto. En su lugar, comienza con el proyecto completado que está en el repositorio.

Proyecto completado

El proyecto de tutorial completado está disponible en el repositorio WebView2Samples :

  • Nombre de ejemplo: Win32_GettingStarted
  • Directorio del repositorio: Win32_GettingStarted
  • Archivo de solución: WebView2GettingStarted.sln

Paso 1: Instalación de Visual Studio

Este tutorial requiere Microsoft Visual Studio, no Microsoft Visual Studio Code.

  1. Si Microsoft Visual Studio aún no está instalado, en una nueva ventana o pestaña, vea Instalar Visual Studio en Configurar el entorno de desarrollo para WebView2. Siga los pasos para realizar una instalación predeterminada básica de Visual Studio.

A continuación, vuelva a esta página y continúe a continuación.

Paso 2: Instalación de un canal de versión preliminar de Microsoft Edge

  1. Si aún no está instalado, instale un canal de vista previa de Microsoft Edge. Para ello, en una nueva ventana o pestaña, consulte Instalación de un canal de vista previa de Microsoft Edge en Configuración del entorno de desarrollo para WebView2.

A continuación, continúe a continuación.

Paso 3: Clonación o descarga del repositorio WebView2Samples

El código que agregue en los pasos de este tutorial ya se ha agregado al repositorio de ejemplo. Un paso opcional a continuación le permite eliminar el código WebView2 de HelloWebView.cpp, para que pueda agregarlo usted mismo, si lo desea.

Para mantener este tutorial centrado en la codificación específica de WebView2, comenzamos desde un proyecto de Microsoft Visual Studio existente (WebView2GettingStarted) que se almacena en el WebView2Samples repositorio de GitHub. Agregaremos características de WebView2: en realidad, las características ya se han agregado, pero siga los pasos de configuración y explicación.

El proyecto de Visual Studio existente con el que empezaremos forma parte del código de ejemplo de una aplicación de escritorio win32 de C++ estándar. Para obtener información sobre el ejemplo de aplicación win32 estándar subyacente, en una nueva ventana o pestaña, vea Tutorial: Crear una aplicación de escritorio de Windows tradicional (C++).

Clone o descargue el repositorio WebView2Samples, como se indica a continuación:

  1. Si aún no lo ha hecho, clone o descargue el WebView2Samples repositorio. Para ello, en una ventana o pestaña independiente, siga los pasos descritos en Descargar el repositorio WebView2Samples o Clonar el repositorio WebView2Samples en Configurar el entorno de desarrollo para WebView2.

A continuación, vuelva aquí después de copiar el repositorio en la unidad local y continúe con los pasos que se indican a continuación.

Paso 4: Abrir la solución finalizada (WebView2GettingStarted.sln)

Comienza con un proyecto de escritorio básico que contiene una sola ventana principal. Comenzaremos con un proyecto de aplicación existente desde el repositorio WebView2Samples , que ha clonado o descargado de GitHub en el paso anterior.

  1. Abra Visual Studio (no Visual Studio Code).

  2. Abra WebView2GettingStarted.sln, que se encuentra en la ruta de acceso: <your repo directory>/WebView2Samples/GettingStartedGuides/Win32_GettingStarted/WebView2GettingStarted.sln.

Paso 5: Instalación de cargas de trabajo si se le solicita

Instalador de Visual Studio podría abrir y solicitarle que instale una carga de trabajo:

Instalador de Visual Studio solicitud para instalar la carga de trabajo

Si Instalador de Visual Studio le pide que instale una carga de trabajo:

  1. Seleccione la tarjeta Desarrollo de escritorio con C++ para que aparezca una marca de verificación.

  2. Si lo desea, seleccione también la tarjeta de desarrollo de escritorio de .NET (no necesaria para este tutorial), para que también aparezca una marca de verificación en esta tarjeta.

  3. Haga clic en el botón Instalar .

El instalador se cierra.

Redestinar proyectos

Es posible que aparezca el cuadro de diálogo Acciones de la solución de revisión de Visual Studio, que le pregunta si desea redestinar proyectos:

Cuadro de diálogo

  1. Si aparece ese cuadro de diálogo, puede hacer clic en Aceptar.

La solución WebView2GettingStarted se abre en Visual Studio. La solución contiene un único proyecto: WebView2GettingStarted, que contiene un único archivo .cpp: HelloWebView.cpp.

Paso 6: Visualización del proyecto abierto en Visual Studio

Si el proyecto WebView2GettingStarted no está abierto en Visual Studio, ábralo en Visual Studio:

  1. Abra WebView2GettingStarted.sln, que se encuentra en la ruta de acceso: <your repo directory>/WebView2Samples/GettingStartedGuides/Win32_GettingStarted/WebView2GettingStarted.sln.

  2. En Explorador de soluciones, expanda el nodo Archivos de origen y, a continuación, seleccione HelloWebView.cpp.

    HelloWebView.cpp se abre en el editor de código de Visual Studio.

    El archivo

En la captura de pantalla anterior se muestra algún código WebView2 (#include "WebView2.h"), que ya está presente en el archivo inmediatamente después de clonar (descargar) el repositorio.

Establecer la solución para usar el SDK de Win10 y el conjunto de herramientas de Visual Studio

Este paso solo es necesario para las versiones anteriores de Visual Studio, por lo que es probable que pueda omitirlo. Pero puede echar un vistazo a esta interfaz de usuario en cualquier caso:

  1. En el Explorador de soluciones de Visual Studio, haga clic con el botón derecho en el proyectoWebView2GettingStarted (no en la solución con el mismo nombre) y, a continuación, seleccione Propiedades.

  2. Seleccione Propiedades> de configuraciónGeneral y, a continuación, (si aún no es la configuración correcta):

    1. Modifique la versión de Windows SDK para usar el SDK de Win10.

    2. Modifique el conjunto de herramientas de la plataforma para usar un conjunto de herramientas de Visual Studio.

    Estas modificaciones solo son necesarias para las versiones anteriores de Visual Studio.

    Esta es una captura de pantalla de Visual Studio 2017 que muestra algunos valores válidos:

    En Visual Studio 2017, establezca Windows SDK Version en 10 y Platform Toolset en Visual Studio.

    A continuación se muestra una captura de pantalla de Visual Studio 2022; los valores ya eran correctos, por lo que no era necesario ningún cambio:

    En Visual Studio 2022, la versión de Windows SDK ya es 10 y el conjunto de herramientas de la plataforma ya es Visual Studio.

Continúe con los pasos siguientes.

Paso 7: Compilación y ejecución del proyecto terminado del repositorio

En este momento, el entorno de desarrollo está configurado para ejecutar aplicaciones Win32 WebView2 en modo de depuración en Visual Studio y agregar características de WebView2.

Para confirmar que el sistema está configurado para la codificación WebView2, ejecute el proyecto en modo de depuración, como se indica a continuación:

  1. Seleccione Depurar>Iniciar depuración (F5) para compilar y ejecutar el proyecto.

    La aplicación de ejemplo abre primero una ventana emergente, que muestra la dirección URL que se cargará, junto con un botón Aceptar :

    La aplicación de ejemplo muestra una ventana emergente con la dirección URL y el botón Aceptar sobre una ventana WebView2 vacía

  2. Haga clic en el botón Aceptar para descartar la ventana emergente y continuar con la dirección URL:

    La ventana WebView2 ahora muestra el contenido de la página web: el sitio web de Bing, http://www.bing.com.

    La aplicación de ejemplo ahora muestra el sitio web de Bing.

  3. Cierre la ventana de ejemplo de WebView .

Paso 8: Actualizar o instalar las bibliotecas de implementación de Windows (WIL)

WIL ya está instalado en el proyecto en el repositorio, pero siga estos pasos para obtener información sobre la configuración y comprobar la configuración del proyecto.

En un momento, instalará las bibliotecas de implementación de Windows (WIL): una biblioteca de C++ solo de encabezado para facilitar la vida a los desarrolladores de Windows a través de interfaces de C++ legibles y seguras para tipos para patrones de codificación COM de Windows. Instale este paquete Microsoft.Windows.ImplementationLibrary a través de Explorador de soluciones en Visual Studio para el proyecto.

En este tutorial también se usa Windows Runtime biblioteca de plantillas de C++ (WRL): una biblioteca de plantillas que proporciona una manera de crear y usar componentes de Windows Runtime de bajo nivel.

Instale las bibliotecas de implementación de Windows (WIL) desde Visual Studio, como se indica a continuación:

  1. En Visual Studio, asegúrese de que la solución WebView2GettingStarted sigue abierta.

  2. En Explorador de soluciones, haga clic con el botón derecho en el nodo de proyecto WebView2GettingStarted (no en el nodo de solución) y, a continuación, seleccione Administrar paquetes NuGet.

    Administración de paquetes NuGet

  3. En la ventana NuGet , haga clic en la pestaña Examinar .

  4. En la barra de búsqueda de la esquina superior izquierda, escriba Microsoft.Windows.ImplementationLibrary. O bien, copie y pegue el bloque de código de una sola línea siguiente. A continuación, seleccione Microsoft.Windows.ImplementationLibrary.

    Microsoft.Windows.ImplementationLibrary

    Selección del paquete Microsoft.Windows.ImplementationLibrary en el Administrador de paquetes NuGet en Visual Studio:

    Selección del paquete

    Para hacer zoom, haga clic con el botón derecho en >Abrir imagen en la nueva pestaña.

    Si no ve Microsoft.Windows.ImplementationLibrary en la lista, compruebe la ubicación de origen de NuGet, como se indica a continuación:

    1. SeleccioneOpciones de>herramientas>Orígenes de paquetes del Administrador de> paquetes NuGet.

    2. Asegúrese de que en Orígenes de paquete haya un origen nuget.com que apunte a https://api.nuget.org/v3/index.json.

    3. Si Los orígenes del paquete no contienen ese origen, escriba nuget.com en el cuadro de texto Nombre y https://api.nuget.org/v3/index.json en el cuadro de texto Origen . A continuación, haga clic en Actualizar y Aceptar.

  5. Hacia la esquina superior derecha, haga clic en el botón Instalar (o en el botón Actualizar ). NuGet descarga la Biblioteca de implementación de Windows (WIL) en el equipo.

Las bibliotecas de implementación de Windows (WIL) ya están instaladas, junto con Windows Runtime biblioteca de plantillas de C++ (WRL).

Continúe con los pasos siguientes.

Paso 9: Actualización o instalación del SDK de WebView2

El proyecto finalizado en el repositorio ya tiene instalada una versión del SDK de WebView2 para el proyecto. Si estaba creando un proyecto desde cero empezando con una plantilla de proyecto win32, tendría que instalar el paquete del SDK de WebView para el proyecto, como se describe aquí.

A continuación, actualice (o instale) el SDK de WebView2. El SDK de WebView2 incluye el control WebView2, con tecnología de Microsoft Edge, y permite insertar tecnologías web (HTML, CSS y JavaScript) en las aplicaciones nativas.

Actualice (o instale) el SDK de WebView2, como se indica a continuación:

  1. En Visual Studio, asegúrese de que la solución WebView2GettingStarted está abierta, como se describió anteriormente.

  2. En Explorador de soluciones, haga clic con el botón derecho en el nodo del proyecto WebView2GettingStarted (no en el nodo de solución WebView2GettingStarted) y, a continuación, seleccione Administrar paquetes NuGet.

    La pestaña y el panel Administrador de paquetes NuGet se abre en Visual Studio.

    Administración de paquetes NuGet

  3. Si el SDK de WebView2 ya está instalado para el proyecto, como sucede con el proyecto de repositorio, en la ventana NuGet , haga clic en la pestaña Instalado o en la pestaña Actualizar .

  4. O bien, si va a instalar el SDK de WebView2 en un nuevo proyecto, haga clic en la pestaña Examinar .

  5. A la derecha de la barra de búsqueda, desactive la casilla Incluir versión preliminar (a menos que sepa que desea una versión preliminar del SDK).

  6. En la barra de búsqueda de la esquina superior izquierda, escriba Microsoft.Web.WebView2. O bien, copie y pegue el bloque de código de una sola línea siguiente. A continuación, seleccione Microsoft.Web.WebView2.

    Microsoft.Web.WebView2

  7. En la ventana del lado derecho, haga clic en Actualizar (o Instalar). NuGet descarga el SDK de WebView2 en la máquina.

    Selección del paquete

  8. Cierre la pestaña Administrador de paquetes NuGet .

El SDK de WebView2 ya está actualizado o instalado, por lo que el entorno de desarrollo ahora está configurado para agregar características de WebView2 a la aplicación Win32.

Continúe con los pasos siguientes.

Paso 10: Opcionalmente, elimine el código WebView2 de HelloWebView.cpp.

Si desea seguir los pasos siguientes para agregar el código WebView2, elimine los dos bloques de código WebView2, como se indica a HelloWebView.cpp continuación:

  1. En HelloWebView.cpp, elimine el código siguiente:

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

  2. En HelloWebView.cpp, elimine las líneas de código que están entre estas dos líneas de comentario, pero mantenga estas dos líneas de comentario:

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

Paso 11: Incluir el encabezado WebView2.h en HelloWebView.cpp

Anteriormente, hicimos lo siguiente:

  • Clonado o descargado el repositorio de ejemplos, incluido un proyecto existente que contiene una aplicación de escritorio estándar de Windows de C++.
  • Se ha actualizado o instalado la Biblioteca de implementación de Windows (WIL).
  • Se ha actualizado o instalado el SDK de WebView2 para agregar características de WebView2.
  • Opcionalmente, se eliminó el código WebView2 de HelloWebView.cpp.

A continuación, agregue características de WebView2 a la aplicación, como se indica a continuación:

  1. En Visual Studio, asegúrese de que la solución WebView2GettingStarted está abierta.

  2. En Explorador de soluciones, expanda Archivos de origen y, a continuación, haga clic en HelloWebView.cpp.

  3. Si el código siguiente aún no está presente, pegue el código siguiente en HelloWebView.cpp, después de la última #include línea:

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

    Asegúrese de que la sección tenga el include siguiente aspecto:

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

  4. Tenga en cuenta los encabezados usados:

    • wrl.h- Windows Runtime biblioteca de plantillas de C++ (WRL): biblioteca de plantillas que proporciona una manera de crear y usar componentes de Windows Runtime de bajo nivel.

    • wil/com.h - Bibliotecas de implementación de Windows (WIL): una biblioteca de C++ de solo encabezado para facilitar la vida a los desarrolladores de Windows a través de interfaces de C++ legibles y seguras para tipos para patrones de codificación comunes de Windows.

    • WebView2.h - El control WebView2 cuenta con tecnología de Microsoft Edge y le permite insertar tecnologías web (HTML, CSS y JavaScript) en las aplicaciones nativas.

  5. SeleccioneGuardar todo en archivo> (Ctrl+Mayús+S) para guardar el proyecto.

El archivo y el proyecto de código fuente están listos para usarse y compilarse en la API WebView2.

Continúe con los pasos siguientes.

Paso 12: Compilación de la aplicación de ejemplo vacía

  1. Seleccione Depurar>Iniciar depuración (F5) para compilar y ejecutar el proyecto.

    La aplicación de ejemplo se abre y muestra una ventana vacía:

    La aplicación de ejemplo muestra una ventana vacía

    Ahora tiene una aplicación de escritorio Win32 vacía y en ejecución con potenciales funcionalidades de WebView2.

  2. Cierre la ventana de la aplicación de ejemplo WebView .

Continúe con los pasos siguientes.

Paso 13: Agregar un control WebView2 en la ventana primaria

A continuación, agregue un control WebView2 a la ventana principal.

Usará el CreateCoreWebView2Environment método para configurar el entorno y localizar el explorador Microsoft Edge que alimenta el control.

Tenga en cuenta que si desea invalidar los siguientes valores predeterminados, en su lugar puede usar la versión "con opciones" de ese método, CreateCoreWebView2EnvironmentWithOptions:

  • Ubicación del explorador
  • Carpeta de datos de usuario
  • Marcas de explorador

Una vez completado el CreateCoreWebView2Environment método, hará lo siguiente:

  • Ejecute el ICoreWebView2Environment::CreateCoreWebView2Controller método dentro de la devolución de ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler llamada.

  • Ejecute el ICoreWebView2Controller::get_CoreWebView2 método para obtener el control WebView2 asociado.

Ahora, para hacer lo anterior, en la devolución de llamada, hará lo siguiente:

  • Establezca unas cuantas opciones más.
  • Cambie el tamaño del control WebView2 para rellenar el 100 % de la ventana primaria.
  • A continuación, muestre el sitio web de Bing.com en el control WebView2 de la aplicación Win32.

  1. En HelloWebView.cpp, busque el código siguiente:

       UpdateWindow(hWnd);

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

  2. Si el código siguiente aún no está presente, pegue el código siguiente en HelloWebView.cpp. Pegue el código entre las líneas // <-- WebView2 sample code starts here --> y // <-- 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. SeleccioneGuardar todo en archivo> (Ctrl+Mayús+S) para guardar el proyecto.

Compilación de la aplicación de ejemplo de Bing

  1. Pulse F5 para compilar y ejecutar el proyecto.

    Si comenzó eliminando todo el código WebView2, en este momento, ahora tiene una ventana Win32 que se rellena con un control WebView2 que se rellena con contenido de página web:

    Ventana de Bing

  2. Cierre la ventana de la aplicación de ejemplo WebView .

    O bien, si conserva todo el código WebView2, en este momento, se abre una ventana emergente WebView2 con un cuadro de diálogo de alerta de Bing, a través de una ventana WebView2 vacía. Haga clic en el botón Aceptar para cerrar el cuadro de diálogo de Bing. Ahora, el contenido de página de Bing rellena el control WebView2:

    La aplicación de ejemplo muestra una ventana inicialmente vacía con un cuadro de diálogo de Bing

  3. Si la ventana de la aplicación de ejemplo WebView está abierta, ciérrela.

Continúe con los pasos siguientes.

Paso 14: Eventos de navegación

En el paso anterior, se ha descrito cómo navegar a la dirección URL mediante el ICoreWebView2::Navigate método . Durante la navegación, WebView2 desencadena una secuencia de eventos, que el host puede escuchar:

  1. NavigationStarting

  2. SourceChanged

  3. ContentLoading

  4. HistoryChanged

  5. NavigationCompleted

    Si desea obtener más información ahora, en una nueva ventana o pestaña, consulte Eventos de navegación para aplicaciones WebView2.

Eventos de navegación

En los casos de error, se pueden producir uno o varios de los siguientes eventos, en función de si la navegación continuó hasta una página web de error:

  • SourceChanged
  • ContentLoading
  • HistoryChanged

Si se produce una redirección HTTP, hay varios NavigationStarting eventos en una fila.

Como ejemplo de uso de eventos de navegación, registre un controlador para el NavigationStarting evento, para cancelar las solicitudes que no sean https (no seguras), como se indica a continuación.

  1. Si aún no está presente, pegue el código siguiente en HelloWebView.cpp, debajo del código del paso 3:

    // 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);

Ahora la aplicación no abre ningún sitio que no sea https. Puede usar un mecanismo similar para realizar otras tareas, como restringir la navegación a dentro de su propio dominio.

Continúe con los pasos siguientes.

Paso 15: Scripting

Use aplicaciones host para insertar código JavaScript en controles WebView2 en tiempo de ejecución. Puede realizar una tarea en WebView2 para ejecutar JavaScript arbitrario o agregar scripts de inicialización. JavaScript insertado se aplica a todos los nuevos documentos de nivel superior y a los marcos secundarios hasta que se quita JavaScript.

El Código JavaScript insertado se ejecuta con un tiempo específico:

  • Ejecútelo después de la creación del objeto global.
  • Ejecútelo antes de que se ejecute cualquier otro script incluido en el documento HTML.

  1. Si el código siguiente aún no está presente, pegue el código siguiente en 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. SeleccioneGuardar todo en archivo> (Ctrl+Mayús+S) para guardar el proyecto.

    Ahora, WebView2 inmoviliza Object y devuelve el documento de página una vez.

Si el código debe ejecutarse en orden, use devoluciones de llamada.

Las API de inyección de scripts (y otras API de WebView2) son asincrónicas. Por lo tanto, si el código debe ejecutarse en un orden específico, debe usar devoluciones de llamada.

Continúe con los pasos siguientes.

Paso 16: Comunicación entre el host y el contenido web

El host y el contenido web también pueden comunicarse entre sí a través del postMessage método . El contenido web que se ejecuta dentro de un control WebView2 puede publicar en el host a través del window.chrome.webview.postMessage método y el mensaje lo controla cualquier controlador de eventos registrado ICoreWebView2WebMessageReceivedEventHandler en el host.

De forma similar, el host puede enviar mensajes al contenido web a través del ICoreWebView2::PostWebMessageAsString método o ICoreWebView2::PostWebMessageAsJSON y el mensaje lo capturan los controladores que se agregan desde el window.chrome.webview.addEventListener agente de escucha. Este mecanismo de comunicación permite que el contenido web use funcionalidades nativas pasando mensajes para pedir al host que ejecute api nativas.

Como ejemplo para comprender el mecanismo, los pasos siguientes se producen al intentar generar la dirección URL del documento en WebView2:

  1. El host registra un controlador para devolver el mensaje recibido al contenido web.

  2. El host inserta un script en el contenido web que registra un controlador para imprimir el mensaje desde el host.

  3. El host inserta un script en el contenido web que envía la dirección URL al host.

  4. El controlador del host se desencadena y devuelve el mensaje (la dirección URL) al contenido web.

  5. El controlador del contenido web se desencadena e imprime el mensaje desde el host (la dirección URL).

Haga que la aplicación host y el contenido web se comuniquen a través de postMessage, como se indica a continuación:

  1. Si aún no está presente, pegue el código siguiente en 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. SeleccioneGuardar todo en archivo> (Ctrl+Mayús+S) para guardar el proyecto.

  3. Pulse F5 para compilar y ejecutar el proyecto.

    La aplicación de ejemplo abre primero una ventana emergente, que muestra la dirección URL que se cargará, junto con un botón Aceptar :

    La aplicación de ejemplo muestra una ventana emergente con la dirección URL y el botón Aceptar sobre una ventana WebView2 vacía

  4. Haga clic en el botón Aceptar para descartar la ventana emergente y continuar con la dirección URL:

    La ventana WebView2 ahora muestra el contenido de la página web: el sitio web de Bing, http://www.bing.com.

    La aplicación de ejemplo ahora muestra el sitio web de Bing.

  5. Cuando esté listo, cierre la ventana de ejemplo de WebView .

Enhorabuena, ha creado una aplicación Win32 que hospeda y usa el control WebView2. El entorno de desarrollo ya está configurado para el desarrollo de aplicaciones WebView2, con el fin de incluir el control WebView2 en las aplicaciones Win32. También ha tenido una introducción a los conceptos de programación de WebView2.

Referencia de API

Vea también