Información general sobre las características y las API de WebView2

  • Artículo

La inserción del control WebView2 en la aplicación proporciona a la aplicación acceso a varios métodos y propiedades que se proporcionan a través de las clases o interfaces de WebView2. WebView2 tiene cientos de API que proporcionan un amplio conjunto de funcionalidades, que van desde la mejora de las funcionalidades de plataforma nativa de la aplicación hasta la habilitación de la aplicación para modificar las experiencias del explorador. En este artículo se proporciona una agrupación de alto nivel de las API de WebView2 para ayudarle a comprender las distintas cosas que puede hacer con WebView2.

Introducción a las áreas de características de nivel superior

Al hospedar el control WebView2, la aplicación tiene acceso a las siguientes características y API:

Área de característica Objetivo
Clases principales: Entorno, Controlador y Núcleo Las CoreWebView2Environmentclases , CoreWebView2Controllery CoreWebView2 (o interfaces equivalentes) funcionan juntas para que la aplicación pueda hospedar un control de explorador WebView2 y acceder a sus características del explorador. Estas clases grandes exponen una amplia gama de API a las que puede acceder la aplicación host para proporcionar las siguientes categorías de características relacionadas con el explorador para los usuarios.
Interoperabilidad web/nativa Insertar contenido web en aplicaciones nativas. Comunicarse entre código nativo y código web mediante mensajes simples, código JavaScript y objetos nativos.
Características del explorador El control WebView2 proporciona a la aplicación acceso a muchas características del explorador. Puede modificar estas características del explorador y activarlas o desactivarlas.
Administración de procesos Obtenga información sobre cómo ejecutar procesos WebView2, salir de procesos y procesos con errores, para que la aplicación pueda tomar medidas en consecuencia.
Navegar a páginas y administrar el contenido cargado Administre la navegación a páginas web y administre el contenido que se carga en las páginas web.
Iframes Inserte otras páginas web en su propia página web. Detecte cuándo se crean páginas web incrustadas, detecte cuándo navegan las páginas web incrustadas y, opcionalmente, omita las opciones de marco X.
Autenticación La aplicación puede controlar la autenticación básica mediante el control WebView2. La autenticación básica es un enfoque de autenticación específico que forma parte del protocolo HTTP.
Representación de WebView2 en aplicaciones que no son de marco Use estas API para configurar el sistema de representación WebView2 si la aplicación host no usa un marco de interfaz de usuario. Esta configuración de representación controla cómo WebView2 representa la salida en la aplicación host y cómo WebView2 controla la entrada, el foco y la accesibilidad.
Representación de WebView2 mediante Composition Para la representación webView2 basada en composición, use CoreWebView2Environment para crear un CoreWebView2CompositionControllerobjeto . CoreWebView2CompositionController proporciona las mismas API que CoreWebView2Controller, pero también incluye las API para la representación basada en composición.
Opciones de entorno Datos de usuario: administre la carpeta de datos de usuario (UDF), que es una carpeta en el equipo del usuario. La UDF contiene datos relacionados con la aplicación host y WebView2. Las aplicaciones WebView2 usan carpetas de datos de usuario para almacenar datos del explorador, como cookies, permisos y recursos almacenados en caché. Administrar varios perfiles en una sola UDF.
La selección en tiempo de ejecución admite pruebas de versión preliminar y autohospedaje. Puede especificar un orden de búsqueda para los canales de vista previa del explorador y especificar qué canales de vista previa del explorador se buscan.
Rendimiento y depuración Analice y depure el rendimiento, controle eventos relacionados con el rendimiento y administre el uso de memoria para aumentar la capacidad de respuesta de la aplicación.
Protocolo Chrome DevTools (CDP) Instrumentar, inspeccionar, depurar y generar perfiles de exploradores basados en Chromium. El Protocolo Chrome DevTools (CDP) es la base de Microsoft Edge DevTools. Use el protocolo Chrome DevTools para las características que no se implementan en la plataforma WebView2.

