Dela via

WebView

  • Artikel

.NET Multi-platform App UI (.NET MAUI) WebView visar fjärrwebbsidor, lokala HTML-filer och HTML-strängar i en app. Innehållet som visas i en WebView innehåller stöd för CSS (Cascading Style Sheets) och JavaScript. Som standard innehåller .NET MAUI-projekt de plattformsbehörigheter som krävs för en WebView för att visa en fjärrwebbsida.

WebView definierar följande egenskaper:

  • Cookies, av typen CookieContainer, tillhandahåller lagring för en samling cookies.
  • CanGoBack, av typen bool, anger om användaren kan navigera till föregående sidor. Det här är en skrivskyddad egenskap.
  • CanGoForward, av typen bool, anger om användaren kan navigera framåt. Det här är en skrivskyddad egenskap.
  • Source, av typen WebViewSource, representerar den plats som WebView visar.
  • UserAgent, av typen string, representerar användaragenten. Standardvärdet är användaragenten för den underliggande plattformswebbläsaren eller null om det inte kan fastställas.

Dessa egenskaper stöds av BindableProperty-objekt, så de kan vara mål för databindningar och stylas.

Egenskapen Source kan anges till ett UrlWebViewSource objekt eller ett HtmlWebViewSource objekt som båda härleds från WebViewSource. En UrlWebViewSource används för att läsa in en webbsida som anges med en URL, medan ett HtmlWebViewSource-objekt används för att läsa in en lokal HTML-fil eller lokal HTML.

WebView definierar en Navigating händelse som aktiveras när sidnavigering startar och en Navigated händelse som aktiveras när sidnavigering slutförs. Det WebNavigatingEventArgs objekt som medföljer händelsen Navigating definierar en Cancel egenskap av typen bool som kan användas för att avbryta navigeringen. Det WebNavigatedEventArgs objekt som medföljer händelsen Navigated definierar en Result egenskap av typen WebNavigationResult som anger navigeringsresultatet.

WebView definierar följande händelser:

  • Navigating, som aktiveras när sidnavigering startar. Det WebNavigatingEventArgs objekt som medföljer den här händelsen definierar en Cancel egenskap av typen bool som kan användas för att avbryta navigeringen.
  • Navigated, som aktiveras när sidnavigering slutförs. Det WebNavigatedEventArgs objekt som medföljer den här händelsen definierar en Result egenskap av typen WebNavigationResult som anger navigeringsresultatet.
  • ProcessTerminatedgenereras när en WebView process slutar oväntat. Det WebViewProcessTerminatedEventArgs objekt som medföljer den här händelsen definierar plattformsspecifika egenskaper som anger varför processen misslyckades.

Viktig

En WebView måste ange sina egenskaper för HeightRequest och WidthRequest när den finns i en HorizontalStackLayout, StackLayouteller VerticalStackLayout. Om du underlåter att ange dessa egenskaper kommer WebView inte att återges.

Visa en webbsida

Om du vill visa en fjärrwebbsida anger du egenskapen Source till en string som anger URI:n:

<WebView Source="https://learn.microsoft.com/dotnet/maui" />

Motsvarande C#-kod är:

WebView webvView = new WebView
{
    Source = "https://learn.microsoft.com/dotnet/maui"
};

URI:er måste vara helt utformade med det angivna protokollet.

Not

Trots att egenskapen Source är av typen WebViewSourcekan egenskapen anges till en strängbaserad URI. Det beror på att .NET MAUI innehåller en typkonverterare och en implicit konverteringsoperator som konverterar den strängbaserade URI:n till ett UrlWebViewSource objekt.

Konfigurera App Transport Security på iOS och Mac Catalyst

Sedan version 9 tillåter iOS endast att din app kommunicerar med säkra servrar. En app måste välja att aktivera kommunikation med osäkra servrar.

Följande Info.plist konfiguration visar hur du aktiverar en specifik domän för att kringgå Kraven för Apple Transport Security (ATS):

	<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>

