Sdílet prostřednictvím

WebView

  • Článek

Uživatelské rozhraní aplikace .NET pro více platforem (.NET MAUI) WebView zobrazuje vzdálené webové stránky, místní soubory HTML a řetězce HTML v aplikaci. Obsah zobrazený WebView zahrnuje podporu šablon stylů CSS (Cascading Style Sheet) a JavaScriptu. Ve výchozím nastavení zahrnují projekty .NET MAUI oprávnění platformy požadovaná k WebView zobrazení vzdálené webové stránky.

WebView definuje následující vlastnosti:

  • Cookies, typu CookieContainer, poskytuje ukládání pro kolekci souborů cookie.
  • CanGoBack, typu booloznačuje, zda uživatel může přejít na předchozí stránky. Toto je vlastnost jen pro čtení.
  • CanGoForward, typu booloznačuje, zda uživatel může přecházet vpřed. Toto je vlastnost jen pro čtení.
  • Source, typu WebViewSource, představuje umístění, které WebView se zobrazí.
  • UserAgent, typu string, představuje uživatelský agent. Výchozí hodnota je uživatelský agent základního prohlížeče platformy nebo null pokud ji nelze určit.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

Vlastnost Source lze nastavit na UrlWebViewSource objekt nebo HtmlWebViewSource objekt, který jsou odvozeny z WebViewSource. Používá UrlWebViewSource se k načítání webové stránky zadané s adresou URL, zatímco HtmlWebViewSource objekt se používá k načtení místního souboru HTML nebo místního HTML.

WebView definuje událost vyvolanou Navigating při spuštění navigace na stránce a Navigated událost vyvolanou při dokončení navigace na stránce. Objekt WebNavigatingEventArgs , který doprovází Navigating událost, definuje Cancel vlastnost typu bool , který lze použít ke zrušení navigace. Objekt WebNavigatedEventArgs , který doprovází Navigated událost, definuje Result vlastnost typu WebNavigationResult , která označuje výsledek navigace.

WebView definuje následující události:

  • Navigating, který se vyvolá při spuštění navigace na stránce. Objekt WebNavigatingEventArgs , který doprovází tuto událost, definuje Cancel vlastnost typu bool , který lze použít ke zrušení navigace.
  • Navigated, který je vyvolán po dokončení navigace na stránce. Objekt WebNavigatedEventArgs , který doprovází tuto událost, definuje Result vlastnost typu WebNavigationResult , která označuje výsledek navigace.
  • ProcessTerminated, který se vyvolá, když WebView proces neočekávaně skončí. Objekt WebViewProcessTerminatedEventArgs , který doprovází tuto událost, definuje vlastnosti specifické pro platformu, které označují, proč proces selhal.

Důležité

A WebView musí určit jeho HeightRequest a WidthRequest vlastnosti, pokud jsou obsaženy HorizontalStackLayoutStackLayoutv , nebo VerticalStackLayout. Pokud tyto vlastnosti nezadáte, nevykreslí se WebView .

Zobrazení webové stránky

Pokud chcete zobrazit vzdálenou webovou stránku, nastavte Source vlastnost na string hodnotu, která určuje identifikátor URI:

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

Ekvivalentní kód jazyka C# je:

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

Identifikátory URI musí být plně vytvořeny pomocí zadaného protokolu.

Poznámka:

Source Navzdory vlastnosti typu WebViewSourcelze vlastnost nastavit na identifikátor URI založený na řetězci. Důvodem je to, že rozhraní .NET MAUI obsahuje převaděč typů a implicitní převodní operátor, který převádí identifikátor URI založený na řetězci na UrlWebViewSource objekt.

Konfigurace služby App Transport Security v systémech iOS a Mac Catalyst

Vzhledem k tomu, že verze 9, iOS umožní vaší aplikaci komunikovat pouze se zabezpečenými servery. Aplikace se musí rozhodnout povolit komunikaci se nezabezpečenými servery.

