Partage via

Utilisation de cadres dans les applications WebView2

  • Article

Les cadres vous permettent d’incorporer d’autres pages web dans votre propre page web. Un cadre est une sous-page ou une zone d’une page web, comme une page web dans une page web.

Un iframe est un type de frame. Les autres types d’images sont frameset, portal, embed, fencedFrameet object. Le main type WebView2 pour les frames est CoreWebView2Frame, qui est actuellement activé pour les iframes de niveau supérieur. La prise en charge d’autres types de trames est planifiée.

WebView2 prend en charge les API pour interagir avec les iframes. Vous pouvez :

  • Découvrez quand les iframes sont créés.
  • Découvrez quand les iframes naviguent vers une autre URL. Cela fonctionne de la même façon que les événements de navigation de machine à états pour les applications WebView2.
  • Communiquez entre l’application hôte et les iframes, en envoyant des messages dans les deux sens.
  • Autorisez l’application à ignorer l’en-tête de X-Frame-Options réponse HTTP.

Voir aussi :

S’abonner à l’événement FrameCreated pour obtenir un frame

Pour interagir avec des images dans votre application hôte, la première étape consiste à s’abonner à l’événement FrameCreated afin que votre application hôte obtienne un objet frame. L’événement FrameCreated est déclenché chaque fois qu’une nouvelle image est créée. Une fois que votre application hôte a obtenu un objet frame, utilisez l’objet frame pour surveiller les modifications et interagir avec ce frame spécifique.

Votre application hôte doit surveiller la durée de vie d’un frame en s’abonnant à l’événement CoreWebView2Frame.Destroyed , car lorsque le frame est détruit, votre application hôte ne peut plus référencer cette trame. Les images sont créées et détruites lors de chaque nouvelle navigation sur la page web. Utilisez la CoreWebView2Frame.IsDestroyed méthode pour case activée si le frame existe toujours.

Voir aussi :

  • iframes dans Vue d’ensemble des fonctionnalités et API WebView2.

Une fois qu’un frame est créé, le frame accède à l’URL source du frame. Les iframes utilisent des événements de navigation et de navigation, tels que FrameNavigationStarting et NavigationCompleted. Lorsque le frame accède à l’URL source, les événements de navigation suivants sont déclenchés :

  • NavigationStarting
  • ContentLoading
  • HistoryChanged
  • DOMContentLoaded
  • NavigationCompleted

Fréquence de navigation dans un cadre

La navigation peut potentiellement se produire dans un cadre. Dans un cas d’usage simple, l’attribut d’un iframesource élément est une URL, telle que wikipedia.com, et l’URL est chargée dans un iframe. En règle générale, la navigation se produit immédiatement après la création du cadre. Les ContentLoadingévénements , DOMContentLoadedet NavigationCompleted sont ensuite déclenchés.

Le cadre proprement dit est en cours de navigation. Une page web accède à une URL. De même, une trame peut naviguer.

Une fois le frame créé, le frame navigue comme piloté par votre application hôte. Pour surveiller ce qui se passe dans la page main, des événements tels que NavigationStarting, NavigationCompletedet HistoryChanged permettre à l’application hôte de naviguer entre les cadres ou les pages web. Les images sont naviguées vers une nouvelle URL moins souvent que les pages web, mais le même style de navigation est pris en charge. L’utilisateur ne peut généralement pas naviguer à l’intérieur d’un cadre, bien que JavaScript l’autorise ; un cadre est généralement statique en ce qui concerne la navigation.

Voir aussi :

Événements de navigation :

En ce qui concerne l’équivalent NavigationStarting et NavigationCompleted les événements dupliqués, les événements sur CoreWebView2Frame sont recommandés plutôt que les événements équivalents, remplacés sur CoreWebView2, car le CoreWebView2Frame type prend en charge davantage de scénarios pour autoriser les interactions avec les trames.

Voir aussi :

Utilisation d’objets hôtes dans un iframe

Pour communiquer entre le côté natif de l’application hôte et JavaScript qui se trouve dans un iframe, utilisez des objets hôtes. Un objet hôte est un objet que vous créez dans l’application hôte, puis que vous utilisez à partir du code JavaScript côté page web de l’application.

L’utilisation d’API côté natif à partir d’un script dans un cadre, via un objet hôte, est similaire à la structure de page d’interopérabilité web/native, comme expliqué dans Appeler du code côté natif à partir d’un code côté web :

Pour utiliser des objets hôtes dans un iframe :

  1. Définissez l’objet hôte et implémentez IDispatch.
  2. Ajoutez l’objet hôte côté natif à l’aide AddHostObjectToScriptWithOrigins de (Win32) ou AddHostObjectToScript (.NET).
  3. À partir de JavaScript dans votre code côté web, accédez à cet objet hôte à l’aide chrome.webview.hostObjects.<name> de l’API.

Pour accéder aux objets côté natif et les contrôler à partir de JavaScript côté web dans un frame, utilisez AddHostObjectToScriptWithOrigins (Win32) ou CoreWebView2Frame.AddHostObjectToScript (.NET), qui a un origins paramètre . Le origins paramètre spécifie les iframes d’URL qui seront autorisés à accéder, pour des raisons de sécurité. Ce paramètre identifie les URL pour lesquelles les iframes auront accès à l’objet hôte.