Det är bästa praxis att bara aktivera specifika domäner för att kringgå ATS, så att du kan använda betrodda webbplatser samtidigt som du drar nytta av ytterligare säkerhet på ej betrodda domäner.

Följande Info.plist konfiguration visar hur du inaktiverar ATS för en app:

	<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
	</dict>

Viktig

Om din app kräver en anslutning till en osäker webbplats bör du alltid ange domänen som ett undantag med hjälp av NSExceptionDomains-nyckeln i stället för att stänga av ATS helt med hjälp av NSAllowsArbitraryLoads-nyckeln.

Visa lokal HTML

Om du vill visa infogad HTML anger du egenskapen Source till ett HtmlWebViewSource objekt:

<WebView>
    <WebView.Source>
        <HtmlWebViewSource Html="&lt;HTML&gt;&lt;BODY&gt;&lt;H1&gt;.NET MAUI&lt;/H1&gt;&lt;P&gt;Welcome to WebView.&lt;/P&gt;&lt;/BODY&gt;&lt;HTML&gt;" />
    </WebView.Source>
</WebView>

I XAML kan HTML-strängar bli olästa på grund av att <- och >-symbolerna inte kan läsas. Därför kan HTML för bättre läsbarhet anges i ett CDATA avsnitt:

<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>

Motsvarande C#-kod är:

WebView webView = new WebView
{
    Source = new HtmlWebViewSource
    {
        Html = @"<HTML><BODY><H1>.NET MAUI</H1><P>Welcome to WebView.</P></BODY></HTML>"
    }
};

Visa en lokal HTML-fil

Om du vill visa en lokal HTML-fil lägger du till filen i mappen Resources\Raw i appprojektet och ställer in dess byggåtgärd på MauiAsset. Sedan kan filen laddas in från infogad HTML som är definierad i ett objekt HtmlWebViewSource och som anges som värdet för egenskapen Source.

<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>

Den lokala HTML-filen kan läsa in CSS (Cascading Style Sheets), JavaScript och bilder om de också har lagts till i ditt appprojekt med MauiAsset build-åtgärden.

Mer information om råtillgångar finns i Råtillgångar.

Läsa in innehåll på nytt

WebView har en Reload metod som kan anropas för att läsa in källan igen:

WebView webView = new WebView();
...
webView.Reload();

När Reload-metoden anropas utlöses händelsen ReloadRequested, vilket indikerar att en begäran har gjorts om att läsa in det aktuella innehållet igen.

Utför navigering

WebView stöder programmeringsnavigering med metoderna GoBack och GoForward. Dessa metoder aktiverar navigering via WebView-sidstacken och bör bara anropas efter att du har kontrollerat värdena för egenskaperna CanGoBack och CanGoForward:

WebView webView = new WebView();
...

// Go backwards, if allowed.
if (webView.CanGoBack)
{
    webView.GoBack();
}

// Go forwards, if allowed.
if (webView.CanGoForward)
{
    webView.GoForward();
}

När sidnavigering sker i en WebView, antingen initierad programmatiskt eller av användaren, inträffar följande händelser:

  • Navigating, som aktiveras när sidnavigering startar. Det WebNavigatingEventArgs objekt som medföljer händelsen Navigating definierar en Cancel egenskap av typen bool som kan användas för att avbryta navigeringen.
  • Navigated, som aktiveras när sidnavigering slutförs. Det WebNavigatedEventArgs objekt som medföljer händelsen Navigated definierar en Result egenskap av typen WebNavigationResult som anger navigeringsresultatet.

Hantera behörigheter för Android

När du bläddrar till en sida som begär åtkomst till enhetens inspelningsmaskinvara, till exempel kameran eller mikrofonen, måste behörighet beviljas av WebView-kontrollen. WebView-kontrollen använder Android.Webkit.WebChromeClient typ på Android för att reagera på behörighetsbegäranden. Den WebChromeClient implementeringen som tillhandahålls av .NET MAUI ignorerar dock behörighetsbegäranden. Du måste skapa en ny typ som ärver från MauiWebChromeClient och godkänner behörighetsbegäranden.

Viktig