Následující konfigurace Info.plist ukazuje, jak povolit konkrétní doméně obejít požadavky 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>

Osvědčeným postupem je povolit pouze určité domény, které by mohly obejít ATS, což umožňuje používat důvěryhodné weby a zároveň využívat další zabezpečení nedůvěryhodných domén.

Následující konfigurace Info.plist ukazuje, jak zakázat ATS pro aplikaci:

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

Důležité

Pokud vaše aplikace vyžaduje připojení k nezabezpečeným webům, měli byste vždy zadat doménu jako výjimku pomocí NSExceptionDomains klíče místo úplného vypnutí ATS pomocí NSAllowsArbitraryLoads klíče.

Zobrazení místního HTML

Pokud chcete zobrazit vložený kód HTML, nastavte Source vlastnost na 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>

V jazyce XAML se řetězce HTML můžou stát nečitelným z důvodu zapouzdření < symbolů a > symbolů. Proto pro větší čitelnost html lze vložit do oddílu CDATA :

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

Ekvivalentní kód jazyka C# je:

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

Zobrazení místního souboru HTML

Pokud chcete zobrazit místní soubor HTML, přidejte ho do složky Resources\Raw projektu aplikace a nastavte její akci sestavení na MauiAsset. Pak lze soubor načíst z vloženého kódu HTML, který je definován v HtmlWebViewSource objektu, který je nastaven jako hodnota Source vlastnosti:

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

Místní soubor HTML může načíst šablony stylů CSS (Cascading Style Sheets), JavaScript a obrázky, pokud byly také přidány do projektu aplikace pomocí akce sestavení MauiAsset .

Další informace o nezpracovaných prostředcích najdete v tématu Nezpracované prostředky.

Opětovné načtení obsahu

WebView má metodu Reload , kterou lze volat k opětovnému načtení jeho zdroje:

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

Reload Při vyvolání ReloadRequested metody se aktivuje událost, což značí, že požadavek byl proveden k opětovnému načtení aktuálního obsahu.

Provádění navigace

WebView podporuje programovou navigaci pomocí GoBack metod a GoForward metod. Tyto metody umožňují navigaci v zásobníku WebView stránek a měly by být volány pouze po kontrole hodnot CanGoBack a CanGoForward vlastností:

WebView webView = new WebView();
...

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

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

Když se navigace na stránce vyskytuje buď prostřednictvím WebViewkódu programu, nebo uživatelem, dojde k následujícím událostem:

  • Navigating, který je vyvolán při spuštění navigace na stránce. Objekt WebNavigatingEventArgs , který doprovází Navigating událost, definuje Cancel vlastnost typu bool , který lze použít ke zrušení navigace.
  • Navigated, který je vyvolán při dokončení navigace na stránce. Objekt WebNavigatedEventArgs , který doprovází Navigated událost, definuje Result vlastnost typu WebNavigationResult , která označuje výsledek navigace.

Zpracování oprávnění v Androidu

Při přechodu na stránku, která požaduje přístup k hardwaru záznamu zařízení, jako je fotoaparát nebo mikrofon, musí mít ovládací prvek udělená WebView oprávnění. Ovládací WebView prvek používá typ v Androidu Android.Webkit.WebChromeClient k reakci na žádosti o oprávnění. Implementace WebChromeClient poskytovaná rozhraním .NET MAUI však ignoruje žádosti o oprávnění. Musíte vytvořit nový typ, který dědí MauiWebChromeClient a schválí žádosti o oprávnění.

Důležité

Přizpůsobení WebView žádosti o oprávnění ke schválení pomocí tohoto přístupu vyžaduje rozhraní Android API 26 nebo novější.

