WebView
Die .NET Multiplattform App UI (.NET MAUI) WebView zeigt entfernte Webseiten, lokale HTML-Dateien und HTML-Strings in einer App an. Der in WebView angezeigte Inhalt umfasst Unterstützung für Cascading Style Sheets (CSS) und JavaScript. Standardmäßig enthalten .NET MAUI-Projekte die Plattformberechtigungen, die für eine WebView zur Anzeige einer entfernten Webseite erforderlich sind.
WebView definiert die folgenden Eigenschaften:
- Cookies, vom Typ
CookieContainer, bietet Speicherplatz für eine Sammlung von Cookies. - CanGoBack, vom Typ
bool, zeigt an, ob der/die Benutzer*in zu vorherigen Seiten navigieren kann. Dies ist eine schreibgeschützte Eigenschaft. - CanGoForward, vom Typ
bool, zeigt an, ob der/die Benutzer*in vorwärts navigieren kann. Dies ist eine schreibgeschützte Eigenschaft. - Source, vom Typ
WebViewSource, steht für die Stelle, die WebView anzeigt. - UserAgent, vom Typ
string, steht für den Benutzer-Agenten. Der Standardwert ist der User Agent des zugrunde liegenden Plattformbrowsers odernull, wenn er nicht ermittelt werden kann.
Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.
Die Eigenschaft Source kann auf ein UrlWebViewSource-Objekt oder ein HtmlWebViewSource-Objekt gesetzt werden, die beide von WebViewSource abgeleitet sind. Ein UrlWebViewSource wird zum Laden einer mit einer URL angegebenen Webseite verwendet, während ein HtmlWebViewSource-Objekt zum Laden einer lokalen HTML-Datei oder von lokalem HTML verwendet wird.
WebView definiert ein Navigating-Ereignis, das ausgelöst wird, wenn die Seitennavigation beginnt, und ein Navigated-Ereignis, das ausgelöst wird, wenn die Seitennavigation beendet ist. Das WebNavigatingEventArgs-Objekt, das das Navigating-Ereignis begleitet, definiert eine Cancel-Eigenschaft vom Typ bool, die zum Abbrechen der Navigation verwendet werden kann. Das WebNavigatedEventArgs-Objekt, das das Navigated-Ereignis begleitet, definiert eine Result-Eigenschaft vom Typ WebNavigationResult, die das Navigationsergebnis angibt.
Wichtig
Ein WebView muss seine HeightRequest- und WidthRequest-Eigenschaften angeben, wenn es in einem HorizontalStackLayout, StackLayout oder VerticalStackLayout enthalten ist. Wenn Sie diese Eigenschaften nicht angeben, wird die WebView nicht dargestellt.
Anzeigen einer Webseite
Um eine Remote-Webseite anzuzeigen, setzen Sie die Source-Eigenschaft auf einen string, der den URI angibt:
<WebView Source="https://learn.microsoft.com/dotnet/maui" />
Der entsprechende C#-Code lautet:
WebView webvView = new WebView
{
Source = "https://learn.microsoft.com/dotnet/maui"
};
URIs müssen vollständig mit dem angegebenen Protokoll gebildet werden.
Hinweis
Obwohl die Eigenschaft Source vom Typ WebViewSource ist, kann die Eigenschaft auf einen stringbasierten URI gesetzt werden. Das liegt daran, dass .NET MAUI einen Typkonverter und einen impliziten Konvertierungsoperator enthält, der den stringbasierten URI in ein UrlWebViewSource-Objekt umwandelt.
Konfigurieren der App-Transport-Sicherheit auf iOS und Mac Catalyst
Seit Version 9 erlaubt iOS Ihrer App nur noch die Kommunikation mit sicheren Servern. Eine App muss aktiv die Kommunikation mit unsicheren Servern ermöglichen.
Die folgende Info.plist-Konfiguration zeigt, wie eine bestimmte Domäne aktiviert werden kann, um die Apple Transport Security (ATS) Anforderungen zu umgehen:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>mydomain.com</key>
<dict>
<key>NSIncludesSubdomains</key>
<true/>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
<key>NSTemporaryExceptionMinimumTLSVersion</key>
<string>TLSv1.1</string>
</dict>
</dict>
</dict>
Es empfiehlt sich, die Umgehung von ATS nur für bestimmte Domänen zuzulassen, damit Sie vertrauenswürdige Websites nutzen können, während Sie auf nicht vertrauenswürdigen Domänen von zusätzlicher Sicherheit profitieren.
Die folgende Info.plist-Konfiguration zeigt, wie ATS für eine App deaktiviert werden kann:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
Wichtig
Wenn Ihre App eine Verbindung zu einer unsicheren Website erfordert, sollten Sie die Domäne immer als Ausnahme mit dem Schlüssel NSExceptionDomains eingeben, anstatt ATS mit dem Schlüssel NSAllowsArbitraryLoads vollständig zu deaktivieren.
Lokales HTML anzeigen
Um Inline-HTML anzuzeigen, setzen Sie die Eigenschaft Source auf ein HtmlWebViewSource-Objekt:
<WebView>
<WebView.Source>
<HtmlWebViewSource Html="<HTML><BODY><H1>.NET MAUI</H1><P>Welcome to WebView.</P></BODY><HTML>" />
</WebView.Source>
</WebView>
In XAML können HTML-Zeichenfolgen durch das Escapen der Symbole < und > unlesbar werden. Daher kann der HTML-Code zur besseren Lesbarkeit in einen CDATA-Abschnitt eingefügt werden:
<WebView>
<WebView.Source>
<HtmlWebViewSource>
<HtmlWebViewSource.Html>
<![CDATA[
<HTML>
<BODY>
<H1>.NET MAUI</H1>
<P>Welcome to WebView.</P>
</BODY>
</HTML>
]]>
</HtmlWebViewSource.Html>
</HtmlWebViewSource>
</WebView.Source>
</WebView>
Der entsprechende C#-Code lautet:
WebView webView = new WebView
{
Source = new HtmlWebViewSource
{
Html = @"<HTML><BODY><H1>.NET MAUI</H1><P>Welcome to WebView.</P></BODY></HTML>"
}
};
Anzeigen einer lokalen HTML-Datei
Um eine lokale HTML-Datei anzuzeigen, fügen Sie die Datei in den Ordner Resources\Raw Ihres App-Projekts ein und setzen die Build-Aktion auf MauiAsset. Dann kann die Datei aus Inline-HTML geladen werden, das in einem HtmlWebViewSource-Objekt definiert ist, das als Wert der Source-Eigenschaft festgelegt ist:
<WebView>
<WebView.Source>
<HtmlWebViewSource>
<HtmlWebViewSource.Html>
<![CDATA[
<html>
<head>
</head>
<body>
<h1>.NET MAUI</h1>
<p>The CSS and image are loaded from local files!</p>
<p><a href="localfile.html">next page</a></p>
</body>
</html>
]]>
</HtmlWebViewSource.Html>
</HtmlWebViewSource>
</WebView.Source>
</WebView>
Die lokale HTML-Datei kann Cascading Style Sheets (CSS), JavaScript und Bilder laden, wenn diese ebenfalls mit der MauiAsset Build-Aktion zu Ihrem App-Projekt hinzugefügt wurden.
Weitere Informationen zu Rohdaten finden Sie unter Rohdaten.
Inhalt neu laden
WebView hat eine Reload-Methode, die aufgerufen werden kann, um seine Quelle neu zu laden:
WebView webView = new WebView();
...
webView.Reload();
Wenn die Reload-Methode aufgerufen wird, wird das ReloadRequested-Ereignis ausgelöst, das angibt, dass eine Anforderung zum erneuten Laden des aktuellen Inhalts vorgenommen wurde.
Durchführen der Navigation
WebView unterstützt die programmatische Navigation mit den Methoden GoBack und GoForward. Diese Methoden ermöglichen die Navigation durch den WebView-Seitenstapel und sollten erst aufgerufen werden, nachdem die Werte der CanGoBack- und CanGoForward-Eigenschaften überprüft wurden:
WebView webView = new WebView();
...
// Go backwards, if allowed.
if (webView.CanGoBack)
{
webView.GoBack();
}
// Go forwards, if allowed.
if (webView.CanGoForward)
{
webView.GoForward();
}
Wenn eine Seitennavigation in einem WebView erfolgt, entweder programmatisch oder durch den Benutzer initiiert, treten die folgenden Ereignisse auf:
Navigating, die bei Beginn der Seitennavigation ausgelöst wird. DasWebNavigatingEventArgs-Objekt, das dasNavigating-Ereignis begleitet, definiert eineCancel-Eigenschaft vom Typbool, die zum Abbrechen der Navigation verwendet werden kann.Navigated, die ausgelöst wird, wenn die Seitennavigation abgeschlossen ist. DasWebNavigatedEventArgs-Objekt, das dasNavigated-Ereignis begleitet, definiert eineResult-Eigenschaft vom TypWebNavigationResult, die das Navigationsergebnis angibt.
Handhabung von Berechtigungen unter Android
Wenn eine Seite aufgerufen wird, die den Zugriff auf die Aufnahmehardware des Geräts, wie etwa die Kamera oder das Mikrofon, anfordert, muss die Erlaubnis über das WebView-Steuerelement erteilt werden. Das WebView-Steuerelement verwendet unter Android den Typ Android.Webkit.WebChromeClient, um auf Genehmigungsanfragen zu reagieren. Die von .NET MAUI bereitgestellte WebChromeClient-Implementierung ignoriert jedoch Genehmigungsanfragen. Sie müssen einen neuen Typ erstellen, der von MauiWebChromeClient erbt und die Genehmigungsanträge genehmigt.
Wichtig
Die Anpassung des WebView zur Genehmigung von Genehmigungsanfragen mit diesem Ansatz erfordert Android API 26 oder höher.
Die Berechtigungsanfragen von einer Webseite an das WebView-Steuerelement unterscheiden sich von den Berechtigungsanfragen von der .NET MAUI-App an den Benutzer. .NET MAUI App-Berechtigungen werden von Benutzer*innen für die gesamte App angefordert und genehmigt. Die WebView-Steuerung ist abhängig von der Fähigkeit der App, auf die Hardware zuzugreifen. Zur Veranschaulichung dieses Konzepts betrachten wir eine Webseite, die den Zugriff auf die Kamera des Geräts anfordert. Selbst wenn diese Anforderung vom WebView-Steuerelement genehmigt wird, die .NET-MAUI-App aber keine Genehmigung des Benutzers für den Zugriff auf die Kamera hat, kann die Webseite nicht auf die Kamera zugreifen.
Die folgenden Schritte zeigen, wie Sie Genehmigungsanfragen des WebView-Steuerelements zur Verwendung der Kamera abfangen. Wenn Sie versuchen, das Mikrofon zu verwenden, sind die Schritte ähnlich, mit dem Unterschied, dass Sie mikrofonbezogene Berechtigungen anstelle von kamerabezogenen Berechtigungen verwenden würden.
Fügen Sie zunächst die erforderlichen App-Berechtigungen zum Android-Manifest hinzu. Öffnen Sie die Datei Platforms/Android/AndroidManifest.xml und fügen Sie Folgendes im Knoten
manifesthinzu:<uses-permission android:name="android.permission.CAMERA" />Zu einem bestimmten Zeitpunkt in Ihrer App, z. B. wenn die Seite mit einem
WebView-Steuerelement geladen wird, fordern Sie die Erlaubnis der Benutzer*innen an, der App den Zugriff auf die Kamera zu gestatten.private async Task RequestCameraPermission() { PermissionStatus status = await Permissions.CheckStatusAsync<Permissions.Camera>(); if (status != PermissionStatus.Granted) await Permissions.RequestAsync<Permissions.Camera>(); }Fügen Sie die folgende Klasse in den Ordner Platforms/Android ein und ändern Sie den Stamm-Namenspace so, dass er dem Namenspace Ihres Projekts entspricht:
using Android.Webkit; using Microsoft.Maui.Handlers; using Microsoft.Maui.Platform; namespace MauiAppWebViewHandlers.Platforms.Android; internal class MyWebChromeClient: MauiWebChromeClient { public MyWebChromeClient(IWebViewHandler handler) : base(handler) { } public override void OnPermissionRequest(PermissionRequest request) { // Process each request foreach (var resource in request.GetResources()) { // Check if the web page is requesting permission to the camera if (resource.Equals(PermissionRequest.ResourceVideoCapture, StringComparison.OrdinalIgnoreCase)) { // Get the status of the .NET MAUI app's access to the camera PermissionStatus status = Permissions.CheckStatusAsync<Permissions.Camera>().Result; // Deny the web page's request if the app's access to the camera is not "Granted" if (status != PermissionStatus.Granted) request.Deny(); else request.Grant(request.GetResources()); return; } } base.OnPermissionRequest(request); } }Im vorangegangenen Ausschnitt erbt die Klasse
MyWebChromeClientvonMauiWebChromeClientund überschreibt die MethodeOnPermissionRequest, um Anfragen zur Erlaubnis von Webseiten abzufangen. Jedes Berechtigungselement wird daraufhin überprüft, ob es mit der ZeichenfolgenkonstantePermissionRequest.ResourceVideoCaptureübereinstimmt, die für die Kamera steht. Wenn eine Kamerazulassung übereinstimmt, prüft der Code, ob die App die Erlaubnis hat, die Kamera zu verwenden. Wenn sie die Erlaubnis hat, wird der Anfrage der Webseite stattgegeben.Verwenden Sie die Methode SetWebChromeClient auf dem
WebView-Steuerelement von Android, um den Chrome-Client aufMyWebChromeClientzu setzen. Die folgenden beiden Punkte zeigen, wie Sie den Chrome-Client einstellen können:Bei einem .NET MAUI
WebView-Steuerelement mit dem NamentheWebViewControlkönnen Sie den Chrome-Client direkt auf der Plattformansicht, d. h. dem Android-Steuerelement, einstellen:((IWebViewHandler)theWebViewControl.Handler).PlatformView.SetWebChromeClient(new MyWebChromeClient((IWebViewHandler)theWebViewControl.Handler));Sie können auch die Zuordnung von Handler-Eigenschaften verwenden, um alle
WebView-Steuerelemente zu zwingen, Ihren Chrome-Client zu verwenden. Für weitere Informationen siehe Handler.Die
CustomizeWebViewHandler-Methode des folgenden Schnipsels sollte beim Start der App aufgerufen werden, wie etwa in derMauiProgram.CreateMauiApp-Methode.private static void CustomizeWebViewHandler() { #if ANDROID26_0_OR_GREATER Microsoft.Maui.Handlers.WebViewHandler.Mapper.ModifyMapping( nameof(Android.Webkit.WebView.WebChromeClient), (handler, view, args) => handler.PlatformView.SetWebChromeClient(new MyWebChromeClient(handler))); #endif }
Cookies festlegen
Cookies können auf einer WebView gesetzt werden, sodass sie mit der Webanfrage an die angegebene URL gesendet werden. Legen Sie die Cookies fest, indem Sie Cookie-Objekte zu einem CookieContainer hinzufügen, und legen Sie dann den Container als Wert der WebView.Cookies bindbaren Eigenschaft fest. Der folgende Code zeigt ein Beispiel:
using System.Net;
CookieContainer cookieContainer = new CookieContainer();
Uri uri = new Uri("https://learn.microsoft.com/dotnet/maui", UriKind.RelativeOrAbsolute);
Cookie cookie = new Cookie
{
Name = "DotNetMAUICookie",
Expires = DateTime.Now.AddDays(1),
Value = "My cookie",
Domain = uri.Host,
Path = "/"
};
cookieContainer.Add(uri, cookie);
webView.Cookies = cookieContainer;
webView.Source = new UrlWebViewSource { Url = uri.ToString() };
In diesem Beispiel wird dem Objekt CookieContainer ein einzelnes Cookie hinzugefügt, das dann als Wert der Eigenschaft WebView.Cookies festgelegt wird. Wenn der WebView eine Webanfrage an die angegebene URL sendet, wird das Cookie mit der Anfrage gesendet.
Aufrufen von JavaScript
WebView bietet die Möglichkeit, eine JavaScript-Funktion von C# aus aufzurufen und ein beliebiges Ergebnis an den aufrufenden C#-Code zurückzugeben. Dieses Zusammenspiel wird mit der Methode EvaluateJavaScriptAsync erreicht, die im folgenden Beispiel gezeigt wird:
Entry numberEntry = new Entry { Text = "5" };
Label resultLabel = new Label();
WebView webView = new WebView();
...
int number = int.Parse(numberEntry.Text);
string result = await webView.EvaluateJavaScriptAsync($"factorial({number})");
resultLabel.Text = $"Factorial of {number} is {result}.";
Die Methode WebView.EvaluateJavaScriptAsync wertet das als Argument angegebene JavaScript aus und gibt das Ergebnis als string zurück. In diesem Beispiel wird die JavaScript-Funktion factorial aufgerufen, die als Ergebnis die Fakultät von number liefert. Diese JavaScript-Funktion wird in der lokalen HTML-Datei definiert, die von WebView geladen wird, und ist im folgenden Beispiel dargestellt:
<html>
<body>
<script type="text/javascript">
function factorial(num) {
if (num === 0 || num === 1)
return 1;
for (var i = num - 1; i >= 1; i--) {
num *= i;
}
return num;
}
</script>
</body>
</html>
Konfigurieren Sie die native WebView auf iOS und Mac Catalyst
Das native WebView-Steuerelement ist ein MauiWKWebView auf iOS und Mac Catalyst, das von WKWebView abgeleitet ist. Eine der MauiWKWebView-Konstruktorüberladungen ermöglicht die Angabe eines WKWebViewConfiguration-Objekts, das Informationen darüber liefert, wie das WKWebView-Objekt zu konfigurieren ist. Zu den typischen Konfigurationen gehören die Einstellung des Benutzeragenten, die Angabe von Cookies, die für Ihre Webinhalte verfügbar gemacht werden sollen, und die Einbindung benutzerdefinierter Skripte in Ihre Webinhalte.
Sie können ein WKWebViewConfiguration-Objekt in Ihrer App erstellen und dann seine Eigenschaften nach Bedarf konfigurieren. Alternativ können Sie auch die statische MauiWKWebView.CreateConfiguration-Methode aufrufen, um das WKWebViewConfiguration-Objekt von .NET MAUI abzurufen und es dann zu ändern. Das WKWebViewConfiguration-Objekt kann dann als Argument für die MauiWKWebView-Konstruktorüberladung angegeben werden.
Da die Konfiguration des nativen WebView unter iOS und Mac Catalyst nicht mehr geändert werden kann, sobald die Plattformansicht des Handlers erstellt ist, sollten Sie einen benutzerdefinierten Handler-Fabrikdelegaten erstellen, um ihn zu ändern:
#if IOS || MACCATALYST
using WebKit;
using CoreGraphics;
using Microsoft.Maui.Platform;
using Microsoft.Maui.Handlers;
#endif
...
#if IOS || MACCATALYST
Microsoft.Maui.Handlers.WebViewHandler.PlatformViewFactory = (handler) =>
{
WKWebViewConfiguration config = MauiWKWebView.CreateConfiguration();
config.ApplicationNameForUserAgent = "MyProduct/1.0.0";
return new MauiWKWebView(CGRect.Empty, (WebViewHandler)handler, config);
};
#endif
Hinweis
Sie sollten MauiWKWebView mit einem WKWebViewConfiguration-Objekt konfigurieren, bevor ein WebView in Ihrer App angezeigt wird. Geeignete Stellen hierfür sind im Startpfad Ihrer App, wie etwa in MauiProgram.cs oder App.xaml.cs.
Einstellungen für die Medienwiedergabe auf iOS und Mac Catalyst festlegen
Die Inline-Medienwiedergabe von HTML5-Videos, einschließlich Autoplay und Bild-in-Bild, ist standardmäßig für WebView auf iOS und Mac Catalyst aktiviert. Um diese Standardeinstellung zu ändern oder andere Medienwiedergabeeinstellungen festzulegen, sollten Sie einen benutzerdefinierten Handler-Fabrikdelegaten erstellen, da die Medienwiedergabeeinstellungen nicht mehr geändert werden können, sobald die Plattformansicht des Handlers erstellt wurde. Der folgende Code zeigt ein Beispiel für diese Vorgehensweise:
#if IOS || MACCATALYST
using WebKit;
using CoreGraphics;
using Microsoft.Maui.Platform;
using Microsoft.Maui.Handlers;
#endif
...
#if IOS || MACCATALYST
Microsoft.Maui.Handlers.WebViewHandler.PlatformViewFactory = (handler) =>
{
WKWebViewConfiguration config = MauiWKWebView.CreateConfiguration();
// True to play HTML5 videos inliine, false to use the native full-screen controller.
config.AllowsInlineMediaPlayback = false;
// True to play videos over AirPlay, otherwise false.
config.AllowsAirPlayForMediaPlayback = false;
// True to let HTML5 videos play Picture in Picture.
config.AllowsPictureInPictureMediaPlayback = false;
// Media types that require a user gesture to begin playing.
config.MediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypes.All;
return new MauiWKWebView(CGRect.Empty, (WebViewHandler)handler, config);
};
#endif
Weitere Informationen zum Konfigurieren einer WebView auf iOS finden Sie unter Konfigurieren der nativen Webansicht auf iOS und Mac Catalyst.
Eine WebView auf Mac Catalyst inspizieren
Um die Safari-Entwicklerwerkzeuge zu verwenden, um den Inhalt eines WebView auf Mac Catalyst zu prüfen, fügen Sie den folgenden Code zu Ihrer App hinzu:
#if MACCATALYST
Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("Inspect", (handler, view) =>
{
if (OperatingSystem.IsMacCatalystVersionAtLeast(16, 6))
handler.PlatformView.Inspectable = true;
});
#endif
Dieser Code passt den Eigenschaftszuweiser für WebViewHandler auf Mac Catalyst an, damit WebView-Inhalte von Safari-Entwicklerwerkzeugen inspiziert werden können. Für weitere Informationen über Handler, siehe Handler.
So verwenden Sie die Safari-Entwicklerwerkzeuge mit einer Mac Catalyst-App:
- Öffnen Sie Safari auf Ihrem Mac.
- Aktivieren Sie in Safari das Kontrollkästchen Safari > Einstellungen > Erweitert > Entwicklungsmenü in der Menüleiste anzeigen.
- Führen Sie Ihre .NET MAUI Mac Catalyst-App aus.
- Wählen Sie in Safari das Menü Entwickeln > {Gerätename} aus, wobei der Platzhalter
{Device name}Ihr Gerätename ist, wie etwaMacbook Pro. Wählen Sie dann den Eintrag unter dem Namen Ihrer App aus, wodurch Ihre laufende App ebenfalls hervorgehoben wird. Daraufhin wird das Fenster Web-Inspektor angezeigt.
Starten Sie den Systembrowser
Es ist möglich, einen URI im System-Webbrowser mit der Klasse Launcher zu öffnen, die von Microsoft.Maui.Essentials bereitgestellt wird. Rufen Sie die OpenAsync-Methode des Launcher auf und übergeben Sie ein string- oder Uri-Argument, das den zu öffnenden URI darstellt:
await Launcher.OpenAsync("https://learn.microsoft.com/dotnet/maui");
Für weitere Informationen siehe Launcher.
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für