Llamar al código del lado web desde el código del lado nativo

El uso de JavaScript en controles WebView2 le permite personalizar las aplicaciones nativas para satisfacer sus necesidades. En este artículo se explora cómo usar JavaScript en WebView2 y se revisa cómo desarrollar mediante características y funciones avanzadas de WebView2.

Antes de empezar

En este artículo se asume que ya tiene un proyecto en funcionamiento. Si no tiene ningún proyecto y desea continuar, consulte Introducción a WebView2.

Funciones básicas de WebView2

Use las siguientes funciones para insertar JavaScript en el código del lado nativo de la aplicación WebView2:

Escenario: resultados codificados en JSON de ExecuteScript

Dado que el resultado de ExecuteScriptAsync está codificado en JSON, si el resultado de evaluar el JavaScript es una cadena, el código del lado nativo recibirá una cadena codificada en JSON, no el valor de la cadena.

Por ejemplo, el siguiente código del lado nativo ejecuta el script que da como resultado una cadena. La cadena resultante incluye una comilla al principio, una comilla al final y barras de escape:

string result = await coreWebView2.ExecuteScriptAsync(@"'example'");
Debug.Assert(result == "\"example\"");

El script devuelve una cadena que ExecuteScript codifica en JSON. Si el código del lado web ya llama JSON.stringify , el resultado se codifica doblemente como una cadena JSON, cuyo valor es una cadena JSON.

Solo las propiedades que están directamente en el resultado se incluyen en el objeto codificado en JSON; las propiedades heredadas no se incluyen en el objeto codificado en JSON. La mayoría de los objetos DOM heredan todas las propiedades, por lo que el código del lado web debe copiar explícitamente los valores de las propiedades en otro objeto y devolver ese objeto al código del lado nativo. Por ejemplo:

Cuando devolvemos just performance.memory, no vemos ninguna de sus propiedades en el resultado, porque todas las propiedades se heredan. Si, en cambio, el código del lado web copia valores de performance.memory propiedad particulares en un nuevo objeto y devuelve ese objeto, entonces el código del lado nativo ve esas propiedades en el resultado.

Al ejecutar un script a través de ExecuteScriptAsync, ese script se ejecuta en el contexto global. Es útil tener el script en una función anónima, para que las variables que defina no contaminen el contexto global.

Por ejemplo:

• Si ejecuta el script const example = 10; más de una vez, las siguientes veces que ejecute el script se iniciará una excepción, porque example se definió la primera vez que lo ejecutó.

• Si, en su lugar, ejecuta el script, (() => { const example = 10; })(); la example variable se define en el contexto de esa función anónima. De esa manera, no está contaminando el contexto global y se puede ejecutar más de una vez.

Escenario: Ejecutar un archivo JavaScript dedicado

Puede tener acceso a un archivo JavaScript dedicado desde el control WebView2.

El código JavaScript insertado funciona bien para comandos JavaScript rápidos. Sin embargo, el código JavaScript insertado no admite temas de color ni formato de línea en el editor de código. Esto dificulta la escritura de grandes secciones de código, como en Visual Studio.

Para solucionar el problema, cree un archivo JavaScript independiente que contenga el código y, a continuación, pase una referencia a ese archivo mediante los ExecuteScriptAsync parámetros.

Para crear y usar un archivo JS dedicado independiente:

1. Cree un .js archivo en el proyecto y agregue el código JavaScript que desea ejecutar. Por ejemplo, cree un archivo llamado script.js.

2. Convierta el archivo JavaScript en una cadena que se pasa a ExecuteScriptAsync, pegando el siguiente código cuando la página termine de navegar:

   string text = System.IO.File.ReadAllText(@"C:\PATH_TO_YOUR_FILE\script.js");
   

3. Pase la text variable a ExecuteScriptAsync:

   await webView.CoreWebView2.ExecuteScriptAsync(text);
   

Escenario: Eliminación de la funcionalidad de arrastrar y colocar

En esta sección, usará JavaScript para quitar la funcionalidad de arrastrar y soltar del control WebView2.

Para empezar, explore la funcionalidad actual de arrastrar y colocar:

1. Cree un .txt archivo para arrastrarlo y soltarlo. Por ejemplo, cree un archivo con nombre contoso.txt y agréguele texto.

2. Pulse F5 para compilar y ejecutar el proyecto.

3. Arrastre y coloque el contoso.txt archivo en el control WebView2. Se abrirá una nueva ventana que es el resultado del código del proyecto de ejemplo:

   

4. A continuación, agregue código para quitar la funcionalidad de arrastrar y colocar del control WebView2. Pegue el código siguiente después de inicializar el objeto CoreWebView2 en el código:

   await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(
      "window.addEventListener('dragover',function(e){e.preventDefault();},false);" +
      "window.addEventListener('drop',function(e){" +
         "e.preventDefault();" +
         "console.log(e.dataTransfer);" +
         "console.log(e.dataTransfer.files[0])" +
      "}, false);");
   

5. Pulse F5 para compilar y ejecutar el proyecto.

6. Intente arrastrar y colocar contoso.txt en el control WebView2. Confirma que no puedes arrastrar y soltar.

Escenario: Quitar el menú contextual

En esta sección, se quita el menú contextual del control WebView2.

Para empezar, explore la funcionalidad actual del menú contextual:

1. Pulse F5 para compilar y ejecutar el proyecto.

2. Haga clic con el botón secundario en cualquier lugar del control WebView2. El menú contextual muestra los comandos de menú predeterminados del botón derecho:

   

   A continuación, agregue código para quitar la funcionalidad del menú contextual del control WebView2.

3. Pegue el código siguiente después de inicializar el objeto CoreWebView2 en el código:

   await webView.CoreWebView2.ExecuteScriptAsync("window.addEventListener('contextmenu', window => {window.preventDefault();});");
   

4. Pulse F5 para compilar y ejecutar el proyecto. Confirme que no puede abrir un menú contextual.

Vea también

• Introducción a WebView2
• Repositorio de webView2samples : un ejemplo completo de las funcionalidades de WebView2.
• Referencia de API de WebView2
• Interoperabilidad nativa y web en Información general sobre las API de WebView2.