Žádosti o oprávnění z webové stránky na WebView ovládací prvek se liší od žádostí o oprávnění z aplikace .NET MAUI pro uživatele. Oprávnění aplikace .NET MAUI požaduje a schválí uživatel pro celou aplikaci. Ovládací WebView prvek závisí na schopnosti aplikací přistupovat k hardwaru. Pro ilustraci tohoto konceptu zvažte webovou stránku, která požaduje přístup ke kameře zařízení. I když je tato žádost schválena WebView ovládacím prvku, aplikace .NET MAUI ještě neměla schválení uživatelem pro přístup k fotoaparátu, webová stránka by neměla přístup k fotoaparátu.

Následující kroky ukazují, jak zachytit žádosti o oprávnění od WebView ovládacího prvku pro použití kamery. Pokud se pokoušíte použít mikrofon, postup by byl podobný s tím rozdílem, že byste místo oprávnění souvisejících s fotoaparátem použili oprávnění související s mikrofonem.

  1. Nejprve přidejte požadovaná oprávnění aplikace do manifestu Androidu. Otevřete soubor Platforms/Android/AndroidManifest.xml a do uzlu přidejte následujícímanifest:

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

  2. V určitém okamžiku v aplikaci, například když se načte stránka obsahující WebView ovládací prvek, požádejte uživatele o oprávnění, aby aplikaci povolil přístup k fotoaparátu.

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

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

  3. Do složky Platforms/Android přidejte následující třídu a změňte kořenový obor názvů tak, aby odpovídal oboru názvů vašeho projektu:

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

    V předchozím fragmentu MyWebChromeClient kódu třída dědí z MauiWebChromeClienta přepíše metodu OnPermissionRequest pro zachycení žádostí o oprávnění webové stránky. Každá položka oprávnění se zkontroluje, jestli odpovídá řetězcové PermissionRequest.ResourceVideoCapture konstantě, která představuje kameru. Pokud se shodují oprávnění fotoaparátu, kód zkontroluje, jestli má aplikace oprávnění k používání fotoaparátu. Pokud má oprávnění, žádost o webovou stránku se udělí.

  4. SetWebChromeClient Pomocí metody v ovládacím prvku Android WebView nastavte klienta chrome na MyWebChromeClient. Následující dvě položky ukazují, jak můžete nastavit klienta chrome:

    • Vzhledem k pojmenovanému theWebViewControlovládacímu prvku .NET MAUI WebView můžete klienta chrome nastavit přímo v zobrazení platformy, což je ovládací prvek Androidu:

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

    • Pomocí mapování vlastností obslužné rutiny můžete také vynutit, aby všechny WebView ovládací prvky používaly klienta chrome. Další informace najdete v tématu Obslužné rutiny.

      Při spuštění aplikace, například v metodě, by se měla volat následující metoda fragmentu MauiProgram.CreateMauiApp kóduCustomizeWebViewHandler.

      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
}

Nastavení souborů cookie

Soubory cookie lze nastavit tak WebView , aby se posílaly s webovým požadavkem na zadanou adresu URL. Nastavte soubory cookie přidáním Cookie objektů do objektu CookieContainera pak nastavte kontejner jako hodnotu WebView.Cookies bindable vlastnosti. Podívejte se na ukázku kódu:

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

V tomto příkladu se do objektu CookieContainer přidá jeden Cookie objekt, který se pak nastaví jako hodnota WebView.Cookies vlastnosti. WebView Když odešle webový požadavek na zadanou adresu URL, soubor cookie se odešle s požadavkem.

Vyvolání JavaScriptu

WebView zahrnuje schopnost vyvolat funkci JavaScriptu z jazyka C# a vrátit jakýkoli výsledek do volajícího kódu C#. Tato spolupráce se provádí s metodou EvaluateJavaScriptAsync , která je znázorněna v následujícím příkladu:

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

Metoda WebView.EvaluateJavaScriptAsync vyhodnocuje JavaScript, který je zadaný jako argument, a vrátí jakýkoli výsledek jako string. V tomto příkladu factorial je vyvolána funkce JavaScriptu, která vrátí faktoriál number výsledku. Tato funkce JavaScriptu je definována v místním souboru HTML, který se WebView načte, a je znázorněna v následujícím příkladu:

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