En esta página solo se enumeran las API que están en los SDK de versión; no enumera las API experimentales ni las API estables que aún no están disponibles en los SDK de versión. Para obtener una lista completa de las API, incluidas las API experimentales, consulte notas de la versión del SDK de WebView2.

Clases principales: Entorno, Controlador y Núcleo

Las CoreWebView2Environmentclases , CoreWebView2Controllery CoreWebView2 (o interfaces equivalentes) funcionan juntas para que la aplicación pueda hospedar un control de explorador WebView2 y acceder a sus características del explorador. Estas tres clases grandes exponen una amplia gama de API a las que la aplicación host puede acceder para proporcionar muchas categorías de características relacionadas con el explorador para los usuarios.

  • La CoreWebView2Environment clase representa un grupo de controles WebView2 que comparten el mismo proceso del explorador WebView2, la carpeta de datos de usuario y los procesos del representador. A partir de esta CoreWebView2Environment clase, creará pares de CoreWebView2Controller instancias e CoreWebView2 .
  • La CoreWebView2Controller clase es responsable de la funcionalidad relacionada con el hospedaje, como el foco de ventana, la visibilidad, el tamaño y la entrada, donde la aplicación hospeda el control WebView2.
  • La CoreWebView2 clase es para los elementos específicos de la web del control WebView2, incluidas las redes, la navegación, el script y el análisis y la representación de HTML.

Vea también:

Interoperabilidad web/nativa

El control WebView2 de Microsoft Edge permite insertar contenido web en aplicaciones nativas. Puede comunicarse entre código nativo y código web mediante mensajes simples, código JavaScript y objetos nativos. A continuación se muestran las API principales para la comunicación entre código web y nativo.

Subsecciones a continuación:

Casos de uso comunes para la interoperabilidad web/nativa:

  • Actualice el título de la ventana de host nativa después de navegar a otro sitio web.
  • Enviar un objeto de cámara nativo y usar sus métodos desde una aplicación web.
  • Ejecute un archivo JavaScript dedicado en el lado web de una aplicación.

Vea también:

Uso compartido de objetos web o host

WebView2 permite que los objetos definidos en código nativo se pasen al código del lado web de la aplicación. Los objetos host son objetos definidos en código nativo que elija pasar al código del lado web de la aplicación.

Los objetos host se pueden proyectar en JavaScript, de modo que pueda llamar a métodos de objetos nativos (u otras API) desde el código del lado web de la aplicación. Por ejemplo, la aplicación puede llamar a estas API como resultado de la interacción del usuario en el lado web de la aplicación. De este modo, no es necesario volver a implementar las API de los objetos nativos, como métodos o propiedades, en el código del lado web.

Ejecución de scripts

Permite que la aplicación host agregue código JavaScript en el contenido web dentro del control WebView2.

Mensajería web

La aplicación puede enviar mensajes al contenido web que está dentro del control WebView2 y recibir mensajes de ese contenido web. Los mensajes se envían como cadenas u objetos JSON.

Cuadros de diálogo de script

Al hospedar WebView2, la aplicación puede administrar diferentes diálogos de JavaScript, suprimirlos o reemplazarlos por diálogos personalizados.

Búfer compartido

La API SharedBuffer admite el uso compartido de búferes entre el proceso de la aplicación host WebView2 y el proceso del representador de WebView2, en función de la memoria compartida del sistema operativo.

Características del explorador

El control WebView2 proporciona a la aplicación acceso a muchas características del explorador. Puede modificar estas características del explorador y activarlas o desactivarlas.

Subsecciones a continuación:

Impresión

Puede imprimir una página web en una impresora, un archivo PDF o un flujo PDF configurando la configuración de impresión personalizada.

Vea también:

Cookies

Puede usar cookies en WebView2 para administrar sesiones de usuario, almacenar preferencias de personalización de usuario y realizar un seguimiento del comportamiento del usuario.

Vea también:

Captura de imagen

Al hospedar WebView2, la aplicación puede capturar capturas de pantalla e indicar qué formato usar para guardar la imagen.

Descargas

