Aufrufen von webseitigem Code aus nativem Code

Mithilfe von JavaScript in WebView2-Steuerelementen können Sie native Apps an Ihre Anforderungen anpassen. In diesem Artikel wird erläutert, wie JavaScript in WebView2 verwendet wird, und es wird beschrieben, wie Die Entwicklung mit erweiterten WebView2-Features und -Funktionen erfolgt.

Bevor Sie beginnen

In diesem Artikel wird davon ausgegangen, dass Sie bereits über ein funktionierendes Projekt verfügen. Wenn Sie kein Projekt haben und dies weiterverfolgen möchten, finden Sie weitere Informationen unter Erste Schritte mit WebView2.

Grundlegende WebView2-Funktionen

Verwenden Sie die folgenden Funktionen, um mit dem Einbetten von JavaScript in Ihre WebView2-App zu beginnen.

API	Beschreibung
ExecuteScriptAsync	Führen Sie JavaScript in einem WebView2-Steuerelement aus. Rufen Sie diese Methode auf, nachdem der Inhalt des Dokumentobjektmodells (DOM) der Seite geladen oder die Navigation abgeschlossen wurde. Weitere Informationen finden Sie unter Erste Schritte mit WebView2.
AddScriptToExecuteOnDocumentCreatedAsync	Wird auf jeder Seite ausgeführt, wenn das DOM erstellt wird. Rufen Sie diese Methode auf, nachdem CoreWebView2 initialisiert wurde.

Szenario: ExecuteScript JSON-codierte Ergebnisse

Da das Ergebnis von ExecuteScriptAsync JSON-codiert ist, erhalten Sie, wenn das Ergebnis der Auswertung von JavaScript eine Zeichenfolge ist, eine JSON-codierte Zeichenfolge und nicht den Wert der Zeichenfolge.

Der folgende Code führt beispielsweise ein Skript aus, das zu einer Zeichenfolge führt. Die resultierende Zeichenfolge enthält ein Anführungszeichen am Anfang, ein Anführungszeichen am Ende und Escapezeichen mit Schrägstrichen:

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

Das Skript gibt eine Zeichenfolge zurück, die ExecuteScript JSON-codiert. Wenn Sie über Ihr Skript aufrufen JSON.stringify , wird das Ergebnis doppelt als JSON-Zeichenfolge codiert, deren Wert eine JSON-Zeichenfolge ist.

Nur die Eigenschaften, die direkt im Ergebnis enthalten sind, sind im JSON-codierten Objekt enthalten. Geerbte Eigenschaften sind nicht im JSON-codierten Objekt enthalten. Die meisten DOM-Objekte erben alle Eigenschaften, sodass Sie ihre Werte explizit in ein anderes Objekt kopieren müssen, um sie zurückzugeben. Zum Beispiel:

Skript	Result
performance.memory	{}
(() => { const {totalJSHeapSize, usedJSHeapSize} = performance.memory; return {totalJSHeapSize, usedJSHeapSize}; })();	{"totalJSHeapSize":4434368,"usedJSHeapSize":2832912}

Wenn wir nur performance.memory zurückgeben, wird keine der zugehörigen Eigenschaften im Ergebnis angezeigt, da alle Eigenschaften geerbt werden. Wenn wir stattdessen bestimmte Eigenschaftswerte aus in performance.memory unser eigenes neues Objekt kopieren, um sie zurückzugeben, werden diese Eigenschaften im Ergebnis angezeigt.

Beim Ausführen eines Skripts über ExecuteScriptAsync wird dieses Skript im globalen Kontext ausgeführt. Es ist hilfreich, Ihr Skript in einer anonymen Funktion zu verwenden, damit alle von Ihnen definierten Variablen den globalen Kontext nicht belasten.

Zum Beispiel:

• Wenn Sie das Skript const example = 10; mehrmals ausführen, löst die nachfolgende Ausführung des Skripts eine Ausnahme aus, da example bei der ersten Ausführung definiert wurde.