För att kunna anpassa WebView för att godkänna behörighetsbegäranden med den här metoden krävs Android API 26 eller senare.

Behörighetsbegäranden från en webbsida till WebView kontroll skiljer sig från behörighetsbegäranden från .NET MAUI-appen till användaren. .NET MAUI-appbehörigheter begärs och godkänns av användaren för hela appen. Den WebView kontrollen är beroende av apparnas möjlighet att komma åt maskinvaran. För att illustrera det här konceptet bör du överväga en webbsida som begär åtkomst till enhetens kamera. Även om den begäran godkänns av WebView kontroll, men .NET MAUI-appen inte hade godkännande av användaren att komma åt kameran, skulle webbsidan inte kunna komma åt kameran.

Följande steg visar hur du fångar upp behörighetsbegäranden från WebView kontroll för att använda kameran. Om du försöker använda mikrofonen skulle stegen vara liknande förutom att du skulle använda mikrofonrelaterade behörigheter i stället för kamerarelaterade behörigheter.

  1. Lägg först till nödvändiga appbehörigheter i Android-manifestet. Öppna filen Platforms/Android/AndroidManifest.xml och lägg till följande i noden manifest:

    <uses-permission android:name="android.permission.CAMERA" />

  2. Vid något tillfälle i din app, till exempel när sidan som innehåller en WebView kontroll läses in, begär du behörighet från användaren för att ge appen åtkomst till kameran.

    private async Task RequestCameraPermission()
{
    PermissionStatus status = await Permissions.CheckStatusAsync<Permissions.Camera>();

    if (status != PermissionStatus.Granted)
        await Permissions.RequestAsync<Permissions.Camera>();
}

  3. Lägg till följande klass i mappen Platforms/Android och ändra rotnamnområdet så att det matchar projektets namnområde (lägg inte till .Platforms.Android i namnområdet):

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

    I föregående kodfragment ärver klassen MyWebChromeClient från MauiWebChromeClientoch åsidosätter OnPermissionRequest-metoden för att fånga upp begäranden om webbplatsbehörigheter. Varje behörighetsobjekt kontrolleras för att se om det matchar PermissionRequest.ResourceVideoCapture strängkonstant, som representerar kameran. Om en kamerabehörighet matchas kontrollerar koden om appen har behörighet att använda kameran. Om den har behörighet beviljas webbsidans begäran.

  4. Använd SetWebChromeClient-metoden på Androids WebView-kontroll för att ställa in chrome-klienten på MyWebChromeClient. Följande två objekt visar hur du kan ange chrome-klienten:

    • Med en .NET MAUI-WebView-kontroll med namnet theWebViewControlkan du ange chrome-klienten direkt i plattformsvyn, vilket är Android-kontrollen:

      ((IWebViewHandler)theWebViewControl.Handler).PlatformView.SetWebChromeClient(new MyWebChromeClient((IWebViewHandler)theWebViewControl.Handler));

    • Du kan också använda mappning av hanteraregenskap för att tvinga alla WebView kontroller att använda chrome-klienten. Mer information finns i Handlers.

      Följande kodfragments CustomizeWebViewHandler-metod ska anropas när appen startar, till exempel i metoden MauiProgram.CreateMauiApp.

      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
}

Ange cookies

Cookies kan ställas in på en WebView så att de skickas med webbbegäran till den angivna URL:en. Ställ in cookies genom att lägga till Cookie objekt i en CookieContainer, och ange sedan containern som värdet för den bindbara egenskapen WebView.Cookies. Följande kod visar ett exempel:

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

I det här exemplet läggs en enda Cookie till i CookieContainer-objektet, som sedan anges som värdet för egenskapen WebView.Cookies. När WebView skickar en webbbegäran till den angivna URL:en skickas cookien med begäran.

Anropa JavaScript

WebView innehåller möjligheten att anropa en JavaScript-funktion från C# och returnera eventuella resultat till den anropande C#-koden. Det här interopet utförs med metoden EvaluateJavaScriptAsync, som visas i följande exempel:

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