La aplicación puede administrar la experiencia de descarga en WebView2. La aplicación puede:

  • Permitir o bloquear descargas basadas en metadatos diferentes.
  • Cambie la ubicación de descarga.
  • Configurar una interfaz de usuario de descarga personalizada.
  • Personalice la interfaz de usuario predeterminada.

General:

Modificar la experiencia predeterminada:

Experiencia de descarga personalizada:

Permissions

Es posible que distintas páginas web le pidan permisos para acceder a algunos recursos con privilegios, como el sensor de geolocalización, la cámara y el micrófono. La aplicación host puede responder mediante programación a las solicitudes de permisos y puede reemplazar la interfaz de usuario de permisos predeterminada por su propia interfaz de usuario.

Menús contextuales

El control WebView2 proporciona un menú contextual predeterminado (menú contextual) que puede personalizar o deshabilitar, y también puede crear su propio menú contextual.

Vea también:

Barra de estado

Una barra de estado se encuentra en la parte inferior izquierda de la página y muestra el estado de la página web que se muestra. En WebView2 puede habilitar o deshabilitar la barra de estado, obtener el texto de la barra de estado y averiguar cuándo ha cambiado el texto de la barra de estado.

Agente de usuario

El agente de usuario es una cadena que representa la identidad del programa en nombre del usuario, como el nombre del explorador. En WebView2, puede establecer el agente de usuario.

Vea también:

Autorrelleno

La aplicación puede controlar de forma independiente si la funcionalidad de autorrellenar del explorador está habilitada para obtener información general o para contraseñas.

Audio

La aplicación puede silenciar y desactivar todo el audio, y averiguar cuándo se reproduce el audio.

Pruebas de posicionamiento de clics del mouse en regiones

Proporciona resultados de pruebas de posicionamiento en las regiones que contiene Un WebView2. Útil para aplicaciones hospedadas visualmente que quieren controlar eventos del mouse en el área no cliente de la ventana WebView2.

Navegación de gestos de deslizar el dedo

Al hospedar el control WebView2, la aplicación puede habilitar o deshabilitar la navegación por gestos de deslizamiento en dispositivos táctiles habilitados para entrada. Este gesto permite a los usuarios finales:

  • Deslice el dedo hacia la izquierda o la derecha (deslice horizontalmente) para ir a la página anterior o siguiente del historial de navegación.
  • Extraiga para actualizar (deslizar verticalmente) la página actual.

Esta característica está deshabilitada actualmente de forma predeterminada en el explorador. Para habilitar esta característica en WebView2, establezca la AdditionalBrowserArguments propiedad y especifique el --pull-to-refresh modificador .

Habilitar o deshabilitar el explorador que responde a las teclas de aceleración (teclas de método abreviado)

ICoreWebView2AcceleratorKeyPressedEventArgs tiene una IsBrowserAcceleratorKeyEnabled propiedad que le permite controlar si el explorador controla las teclas de aceleración (teclas de método abreviado), como Ctrl+P o F3.

Vea también:

Fullscreen

En WebView2, puede averiguar cuándo un elemento HTML entra o sale de la vista de pantalla completa.

Barra de herramientas de PDF

En el visor de PDF del explorador, hay una barra de herramientas específica de PDF en la parte superior. En WebView2, puede ocultar algunos de los elementos de la barra de herramientas del visor de PDF.

Creación de temas

En WebView2, puede personalizar el tema de color como sistema, claro u oscuro.

Idioma

La Language propiedad establece el idioma de presentación predeterminado para WebView2 que se aplica a la interfaz de usuario del explorador (como menús contextuales y diálogos), junto con la configuración del accept-language encabezado HTTP que WebView2 envía a los sitios web.

La ScriptLocale propiedad permite a la aplicación host establecer la configuración regional predeterminada para todas las Intl API de JavaScript y otras API de JavaScript que dependen de ella, como Intl.DateTimeFormat(), lo que afecta al formato de cadena en formatos de fecha y hora.

Nueva ventana

WebView2 proporciona funcionalidad para controlar la función window.open()de JavaScript .

Cerrar ventana

WebView2 proporciona funcionalidad para controlar la función window.close()de JavaScript .

Título del documento