• Wenn Sie stattdessen das Skript (() => { const example = 10; })(); ausführen, wird die example Variable im Kontext dieser anonymen Funktion definiert. Auf diese Weise verschmutzen sie den globalen Kontext nicht und können mehrmals ausgeführt werden.

Szenario: Ausführen einer dedizierten Skriptdatei

In diesem Abschnitt greifen Sie über Ihr WebView2-Steuerelement auf eine dedizierte JavaScript-Datei zu.

Hinweis

Obwohl das Schreiben von JavaScript inline für schnelle JavaScript-Befehle effizient sein kann, verlieren Sie JavaScript-Farbdesigns und Zeilenformatierung, was das Schreiben großer Codeabschnitte in Visual Studio erschwert.

Um das Problem zu beheben, erstellen Sie eine separate JavaScript-Datei mit Ihrem Code, und übergeben Sie dann mithilfe der Parameter einen Verweis auf diese ExecuteScriptAsync Datei.

1. Erstellen Sie eine .js Datei in Ihrem Projekt, und fügen Sie den JavaScript-Code hinzu, den Sie ausführen möchten. Erstellen Sie beispielsweise eine Datei namens script.js.

2. Konvertieren Sie die JavaScript-Datei in eine Zeichenfolge, die an ExecuteScriptAsyncübergeben wird, indem Sie den folgenden Code einfügen, nachdem die Seite mit der Navigation abgeschlossen ist:

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

3. Übergeben Sie Ihre Textvariable mit ExecuteScriptAsync:

   await webView.CoreWebView2.ExecuteScriptAsync(text);
   

Szenario: Entfernen der Drag-and-Drop-Funktionalität

In diesem Abschnitt verwenden Sie JavaScript, um die Drag-and-Drop-Funktion aus Ihrem WebView2-Steuerelement zu entfernen.

Erkunden Sie zunächst die aktuellen Drag-and-Drop-Funktionen:

1. Erstellen Sie eine .txt Datei zum Ziehen und Ablegen. Erstellen Sie beispielsweise eine Datei mit dem Namen contoso.txt , und fügen Sie ihr Text hinzu.

2. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.

3. Ziehen Sie die contoso.txt Datei per Drag-and-Drop in das WebView2-Steuerelement. Ein neues Fenster wird geöffnet, das das Ergebnis des Codes in Ihrem Beispielprojekt ist:

   

4. Fügen Sie als Nächstes Code hinzu, um die Drag-and-Drop-Funktionalität aus dem WebView2-Steuerelement zu entfernen. Fügen Sie den folgenden Code ein, nachdem das CoreWebView2-Objekt in Ihrem Code initialisiert wurde:

   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. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.

6. Versuchen Sie, das WebView2-Steuerelement per Drag-and-Drop contoso.txt zu verschieben. Vergewissern Sie sich, dass Sie nicht ziehen und ablegen können.

Szenario: Entfernen des Kontextmenüs

In diesem Abschnitt entfernen Sie das Kontextmenü aus Dem WebView2-Steuerelement.

Sehen Sie sich zunächst die aktuelle Funktionalität des Kontextmenüs an:

1. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.

2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle im WebView2-Steuerelement. Im Kontextmenü werden die Standardbefehle des Kontextmenüs angezeigt:

   

   Fügen Sie als Nächstes Code hinzu, um die Rechtsklickmenüfunktionalität aus dem WebView2-Steuerelement zu entfernen.

3. Fügen Sie den folgenden Code ein, nachdem das CoreWebView2-Objekt in Ihrem Code initialisiert wurde:

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

4. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen. Vergewissern Sie sich, dass Sie kein Kontextmenü öffnen können.

Siehe auch

• Erste Schritte mit WebView2
• WebView2Samples-Repository : ein umfassendes Beispiel für WebView2-Funktionen.
• WebView2-API-Referenz
• Web-/native Interop in Übersicht über WebView2-Features und -APIs.