Verwenden von Frames in WebView2-Apps

  • Artikel

Mit Frames können Sie andere Webseiten in Ihre eigene Webseite einbetten. Ein Frame ist eine Unterseite oder ein Bereich innerhalb einer Webseite, z. B. eine Webseite innerhalb einer Webseite.

Ein iframe ist ein Frametyp. Andere Framestypen sind frameset, , portalembed, fencedFrameund object. Der Standard WebView2-Typ für Frames ist CoreWebView2Frame, der derzeit für iFrames der obersten Ebene aktiviert ist. Unterstützung für andere Arten von Frames ist geplant.

WebView2 unterstützt APIs für die Interaktion mit iFrames. Sie haben folgende Möglichkeiten:

  • Erfahren Sie, wann iframes erstellt werden.
  • Erfahren Sie, wann iframes zu einer anderen URL navigieren. Dies funktioniert genauso wie Die Navigationsereignisse des Zustandscomputers für WebView2-Apps.
  • Kommunikation zwischen der Host-App und iFrames und Senden von Nachrichten in beide Richtungen.
  • Zulassen, dass die App den X-Frame-Options HTTP-Antwortheader ignoriert.

Siehe auch:

Abonnieren des FrameCreated-Ereignisses zum Abrufen eines Frames

Um mit Frames in Ihrer Host-App zu interagieren, besteht der erste Schritt darin, das FrameCreated Ereignis zu abonnieren, damit Ihre Host-App ein Frameobjekt erhält. Das FrameCreated -Ereignis wird ausgelöst, wenn ein neuer Frame erstellt wird. Nachdem Ihre Host-App ein Frameobjekt abgerufen hat, verwenden Sie das Frame-Objekt, um Änderungen zu überwachen und mit diesem bestimmten Frame zu interagieren.

Ihre Host-App muss die Lebensdauer eines Frames überwachen, indem sie das CoreWebView2Frame.Destroyed Ereignis abonniert, denn wenn der Frame zerstört wird, kann Ihre Host-App nicht mehr auf diesen Frame verweisen. Frames werden während jeder neuen Webseitennavigation erstellt und zerstört. Verwenden Sie die CoreWebView2Frame.IsDestroyed -Methode, um zu überprüfen, ob der Frame noch vorhanden ist.

Siehe auch:

  • iframes in Übersicht über WebView2-Features und -APIs.

Nachdem ein Frame erstellt wurde, navigiert der Frame zur Quell-URL des Frames. iframes verwenden Navigations- und Navigationsereignisse wie FrameNavigationStarting und NavigationCompleted. Wenn der Frame zur Quell-URL navigiert, werden die folgenden Navigationsereignisse ausgelöst:

  • NavigationStarting
  • ContentLoading
  • HistoryChanged
  • DOMContentLoaded
  • NavigationCompleted

Häufigkeit der Navigation innerhalb eines Frames

Die Navigation kann möglicherweise innerhalb eines Frames erfolgen. Als einfacher Anwendungsfall ist das source Attribut eines iframe Elements eine URL, z. B. wikipedia.com, und die URL wird in einen iframe geladen. In der Regel erfolgt die Navigation unmittelbar nach der Erstellung des Frames. Die ContentLoadingEreignisse , DOMContentLoadedund NavigationCompleted werden dann ausgelöst.

Der Frame selbst navigiert. Eine Webseite navigiert zu einer URL. Ebenso navigiert ein Frame möglicherweise.

Nachdem der Frame erstellt wurde, navigiert der Frame wie von Ihrer Host-App gesteuert. Um zu überwachen, was auf der seite Standard, Ereignisse wie NavigationStarting, NavigationCompletedund HistoryChanged ermöglichen Sie der Host-App, zwischen Frames oder Webseiten hin und her zu navigieren. Frames werden seltener zu einer neuen URL navigiert als Webseiten, aber der gleiche Navigationsstil wird unterstützt. Der Benutzer kann normalerweise nicht innerhalb eines Frames navigieren, obwohl JavaScript dies ermöglicht. Ein Frame ist in der Regel statisch in Bezug auf die Navigation.

Siehe auch:

Navigationsereignisse:

In Bezug auf die doppelten Äquivalente NavigationStarting und NavigationCompleted Ereignisse werden die Ereignisse unter CoreWebView2Frame anstelle der entsprechenden ersetzten Ereignisse für CoreWebView2empfohlen, da der CoreWebView2Frame Typ mehr Szenarien unterstützt, um Interaktionen mit Frames zu ermöglichen.

Siehe auch:

Verwenden von Hostobjekten in einem iframe

Verwenden Sie Hostobjekte, um zwischen der nativen Seite der Host-App und JavaScript in einem iframe zu kommunizieren. Ein Hostobjekt ist ein Objekt, das Sie in der Host-App erstellen und dann aus JavaScript-Code auf der Webseitenseite der App verwenden.

Die Verwendung nativer APIs aus einem Skript innerhalb eines Frames über ein Hostobjekt ähnelt der Web-/nativen Interop-Seitenstruktur, wie unter Aufrufen von nativem Code aus webseitigem Code erläutert:

So verwenden Sie Hostobjekte in einem iframe:

  1. Definieren Sie das Hostobjekt, und implementieren Sie IDispatch.
  2. Fügen Sie das Hostobjekt auf der nativen Seite hinzu, indem Sie AddHostObjectToScriptWithOrigins (Win32) oder AddHostObjectToScript (.NET) verwenden.
  3. Greifen Sie über JavaScript in Ihrem webseitigen Code mithilfe chrome.webview.hostObjects.<name> der API auf dieses Hostobjekt zu.