Si le frame est redirigé vers une URL qui ne figure pas dans la origins liste, le frame ne peut pas utiliser l’objet hôte ; le frame ne peut pas lire ou écrire des propriétés. Consultez la table Nom de la méthode dans la AddHostObjectToScript méthode de votre framework. Consultez les deux lignes suivantes :

  • applyHostFunction, getHostPropertyet setHostProperty.
  • getLocalProperty et setLocalProperty.

La méthode ci-dessus fonctionne comme la méthode suivante :

  • CoreWebView2.AddHostObjectToScript, méthode. Consultez la table Nom de la méthode . Lisez ces deux rubriques de référence d’API, bien que pour les frames, vous utilisiez la méthode qui prend en charge un origins paramètre à la place.

Exemple de code

Consultez Étape 6 : Appeler AddHostObjectToScript pour passer l’objet hôte au code côté web dans Appeler du code côté natif à partir d’un code côté web.

Voir aussi :

Envoi et réception de messages

Les messages peuvent être envoyés entre l’application native et le code JavaScript qui se trouve dans un iframe :

  • Vous pouvez envoyer des messages à partir de JavaScript dans un iframe dans une page HTML à l’application hôte.
  • Vous pouvez envoyer des messages de l’application hôte à JavaScript dans un iframe dans une page HTML.

Envoi de messages web à partir d’un iframe à l’application hôte

Pour envoyer des messages web à partir d’un iframe à l’application hôte, utilisez la window.chrome.webview.postMessage méthode :

window.chrome.webview.postMessage(`SetTitleText ${titleText.value}`);

Pour recevoir ces messages dans l’application hôte, l’application hôte doit s’abonner WebMessageReceived eventau .

Envoi de messages de l’application hôte à l’iframe

L’application hôte envoie des messages à l’iframe en appelant la PostWebMessageAsJson méthode ou PostWebMessageAsString .

L’iframe reçoit le message en s’abonnant à l’événement window.chrome.webview.addEventListener('message') , comme suit :

window.chrome.webview.addEventListener('message', arg => {
    // implement event listener here
});

Voir aussi :

Exécuter du code JavaScript dans des iframes à l’aide d’ExecuteScript

Une application WebView2 peut exécuter n’importe quel code JavaScript dans un frame, à l’aide ExecuteScriptde .

Pour que le script soit exécuté dans un iframe, un contexte d’exécution doit être créé. Un contexte d’exécution est créé après l’événement ContentLoading , c’est pourquoi si ExecuteScript est appelé avant que l’événement ContentLoading ne soit déclenché, le script n’est pas exécuté et la chaîne null est retournée.

Pour plus d’informations sur l’événement ContentLoading , consultez Événements de navigation pour les applications WebView2, qui est valide pour les images et les pages web.

Voir aussi :

Modification des événements réseau à l’aide de l’événement WebResourceRequested dans des iframes

Cette fonctionnalité est expérimentale

Pour les iframes, vous pouvez écouter les événements réseau et les modifier à l’aide de l’événement WebResourceRequested .

Voir aussi :

Consultez les dernières API de préversion. Les liens suivants contiennent 1.0.1466-prerelease. Dans la liste déroulante Version en haut à gauche de la documentation de référence de l’API, sélectionnez la dernière préversion.

Ignorer X-Frame-Options pour afficher une page web à l’intérieur d’un cadre

L’en-tête X-Frame-Options de réponse HTTP est utilisé par les pages web pour empêcher une application de rendre cette page web à l’intérieur d’un frame. La AdditionalAllowedFrameAncestors propriété permet à votre application de contourner l’en-tête X-Frame-Options pour afficher la page web à l’intérieur d’un cadre.

Voir aussi :

Exemple d’utilisation d’iframes dans une application hôte

Cet exemple de code montre comment utiliser les API de trame, notamment :

  • FrameCreated
    • CoreWebView2FrameCreatedEventArgs
  • DOMContentLoaded
    • CoreWebView2DOMContentLoadedEventArgs
  • ExecuteScript

Cet exemple de code est condensé à partir de MainWindow.xaml.cs dans l’exemple WebView2WpfBrowser .

        void DOMContentLoadedCmdExecuted(object target, ExecutedRoutedEventArgs e)
        {
            // Subscribe to the FrameCreated event to obtain the frame object when 
            // it's created.
            webView.CoreWebView2.FrameCreated += WebView_FrameCreatedDOMContentLoaded;
            webView.NavigateToString(@"<!DOCTYPE html>" +
                                      "<h1>DOMContentLoaded sample page</h1>" +
                                      "<h2>The content to the iframe and below will be added after DOM content is loaded </h2>" +
                                      "<iframe style='height: 200px; width: 100%;'/>");
        }

        void WebView_FrameCreatedDOMContentLoaded(object sender, CoreWebView2FrameCreatedEventArgs args)
        {
            // In order for ExecuteScriptAsync to successfully run inside the iframe, 
            // subscribe to the ContentLoading or DOMContentLoaded event.  Once these 
            // events are raised, you can call ExecuteScriptAsync.
            args.Frame.DOMContentLoaded += (frameSender, DOMContentLoadedArgs) =>
            {
                args.Frame.ExecuteScriptAsync(
                    "let content = document.createElement(\"h2\");" +
                    "content.style.color = 'blue';" +
                    "content.textContent = \"This text was added to the iframe by the host app\";" +
                    "document.body.appendChild(content);");
            };
        }

Vue d’ensemble des informations de référence sur les API

Les fonctionnalités suivantes, répertoriées dans Vue d’ensemble des fonctionnalités et API WebView2, incluent les API liées aux images :

Voir aussi

Pages externes :