La aplicación puede detectar cuándo ha cambiado el título del documento de nivel superior actual.

Favicon

En WebView2, puede establecer un Icono de favoritos para un sitio web o recibir una notificación cuando cambie.

Seguridad y privacidad

Seguimiento de la prevención

La prevención de seguimiento permite a la aplicación host controlar el nivel de prevención de seguimiento del control WebView2 asociado al perfil de usuario.

SmartScreen

Microsoft Defender SmartScreen ("SmartScreen") está habilitado de forma predeterminada. La IsReputationCheckingRequired propiedad controla si SmartScreen está habilitado.

Si no deshabilita SmartScreen, debe notificar a todos los usuarios que el software incluye Microsoft Defender SmartScreen, y recopila y envía la información del usuario a Microsoft, tal como se indica en la Declaración de privacidad de Microsoft y en la Notas del producto de privacidad de Microsoft Edge.

Vea también:

Informes de bloqueo personalizados

Si algún proceso WebView2 se bloquea, se crean uno o varios archivos de minivolcado y se envían a Microsoft para su diagnóstico. Use esta API para personalizar los informes de bloqueo al ejecutar diagnósticos y realizar análisis.

  • Para evitar que se envíen volcados de memoria a Microsoft, establezca la IsCustomCrashReportingEnabled propiedad falseen .
  • Para buscar volcados de memoria y personalizarlos, use la CrashDumpFolderPath propiedad .

Vea también:

Extensiones del explorador

La aplicación puede insertar un control WebView2 que use extensiones de explorador (complementos). Una extensión de Microsoft Edge es una aplicación pequeña que los desarrolladores usan para agregar o modificar características de Microsoft Edge para mejorar la experiencia de exploración de un usuario.

Vea también:

Administración de procesos

Obtenga información sobre cómo ejecutar procesos de WebView2, salir de procesos y procesos con errores, para que la aplicación pueda tomar medidas en consecuencia.

Subsecciones a continuación:

Información del proceso de marco

Frame Process Info API, incluido GetProcessExtendedInfos, proporciona una colección de instantáneas de todos los fotogramas que se ejecutan activamente en el proceso del representador asociado. Esta API permite que la aplicación detecte qué parte de WebView2 consume recursos, como memoria o uso de CPU.

Navegar a páginas y administrar el contenido cargado

A través del control WebView2, la aplicación puede administrar la navegación a páginas web y administrar el contenido cargado en las páginas web.

Subsecciones a continuación:

Administración del contenido cargado en WebView2

Estas API cargan, detienen la carga y recargan contenido en WebView2. El contenido que se carga puede ser:

  • Contenido de una dirección URL.
  • Cadena de HTML.
  • Contenido local a través del nombre de host virtual a la asignación de carpetas locales.
  • Contenido de una solicitud de red construida.

Vea también:

Los métodos de historial permiten la navegación hacia atrás y hacia delante en WebView2, y los eventos de historial proporcionan información sobre los cambios en el historial y en el origen actual de WebView2.

NavigationKind obtiene el tipo de navegación de cada navegación, como Back/Forward, Reload o navigation to a new document.

Bloquear navegación no deseada

El NavigationStarting evento permite que la aplicación cancele la navegación a direcciones URL especificadas en WebView2, incluidos los fotogramas.

Con NavigationStarting y los demás eventos de navegación, se puede informar a la aplicación del estado de navegación en WebView2. Una navegación es el proceso para cargar una nueva dirección URL.

Vea también:

Administración de solicitudes de red en WebView2

El WebResourceRequested evento permite a la aplicación interceptar e invalidar todas las solicitudes de red en WebView2. El WebResourceResponseReceived evento permite a la aplicación supervisar la solicitud enviada a y la respuesta recibida de la red.

Vea también:

Registro de esquema personalizado

CustomSchemeRegistration permite el registro de esquemas personalizados en WebView2 para que la aplicación pueda controlar el WebResourceRequested evento de las solicitudes a esas direcciones URL de esquema personalizado y navegar por WebView2 a dichas direcciones URL.

Certificados de cliente