Metoden WebView.EvaluateJavaScriptAsync utvärderar JavaScript som anges som argumentet och returnerar alla resultat som ett string. I det här exemplet anropas JavaScript-funktionen factorial, som returnerar faktorialen av number som resultat. Den här JavaScript-funktionen definieras i den lokala HTML-fil som WebView läser in och visas i följande exempel:

<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>

Konfigurera den interna WebView på iOS och Mac Catalyst

Den inbyggda WebView-kontrollen är en MauiWKWebView på iOS och Mac Catalyst, som härstammar från WKWebView. En av MauiWKWebView konstruktoröverlagringar gör att ett WKWebViewConfiguration objekt kan anges, vilket ger information om hur du konfigurerar WKWebView-objektet. Vanliga konfigurationer är att ställa in användaragenten, ange cookies för att göra tillgängligt för ditt webbinnehåll och mata in anpassade skript i webbinnehållet.

Du kan skapa ett WKWebViewConfiguration objekt i din app och sedan konfigurera dess egenskaper efter behov. Du kan också anropa metoden static MauiWKWebView.CreateConfiguration för att hämta .NET MAUI:s WKWebViewConfiguration objekt och sedan ändra det. Objektet WKWebViewConfiguration kan sedan anges som ett argument för överladdning av konstruktorn MauiWKWebView.

Eftersom konfigurationen av den interna WebView inte kan ändras på iOS och Mac Catalyst när hanterarens plattformsvy har skapats bör du skapa en anpassad hanterarfabriksdelegat för att ändra den:

#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

Not

Du bör konfigurera MauiWKWebView med ett WKWebViewConfiguration objekt innan en WebView visas i din app. Lämpliga platser för att göra detta finns i appens startsökväg, till exempel i MauiProgram.cs eller App.xaml.cs.

Ange inställningar för medieuppspelning på iOS och Mac Catalyst

Infogad medieuppspelning av HTML5-video, inklusive automatisk uppspelning och bild i bilden, är aktiverad som standard för WebView på iOS och Mac Catalyst. Om du vill ändra den här standardinställningen eller ange andra inställningar för medieuppspelning bör du skapa ett fabriksdelegat för anpassad hanterare eftersom inställningar för medieuppspelning inte kan ändras när hanterarens plattformsvy har skapats. Följande kod visar ett exempel på hur du gör detta:

#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

Mer information om hur du konfigurerar en WebView på iOS finns i Konfigurera den interna WebView på iOS och Mac Catalyst.

Inspektera en WebView på Mac Catalyst

Om du vill använda Safari-utvecklarverktyg för att inspektera innehållet i en WebView på Mac Catalyst lägger du till följande kod i din app:

#if MACCATALYST
        Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("Inspect", (handler, view) =>
        {
            if (OperatingSystem.IsMacCatalystVersionAtLeast(16, 6))
                handler.PlatformView.Inspectable = true;
        });
#endif

Den här koden anpassar egenskapsmapparen för WebViewHandler på Mac Catalyst för att göra WebView innehåll besiktigat av Safari-utvecklarverktyg. Mer information om hanterare finns i Handlers.

Så här använder du Safari-utvecklarverktyg med en Mac Catalyst-app:

  1. Öppna Safari på din Mac.
  2. I Safari markerar du kryssrutan Safari > Inställningar > Avancerat > Visa Utvecklar-menyn i menyraden.
  3. Kör .NET MAUI Mac Catalyst-appen.
  4. I Safari väljer du menyn Utveckla > {Enhetsnamn}, där platshållaren {Device name} är ditt enhetsnamn, till exempel Macbook Pro. Välj sedan posten under ditt appnamn, vilket även markerar din körande app. Detta gör att fönstret för webb-inspektören visas.

Starta systemwebbläsaren

Det går att öppna en URI i systemwebbläsaren med klassen Launcher, som tillhandahålls av Microsoft.Maui.Essentials. Anropa startprogrammets OpenAsync-metod och skicka in ett string- eller Uri argument som representerar den URI som ska öppnas:

await Launcher.OpenAsync("https://learn.microsoft.com/dotnet/maui");

Mer information finns i Launcher.