Verwenden Sie AddHostObjectToScriptWithOrigins (Win32) oder CoreWebView2Frame.AddHostObjectToScript (.NET) mit einem origins Parameter, um über webseitiges JavaScript in einem Frame auf native Objekte zuzugreifen und diese zu steuern. Der origins Parameter gibt aus Sicherheitsgründen an, auf welche URLs iFrames zugreifen dürfen. Dieser Parameter identifiziert die URLs, für die iframes Zugriff auf das Hostobjekt haben.

Wenn der Frame zu einer URL navigiert wird, die nicht in der origins Liste enthalten ist, kann der Frame das Hostobjekt nicht bedienen. Der Frame kann keine Eigenschaften lesen oder schreiben. Weitere Informationen finden Sie in der Tabelle Methodenname in der AddHostObjectToScript -Methode für Ihr Framework. Sehen Sie sich die folgenden beiden Zeilen an:

  • applyHostFunction, getHostPropertyund setHostProperty.
  • getLocalProperty und setLocalProperty.

Die obige Methode funktioniert wie die folgende Methode:

  • CoreWebView2.AddHostObjectToScript-Methode. Weitere Informationen finden Sie in der Tabelle Methodenname . Lesen Sie beide API-Referenzthemen, obwohl Sie für Frames die -Methode verwenden würden, die stattdessen einen origins Parameter unterstützt.

Beispielcode

Weitere Informationen finden Sie unter Schritt 6: Aufrufen von AddHostObjectToScript zum Übergeben des Hostobjekts an webseitigen Code in Aufrufen von nativem Code aus webseitigem Code.

Siehe auch:

Senden und Empfangen von Nachrichten

Nachrichten können zwischen der nativen App und JavaScript-Code gesendet werden, der sich in einem iframe befindet:

  • Sie können Nachrichten aus JavaScript in einem iframe auf einer HTML-Seite an die Host-App senden.
  • Sie können Nachrichten von der Host-App in einem iframe auf einer HTML-Seite an JavaScript senden.

Senden von Webnachrichten von einem iFrame an die Host-App

Verwenden Sie die -Methode, um Webnachrichten von einem iframe an die window.chrome.webview.postMessage Host-App zu senden:

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

Um diese Nachrichten in der Host-App zu empfangen, muss die Host-App die WebMessageReceived eventabonnieren.

Senden von Nachrichten von der Host-App an den iframe

Die Host-App sendet Nachrichten an den iframe, indem die - oder PostWebMessageAsString -PostWebMessageAsJsonMethode aufgerufen wird.

Der iframe empfängt die Nachricht, indem er das window.chrome.webview.addEventListener('message') Ereignis wie folgt abonniert:

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

Siehe auch:

Ausführen von JavaScript-Code in iframes mithilfe von ExecuteScript

Eine WebView2-App kann mithilfe von ExecuteScriptbeliebigem JavaScript in einem Frame ausführen.

Damit das Skript in einem iframe ausgeführt werden kann, muss ein Ausführungskontext erstellt werden. Ein Ausführungskontext wird nach dem ContentLoading Ereignis erstellt. Wenn ExecuteScript daher vor dem Auslösen des ContentLoading Ereignisses aufgerufen wird, wird das Skript nicht ausgeführt, und die Zeichenfolge null wird zurückgegeben.

Informationen zum ContentLoading Ereignis finden Sie unter Navigationsereignisse für WebView2-Apps, die sowohl für Frames als auch für Webseiten gültig sind.

Siehe auch:

Ändern von Netzwerkereignissen mithilfe des WebResourceRequested -Ereignisses in iframes

Dieses Feature ist experimentell.

Bei iframes können Sie netzwerkrelevante Ereignisse überwachen und mithilfe des -Ereignisses WebResourceRequested ändern.

Siehe auch:

Sehen Sie sich die neuesten Vorabversions-APIs an. Die folgenden Links enthalten 1.0.1466-prerelease. Wählen Sie in der Dropdownliste Version oben links in der API-Referenzdokumentation die neueste Vorabversion aus.

Ignorieren von X-Frame-Optionen zum Rendern einer Webseite innerhalb eines Frames

Der X-Frame-Options HTTP-Antwortheader wird von Webseiten verwendet, um zu verhindern, dass eine Anwendung diese Webseite innerhalb eines Frames rendert. Die AdditionalAllowedFrameAncestors -Eigenschaft ermöglicht es Ihrer Anwendung, den X-Frame-Options Header zu umgehen, um die Webseite in einem Frame zu rendern.

Siehe auch:

Beispiel für die Verwendung von iframes in einer Host-App

In diesem Beispielcode wird gezeigt, wie Frame-APIs verwendet werden, einschließlich:

  • FrameCreated
    • CoreWebView2FrameCreatedEventArgs
  • DOMContentLoaded
    • CoreWebView2DOMContentLoadedEventArgs
  • ExecuteScript

Dieser Beispielcode wird aus MainWindow.xaml.cs im WebView2WpfBrowser-Beispiel zusammengefasst.

        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);");
            };
        }

Übersicht über die API-Referenz

Die folgenden Features, die unter Übersicht über WebView2-Features und -APIs aufgeführt sind, umfassen framebezogene APIs:

Siehe auch

Externe Seiten: