Usar JavaScript en vista previa para escenarios extendidos

• 12/02/2020
• Tiempo de lectura: 3 minutos
• • M

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

Antes de comenzar

En este artículo se da por supuesto que ya tiene un proyecto en curso. Si no tiene un proyecto y quiere seguirlo, vaya a la Guía de introducción de WebView2.

Funciones de WebView2 básicas

Use las siguientes funciones para empezar a incrustar JavaScript en la aplicación WebView.

Escenario: ejecutar un archivo de script dedicado

En esta sección, accede a un archivo de JavaScript dedicado desde el control WebView2.

Para resolver el problema, cree un archivo JavaScript independiente con el código y, a continuación, pase una referencia a ese archivo usando los ExecuteScriptAsync parámetros.

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

2. Convierte el archivo JavaScript en una cadena que se pasa a ExecuteScriptAsync .

   1. Para convertir el archivo de JavaScript en una cadena, copie el siguiente fragmento de código.

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

   2. Pega el código en MainWindow.xaml.cs .

3. Pase la variable de texto con ExecuteScriptAsync .

   await webView.CoreWebView2.ExecuteScriptAsync(text);
   

Escenario: quitar la funcionalidad de arrastrar y colocar

En esta sección, use JavaScript para quitar la funcionalidad de arrastrar y colocar de su control WebView2.

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

1. Cree un .txt archivo para arrastrar y colocar. Por ejemplo, cree un archivo con el nombre contoso.txt y agréguele texto.

2. Ejecute el proyecto.

3. Arrastre el archivo y colóquelo contoso.txt en el control WebView. Se abrirá una nueva ventana, que es el resultado del código de su proyecto de ejemplo.

   

   Resultado de arrastrar y soltar contoso.txt

Ahora, agregue código para quitar la funcionalidad de arrastrar y colocar del control WebView2.

1. Copie y pegue el siguiente fragmento de código en InitializeAsync() en MainWindow.xaml.cs .

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

2. Ejecute el proyecto.

3. Intente arrastrar y colocar contoso.txt . Confirme que no puede arrastrar y colocar.

Escenario: quitar el menú contextual

En esta sección, quite el menú contextual predeterminado del control WebView2.

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

1. Ejecute el proyecto.

2. Mantenga el mouse en cualquier lugar del control WebView2 y abra el menú contextual \ (haga clic con el botón derecho ). El menú contextual muestra las opciones predeterminadas.

   

   Menú contextual que muestra las opciones predeterminadas

Ahora agregue código para quitar la funcionalidad de menú contextual del control WebView2.

1. Copie y pegue el siguiente fragmento de código en InitializeAsync() en MainWindow.xaml.cs .

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

2. Vuelva a ejecutar el código. Confirme que no puede abrir un menú contextual \ (haga clic con el botón derecho ).

Consulte también

• Para obtener más información sobre cómo comenzar a usar WebView2, vaya a WebView2 guías de introducción.
• Para obtener un ejemplo completo de las capacidades de WebView2, navegue hasta el repositorio de WebView2Samples en github.
• Para obtener información detallada sobre las API de WebView2, vaya a referencia de la API.
• Para obtener más información sobre WebView2, vaya a recursos WebView2.

Ponerse en contacto con el equipo de la vista de WebView de Microsoft Edge

Comparte tus comentarios para ayudar a crear experiencias de WebView2 más ricas. Para enviar solicitudes de características o errores, o buscar problemas conocidos, vea el repositorio de comentarios de WebView de Microsoft Edge .