Appeler du code côté web à partir du code natif

L’utilisation de JavaScript dans les contrôles WebView2 vous permet de personnaliser les applications natives pour répondre à vos besoins. Cet article explique comment utiliser JavaScript dans WebView2 et comment développer à l’aide des fonctionnalités et fonctions avancées de WebView2.

Avant de commencer

Cet article part du principe que vous disposez déjà d’un projet opérationnel. Si vous n’avez pas de projet et que vous souhaitez le suivre, consultez Démarrage avec WebView2.

Fonctions WebView2 de base

Utilisez les fonctions suivantes pour intégrer JavaScript dans le code côté natif de votre application WebView2 :

API	Description
ExecuteScriptAsync	Exécuter JavaScript dans un contrôle WebView2. Appelez cette méthode une fois que le contenu du modèle DOM (Document Object Model) de la page est chargé ou que la navigation est terminée. Voir Démarrer avec WebView2.
AddScriptToExecuteOnDocumentCreatedAsync	S’exécute sur toutes les pages lors de la création du DOM. Appelez cette méthode après l’initialisation de CoreWebView2.

Scénario : Résultats codés en JSON ExecuteScript

Étant donné que le résultat de ExecuteScriptAsync est codé en JSON, si le résultat de l’évaluation du code JavaScript est une chaîne, votre code côté natif recevra une chaîne codée en JSON, et non la valeur de la chaîne.

Par exemple, le code natif suivant exécute un script qui génère une chaîne. La chaîne résultante inclut un guillemet au début, un guillemet à la fin et des barres obliques d’échappement :

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

Le script renvoie une chaîne codée ExecuteScript par JSON pour vous. Si votre code côté web appelle JSON.stringify déjà, le résultat est doublement codé sous la forme d’une chaîne JSON, dont la valeur est une chaîne JSON.

Seules les propriétés qui sont directement dans le résultat sont incluses dans l’objet codé en JSON ; Les propriétés héritées ne sont pas incluses dans l’objet codé JSON. La plupart des objets DOM héritent de toutes les propriétés, de sorte que votre code côté web doit explicitement copier les valeurs des propriétés dans un autre objet et renvoyer cet objet à votre code côté natif. Par exemple :

Script	Résultat
performance.memory	{}
(() => { const {totalJSHeapSize, usedJSHeapSize} = performance.memory; return {totalJSHeapSize, usedJSHeapSize}; })();	{"totalJSHeapSize":4434368,"usedJSHeapSize":2832912}

Lorsque nous retournons simplement performance.memory, nous ne voyons aucune de ses propriétés dans le résultat, car toutes les propriétés sont héritées. Si, au contraire, le code côté web copie des valeurs de propriété particulières dans performance.memory un nouvel objet et renvoie cet objet, le code côté natif voit ces propriétés dans le résultat.

Lors de l’exécution d’un script via ExecuteScriptAsync, ce script est exécuté dans le contexte global. Il est utile d’avoir votre script dans une fonction anonyme, afin que les variables que vous définissez ne polluent pas le contexte global.

Par exemple :

• Si vous exécutez le script const example = 10; plusieurs fois, les fois suivantes, le script lèvera une exception, car example elle a été définie la première fois que vous l’avez exécuté.

• Si à la place vous exécutez le script (() => { const example = 10; })(); , la example variable est définie dans le contexte de cette fonction anonyme. De cette façon, il ne pollue pas le contexte mondial et peut être exécuté plus d’une fois.

Scénario : Exécution d’un fichier JavaScript dédié

Vous pouvez accéder à un fichier JavaScript dédié à partir de votre contrôle WebView2.

Le code JavaScript inline fonctionne bien pour les commandes JavaScript rapides. Toutefois, le code JavaScript incorporé ne prend pas en charge les thèmes de couleur et la mise en forme des lignes dans l’éditeur de code. Cela rend difficile l’écriture de grandes sections de code, comme dans Visual Studio.

Pour résoudre le problème, créez un fichier JavaScript distinct qui contient votre code, puis transmettez une référence à ce fichier à l’aide des ExecuteScriptAsync paramètres.

Pour créer et utiliser un fichier JS dédié distinct :

1. Créez un .js fichier dans votre projet et ajoutez le code JavaScript que vous souhaitez exécuter. Par exemple, créez un fichier appelé script.js.

2. Convertissez le fichier JavaScript en une chaîne qui est transmise à ExecuteScriptAsync, en collant le code suivant une fois la navigation de la page terminée :

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

3. Passez la text variable à ExecuteScriptAsync:

   await webView.CoreWebView2.ExecuteScriptAsync(text);
   

Scénario : Suppression de la fonctionnalité Glisser-déplacer

Dans cette section, vous utilisez JavaScript pour supprimer la fonctionnalité de glisser-déplacer de votre contrôle WebView2.

Pour commencer, explorez la fonctionnalité actuelle de glisser-déplacer :

1. Créez un .txt fichier à des fins de glisser-déplacer. Par exemple, créez un fichier nommé contoso.txt et ajoutez-y du texte.

2. Appuyez sur F5 pour générer et exécuter le projet.

3. Faites glisser et déposez le contoso.txt fichier dans le contrôle WebView2. Une nouvelle fenêtre s’ouvre, qui correspond au résultat du code de votre exemple de projet :

   

4. Ensuite, ajoutez du code pour supprimer la fonctionnalité glisser-déplacer du contrôle WebView2. Collez le code suivant après l’initialisation de l’objet CoreWebView2 dans votre code :

   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. Appuyez sur F5 pour générer et exécuter le projet.

6. Essayez d’effectuer un glisser-déplacer contoso.txt dans le contrôle WebView2. Vérifiez que vous ne pouvez pas faire de glisser-déplacer.

Scénario : Suppression du menu contextuel

Dans cette section, vous supprimez le menu contextuel de votre contrôle WebView2.

Pour commencer, explorez les fonctionnalités actuelles du menu contextuel :

1. Appuyez sur F5 pour générer et exécuter le projet.

2. Cliquez avec le bouton droit n’importe où sur le contrôle WebView2. Le menu contextuel affiche les commandes de menu contextuel par défaut :

   

   Ensuite, ajoutez du code pour supprimer la fonctionnalité de menu contextuel du contrôle WebView2.

3. Collez le code suivant après l’initialisation de l’objet CoreWebView2 dans votre code :

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

4. Appuyez sur F5 pour générer et exécuter le projet. Vérifiez que vous ne pouvez pas ouvrir un menu avec le bouton droit.

Voir aussi

• Mise en place de WebView2
• Référentiel WebView2Samples : un exemple complet des fonctionnalités de WebView2.
• Référence de l’API WebView2
• Interopérabilité web/native dans Vue d’ensemble des API WebView2.