Konfigurace nativního webového zobrazení v systémech iOS a Mac Catalyst

Nativní WebView ovládací prvek je na MauiWKWebView iOS a Mac Catalyst, který je odvozen od WKWebView. Jedno z MauiWKWebView přetížení konstruktoru WKWebViewConfiguration umožňuje zadat objekt, který poskytuje informace o konfiguraci objektu WKWebView . Mezi typické konfigurace patří nastavení uživatelského agenta, zadání souborů cookie pro zpřístupnění webového obsahu a vložení vlastních skriptů do webového obsahu.

V aplikaci můžete vytvořit WKWebViewConfiguration objekt a podle potřeby nakonfigurovat jeho vlastnosti. Případně můžete zavolat statickou MauiWKWebView.CreateConfiguration metodu, která načte objekt .NET MAUI WKWebViewConfiguration a pak ho upraví. Objekt WKWebViewConfiguration lze poté zadat jako argument přetížení konstruktoru MauiWKWebView .

Vzhledem k tomu, že po vytvoření zobrazení platformy obslužné rutiny není možné v systému iOS a Mac Catalyst změnit konfiguraci nativního WebView objektu pro zpracování, měli byste vytvořit vlastního delegáta obslužné rutiny, který ho upraví:

#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

Poznámka:

Před zobrazením objektu WKWebViewConfiguration WebView v aplikaci byste měli nakonfigurovat MauiWKWebView objekt. Vhodná umístění k tomu jsou ve spouštěcí cestě vaší aplikace, například v MauiProgram.cs nebo App.xaml.cs.

Nastavení předvoleb přehrávání médií v systémech iOS a Mac Catalyst

Vložené přehrávání videa HTML5, včetně automatického přehrávání a obrázku na obrázku, je ve výchozím nastavení povolené pro WebView iOS a Mac Catalyst. Pokud chcete toto výchozí nastavení změnit nebo nastavit jiné předvolby přehrávání médií, měli byste vytvořit delegáta vlastní obslužné rutiny, protože po vytvoření zobrazení platformy obslužné rutiny nelze změnit předvolby přehrávání médií. Následující kód ukazuje příklad tohoto:

#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

Další informace o konfiguraci v iOSu WebView naleznete v tématu Konfigurace nativního webového zobrazení v iOSu a Mac Catalyst.

Kontrola webového zobrazení na Macu Catalyst

Pokud chcete ke kontrole obsahu aplikace WebView Mac Catalyst použít vývojářské nástroje Safari, přidejte do své aplikace následující kód:

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

Tento kód přizpůsobí mapovač vlastností pro WebViewHandler Mac Catalyst, aby byl WebView obsah zkontrolovatelný vývojářskými nástroji Safari. Další informace o obslužných rutinách naleznete v tématu Obslužné rutiny.

Použití vývojářských nástrojů Safari s aplikací Mac Catalyst:

  1. Otevřete Safari na macu.
  2. V Safari zaškrtněte políčko Nabídky Upřesnit > zobrazit vývoj v nastavení Safari > > na řádku nabídek.
  3. Spusťte aplikaci .NET MAUI Mac Catalyst.
  4. V Safari vyberte nabídku Vývoj > {Název zařízení} , kde {Device name} zástupný symbol je název vašeho zařízení, například Macbook Pro. Pak vyberte položku pod názvem vaší aplikace, která také zvýrazní spuštěnou aplikaci. To způsobí, že se zobrazí okno webového inspektoru.

Spuštění systémového prohlížeče

Identifikátor URI je možné otevřít v systémovém webovém prohlížeči s Launcher třídou, kterou poskytuje Microsoft.Maui.Essentials. Volání metody spouštěče OpenAsync a předání string Uri nebo argument, který představuje identifikátor URI k otevření:

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

Další informace najdete ve spouštěči.