En WebView2, puede usar la API de certificado de cliente para seleccionar el certificado de cliente en el nivel de aplicación. Esta API le permite:

  • Mostrar una interfaz de usuario al usuario, si lo desea.
  • Reemplace el símbolo del diálogo de certificado de cliente predeterminado.
  • Consulte mediante programación los certificados.
  • Seleccione un certificado de la lista para responder al servidor, cuando WebView2 realiza una solicitud a un servidor HTTP que necesita un certificado de cliente para la autenticación HTTP.

Certificados de servidor

En WebView2, puede usar server certificate API para confiar en el certificado TLS del servidor en el nivel de aplicación. De este modo, la aplicación host puede representar la página sin preguntar al usuario sobre el error de TLS, o bien la aplicación host puede cancelar automáticamente la solicitud.

Inicio de un esquema de URI externo

Inicie un esquema de URI que esté registrado con el sistema operativo.

Iframes

Los iframes le permiten insertar otras páginas web en su propia página web. En WebView2, puede:

  • Averigüe cuándo se crean los iframes.
  • Averigüe cuándo navegan los iframes.
  • Permitir la omisión de opciones de marco X.

Vea también:

Autenticación

La aplicación puede controlar la autenticación básica mediante el control WebView2. La autenticación básica es un enfoque de autenticación específico que forma parte del protocolo HTTP.

Vea también:

Representación de WebView2 en aplicaciones que no son de marco

Use estas API para configurar el sistema de representación WebView2 si la aplicación host no usa un marco de interfaz de usuario. Esta configuración de representación controla cómo WebView2 representa la salida en la aplicación host y cómo WebView2 controla la entrada, el foco y la accesibilidad.

Cuándo usar estas API

  • Marco de interfaz de usuario: si usa un marco de interfaz de usuario para la aplicación, debe usar el elemento WebView2 proporcionado por ese marco de interfaz de usuario, en lugar de usar estas API.

  • Sin marco de interfaz de usuario y no usando Composition : si no usa un marco de interfaz de usuario para la aplicación (por ejemplo, si usa win32 puro directamente) o si el marco de interfaz de usuario no tiene un elemento WebView2, deberá crearlo CoreWebView2Controller y representarlo en la aplicación, mediante estas API en esta sección.

  • Sin marco de interfaz de usuario y con Composition : si la interfaz de usuario de la aplicación se compila con DirectComposition o Windows.UI.Composition, debe usar CoreWebView2CompositionController en lugar de usar estas API; consulte Representación de WebView2 con Composition, a continuación.

Subsecciones a continuación:

Dimensionamiento, posicionamiento y visibilidad

CoreWebView2Controller toma un elemento primario HWND. La Bounds propiedad cambia de tamaño y coloca webView2 en relación con el elemento primario HWND. La visibilidad de WebView2 se puede alternar mediante IsVisible.

Zoom

WebView2 ZoomFactor se usa para escalar solo el contenido web de la ventana. El escalado de la interfaz de usuario también se actualiza cuando el usuario acerca el contenido presionando Ctrl mientras gira la rueda del mouse.

Escala de rasterización

RasterizationScale API escala toda la interfaz de usuario de WebView2, incluidos los menús contextuales, la información sobre herramientas y los elementos emergentes. La aplicación puede establecer si WebView2 debe detectar los cambios de escala del monitor y actualizar automáticamente RasterizationScale. BoundsMode se usa para configurar si la propiedad Bounds se interpreta como píxeles sin procesar o DIP (que debe escalar RasterizationScale).

Enfoque y tabulación

El control WebView2 genera eventos para que la aplicación sepa cuándo el control obtiene el foco o pierde el foco. Para la tabulación (al presionar la tecla Tab ), hay una API para mover el foco a WebView2 y un evento para WebView2 para solicitar que la aplicación vuelva a centrarse.

Ventana principal

WebView2 se puede volver a asignar a un identificador de ventana principal diferente (HWND). WebView2 también debe recibir una notificación cuando la posición de la aplicación en la pantalla ha cambiado.

Aceleradores de teclado

