Aufrufen von webseitigem Code aus systemeigenem Code

Die Verwendung von JavaScript in WebView2-Steuerelementen ermöglicht es Ihnen, native Apps an Ihre Anforderungen anzupassen. In diesem Artikel wird erläutert, wie JavaScript in WebView2 verwendet wird, und die Entwicklung mit erweiterten WebView2-Features und -Funktionen erläutert.

Bevor Sie beginnen

In diesem Artikel wird davon ausgegangen, dass Sie bereits über ein funktionierendes Projekt verfügen. Wenn Sie kein Projekt haben und dem Sie folgen möchten, lesen Sie Erste Schritte mit WebView2.

Grundlegende WebView2-Funktionen

Verwenden Sie die folgenden Funktionen, um JavaScript in den systemeigenen Code Ihrer WebView2-App einzubetten:

API	Beschreibung
ExecuteScriptAsync	Ausführen von JavaScript in einem WebView2-Steuerelement Rufen Sie diese Methode auf, nachdem der Inhalt der Seite im Dokumentobjektmodell (DOM) geladen oder die Navigation abgeschlossen ist. Siehe 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 JSON-codiert ist, erhält Ihr systemeigener Code eine JSON-codierte Zeichenfolge, nicht den Wert der Zeichenfolge, wenn das Ergebnis der Auswertung des ExecuteScriptAsync JavaScript-Codes eine Zeichenfolge ist.

Der folgende systemeigene 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 Schrägstriche mit Escapezeichen:

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

Das Skript gibt eine Zeichenfolge zurück, die JSON-codiert.ExecuteScript Wenn Ihr webseitiger Code bereits aufruft 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 Ihr webseitiger Code die Werte der Eigenschaften explizit in ein anderes Objekt kopieren und dieses Objekt an Ihren systemeigenen Code zurückgeben muss. Zum Beispiel:

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

Wenn wir just performance.memoryzurückgeben, sehen wir keine seiner Eigenschaften im Ergebnis, da alle Eigenschaften geerbt werden. Wenn stattdessen der webseitige Code bestimmte Eigenschaftswerte in performance.memory ein neues Objekt kopiert und dieses Objekt zurückgibt, erkennt der systemeigene Code diese Eigenschaften im Ergebnis.

Beim Ausführen des Skripts über ExecuteScriptAsyncwird dieses Skript im globalen Kontext ausgeführt. Es ist hilfreich, Ihr Skript in einer anonymen Funktion zu haben, damit die von Ihnen definierten Variablen den globalen Kontext nicht verschmutzen.

Zum Beispiel:

• Wenn Sie das Skript const example = 10; mehrmals ausführen, wird bei der nachfolgenden Ausführung des Skripts eine Ausnahme ausgelöst, da example es 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 verschmutzt es nicht den globalen Kontext und kann mehr als einmal ausgeführt werden.

Szenario: Ausführen einer dedizierten JavaScript-Datei

Sie können über Ihr WebView2-Steuerelement auf eine dedizierte JavaScript-Datei zugreifen.

JavaScript-Inlinecode eignet sich gut für schnelle JavaScript-Befehle. JavaScript-Inlinecode unterstützt jedoch keine Farbdesigns und Linienformatierungen im Code-Editor. Das macht es schwierig, große Codeabschnitte zu schreiben, z. B. in Visual Studio.

Um das Problem zu beheben, erstellen Sie eine separate JavaScript-Datei, die Ihren Code enthält, und übergeben Sie dann mithilfe der ExecuteScriptAsync Parameter einen Verweis auf diese Datei.

So erstellen und verwenden Sie eine separate, dedizierte JS-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 mit dem Namen 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 navigiert ist:

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

3. Übergeben Sie die text Variable an 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-Funktionalität aus Ihrem WebView2-Steuerelement zu entfernen.

Erkunden Sie zunächst die aktuelle Drag-and-Drop-Funktionalität:

1. Erstellen Sie eine .txt Datei zum Ziehen und Ablegen. Erstellen Sie beispielsweise eine Datei mit dem Namen contoso.txt und fügen Sie 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. Es öffnet sich ein neues Fenster, das Ergebnis des Codes in deinem 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, ihn per Drag & Drop in das WebView2-Steuerelement zu ziehen contoso.txt . 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 für die Rechtsklick-Menüs angezeigt:

   

   Fügen Sie als Nächstes Code hinzu, um die Kontextmenüfunktion 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. Bestätigen Sie, dass Sie ein Kontextmenü nicht öffnen können.

Siehe auch

• Erste Schritte mit WebView2
• WebView2Samples-Repository – ein umfassendes Beispiel für WebView2-Funktionen.
• WebView2-API-Referenz
• Web-/native Interoperabilität in Übersicht über WebView2-APIs.