Cuando WebView2 tiene el foco, recibe directamente la entrada del usuario. Es posible que una aplicación quiera interceptar y controlar determinadas combinaciones de teclas de aceleración (teclas de método abreviado) o deshabilitar los comportamientos normales de las teclas de aceleración del explorador.

Consulte también Habilitar o deshabilitar el explorador que responde a las teclas de aceleración (teclas de método abreviado) anterior.

Color de fondo predeterminado

WebView2 puede especificar un color de fondo predeterminado. El color puede ser cualquier color opaco o transparente. Este color se usará si la página HTML no establece su propio color de fondo.

Representación de WebView2 mediante Composition

Para la representación webView2 basada en composición, use CoreWebView2Environment para crear un CoreWebView2CompositionControllerobjeto . CoreWebView2CompositionController proporciona las mismas API que CoreWebView2Controller, pero también incluye las API para la representación basada en composición.

Subsecciones a continuación:

Conexión al árbol visual

WebView2 puede conectar su árbol de composición a un IDCompositionVisual, IDCompositionTarget o Windows::UI::Composition::ContainerVisual.

Entrada de reenvío

La aplicación recibe la entrada espacial (mouse, touch, pen) y debe enviarse a WebView2. WebView2 notifica a la aplicación cuándo se debe actualizar el cursor en función de la posición del mouse.

Arrastrar y colocar

De forma predeterminada, se admite el arrastre desde un control WebView2 a otra aplicación. Sin embargo, arrastrar a un control WebView2 requiere que cuando la aplicación host reciba un IDropTarget evento del sistema, la aplicación host debe reenviar el evento al control WebView2. Arrastrar a un control WebView2 incluye operaciones de arrastrar y colocar que se encuentran completamente dentro de un control WebView2.

Use las siguientes API para reenviar IDropTarget eventos desde el sistema al control WebView2.

Accesibilidad

De forma predeterminada, WebView2 se mostrará en el árbol de accesibilidad como elemento secundario del HWND primario, para aplicaciones Win32/C++. WebView2 proporciona api para posicionar mejor el contenido de WebView2 con respecto a otros elementos de la aplicación.

No procede.

Opciones de entorno

Subsecciones a continuación:

Datos de usuario

Administre la carpeta de datos de usuario (UDF), que es una carpeta en el equipo del usuario. La UDF contiene datos relacionados con la aplicación host y WebView2. Las aplicaciones WebView2 usan carpetas de datos de usuario para almacenar datos del explorador, como cookies, permisos y recursos almacenados en caché.

Subsecciones a continuación:

Vea también:

Borrar datos de exploración:

Varios perfiles

Administre varios perfiles en una sola carpeta de datos de usuario.

Vea también:

Create un objeto options que define un perfil:

Create un control WebView2 que usa el perfil:

Acceso y manipulación del perfil:

Eliminar un perfil

La aplicación puede eliminar perfiles de usuario para un control de explorador web WebView2.

Vea también:

Selección en tiempo de ejecución

La selección en tiempo de ejecución admite pruebas de versión preliminar y autohospedaje. Al crear un entorno WebView2:

  • Para especificar un orden de búsqueda para los canales de vista previa del explorador, use la CoreWebView2EnvironmentOptions.ChannelSearchKind propiedad .
  • Para especificar qué canales de vista previa del explorador se buscan, use la CoreWebView2EnvironmentOptions.ReleaseChannels propiedad .

Vea también:

Rendimiento y depuración

Analice y depure el rendimiento, controle eventos relacionados con el rendimiento y administre el uso de memoria para aumentar la capacidad de respuesta de la aplicación.

Subsecciones a continuación:

Destino de uso de memoria

Especifica los niveles de consumo de memoria, como low o normal.

Protocolo Chrome DevTools (CDP)

El protocolo Chrome DevTools (CDP) proporciona API para instrumentar, inspeccionar, depurar y generar perfiles de exploradores basados en Chromium. El protocolo Chrome DevTools es la base de Microsoft Edge DevTools. Use el protocolo Chrome DevTools para las características que no se implementan en la plataforma WebView2.

Vea también:

Abierto:

Llamar:

Receptor:

Consulte también