Aracılığıyla paylaş

WebView

  • Makale

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI), WebView bir uygulamada uzak web sayfalarını, yerel HTML dosyalarını ve HTML dizelerini görüntüler. Görüntülenen WebView içerik, Basamaklı Stil Sayfaları (CSS) ve JavaScript desteği içerir. .NET MAUI projeleri varsayılan olarak uzak bir web sayfasını görüntülemek için WebView gereken platform izinlerini içerir.

WebView aşağıdaki özellikleri tanımlar:

  • Cookiestüründe CookieContainer, tanımlama bilgileri koleksiyonu için depolama alanı sağlar.
  • CanGoBack, türündeki boolkullanıcının önceki sayfalara gidip gitemeyeceğini gösterir. Bu salt okunur bir özelliktir.
  • CanGoForwardbooltüründe, kullanıcının ileriye gidip gitemeyeceğini gösterir. Bu salt okunur bir özelliktir.
  • Source, türünde WebViewSource, öğesinin görüntülediği WebView konumu temsil eder.
  • UserAgent, türündeki stringkullanıcı aracısını temsil eder. Varsayılan değer, temel alınan platform tarayıcısının kullanıcı aracısıdır veya null belirlenemezse.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Source özelliği, her ikisi de öğesinden WebViewSourcetüretilen bir UrlWebViewSourceHtmlWebViewSource nesneye veya nesneye ayarlanabilir. , UrlWebViewSource URL ile belirtilen bir web sayfasını yüklemek için kullanılırken, nesne HtmlWebViewSource ise yerel HTML dosyasını veya yerel HTML'yi yüklemek için kullanılır.

WebView sayfa gezintisi başladığında tetiklenen bir Navigating olayı ve sayfa gezintisi tamamlandığında tetiklenen olayı Navigated tanımlar. Olaya WebNavigatingEventArgs eşlik eden nesne, gezintiyi Navigating iptal etmek için kullanılabilecek türde bool bir Cancel özellik tanımlar. Olaya WebNavigatedEventArgs eşlik Navigated eden nesne, gezinti sonucunu gösteren türde WebNavigationResult bir Result özellik tanımlar.

Önemli

bir WebView , StackLayoutveya VerticalStackLayoutiçinde bulunduğunda HorizontalStackLayoutve WidthRequest özelliklerini belirtmelidirHeightRequest. Bu özellikleri belirtmezseniz, WebView işlenmez.

Web sayfası görüntüleme

Uzak bir web sayfasını görüntülemek için özelliğini URI'yi belirten bir string olarak ayarlayınSource:

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

Eşdeğer C# kodu:

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

URI'ler belirtilen protokolle tam olarak oluşturulmalıdır.

Not

Source özelliği türünde WebViewSourceolmasına rağmen, özelliği dize tabanlı bir URI'ye ayarlanabilir. Bunun nedeni.NET MAUI'nin dize tabanlı URI'yi bir nesneye dönüştüren bir tür dönüştürücüsü ve örtük dönüştürme UrlWebViewSource işleci içermesidir.

iOS ve Mac Catalyst'te Uygulama Aktarım Güvenliğini Yapılandırma

Sürüm 9'dan bu yana iOS yalnızca uygulamanızın güvenli sunucularla iletişim kurmasına izin verir. Bir uygulamanın güvenli olmayan sunucularla iletişimi etkinleştirmeyi seçmesi gerekir.

Aşağıdaki Info.plist yapılandırması, belirli bir etki alanının Apple Aktarım Güvenliği (ATS) gereksinimlerini atlamak için nasıl etkinleştirileceği gösterir:

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

Yalnızca belirli etki alanlarının ATS'yi atlamasına olanak tanımak ve güvenilir olmayan etki alanlarında ek güvenlikten yararlanırken güvenilen siteleri kullanmanıza olanak tanımak en iyi yöntemdir.

Aşağıdaki Info.plist yapılandırması, bir uygulama için ATS'yi devre dışı bırakma işlemini gösterir:

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

Önemli

Uygulamanız güvenli olmayan bir web sitesine bağlantı gerektiriyorsa, anahtarı kullanarak NSExceptionDomains ATS'yi tamamen NSAllowsArbitraryLoads kapatmak yerine etki alanını her zaman özel durum olarak girmeniz gerekir.

Yerel HTML'i görüntüle

Satır içi HTML görüntülemek için özelliğini bir HtmlWebViewSource nesne olarak ayarlayınSource:

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

XAML'de VE > simgelerinden kaçış < nedeniyle HTML dizeleri okunamaz hale gelebilir. Bu nedenle, daha fazla okunabilirlik için HTML bir CDATA bölümde çizili olabilir:

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

Eşdeğer C# kodu:

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

Yerel HTML dosyası görüntüleme

Yerel bir HTML dosyası görüntülemek için, dosyayı uygulama projenizin Resources\Raw klasörüne ekleyin ve derleme eylemini MauiAsset olarak ayarlayın. Ardından, dosya özelliğin değeri Source olarak ayarlanmış bir HtmlWebViewSource nesnede tanımlanan satır içi HTML'den yüklenebilir:

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

Yerel HTML dosyası, MauiAsset derleme eylemiyle uygulama projenize de eklendiyse, Basamaklı Stil Sayfaları (CSS), JavaScript ve görüntüler yükleyebilir.

Ham varlıklar hakkında daha fazla bilgi için bkz . Ham varlıklar.

İçeriği yeniden yükleme

WebView kaynağını yeniden yüklemek için çağrılabilecek bir Reload yöntemi vardır:

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

Reload Yöntemi çağrıldığında ReloadRequested olay tetiklenir ve geçerli içeriği yeniden yüklemek için bir istekte bulunulduğunu gösterir.

Gezinti gerçekleştirme

WebViewve GoForward yöntemleriyle programlı gezintiyi GoBack destekler. Bu yöntemler sayfa yığınında gezinmeyi WebView etkinleştirir ve yalnızca ve CanGoForward özelliklerinin değerleri CanGoBack incelenirken çağrılmalıdır:

WebView webView = new WebView();
...

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

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

bir WebViewiçinde sayfa gezintisi gerçekleştiğinde, program aracılığıyla veya kullanıcı tarafından başlatılan aşağıdaki olaylar gerçekleşir:

  • Navigating, sayfa gezintisi başladığında oluşturulur. Olaya WebNavigatingEventArgs eşlik eden nesne, gezintiyi Navigating iptal etmek için kullanılabilecek türde bool bir Cancel özellik tanımlar.
  • Navigated, sayfa gezintisi tamamlandığında oluşturulur. Olaya WebNavigatedEventArgs eşlik Navigated eden nesne, gezinti sonucunu gösteren türde WebNavigationResult bir Result özellik tanımlar.

Android'de izinleri işleme

Cihazın kamera veya mikrofon gibi kayıt donanımına erişim isteyen bir sayfaya göz atarken denetim tarafından WebView izin verilmelidir. Denetim, WebView izin isteklerine Android.Webkit.WebChromeClient tepki vermek için Android'de türünü kullanır. Ancak, WebChromeClient .NET MAUI tarafından sağlanan uygulama izin isteklerini yoksayar. İzin isteklerini devralan MauiWebChromeClient ve onaylayan yeni bir tür oluşturmanız gerekir.

Önemli

WebView bu yaklaşımı kullanarak izin isteklerini onaylamak için öğesini özelleştirmek için Android API 26 veya üzeri gerekir.

Web sayfasından denetime yönelik WebView izin istekleri, .NET MAUI uygulamasından kullanıcıya yapılan izin isteklerinden farklıdır. .NET MAUI uygulama izinleri, tüm uygulama için kullanıcı tarafından istenir ve onaylar. Denetim WebView , uygulamaların donanıma erişme yeteneğine bağlıdır. Bu kavramı göstermek için cihazın kamerasına erişim isteyen bir web sayfası düşünün. Bu istek denetim tarafından WebView onaylanmış olsa bile .NET MAUI uygulamasının kameraya erişmek için kullanıcı tarafından onayı olmasa da web sayfası kameraya erişemez.

Aşağıdaki adımlar, kamerayı kullanmak için denetimden gelen izin isteklerinin WebView nasıl kesilip durdurulduğunu gösterir. Mikrofonu kullanmaya çalışıyorsanız, kamerayla ilgili izinler yerine mikrofonla ilgili izinleri kullanmanız dışında adımlar benzer olacaktır.

  1. İlk olarak, Android bildirimine gerekli uygulama izinlerini ekleyin. Platformlar/Android/AndroidManifest.xml dosyasını açın ve düğüme manifest aşağıdakileri ekleyin:

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

  2. Uygulamanızın belirli bir WebView noktasında, örneğin denetim içeren sayfa yüklendiğinde, uygulamanın kameraya erişmesine izin vermek için kullanıcıdan izin isteyin.

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

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

  3. Aşağıdaki sınıfı Platforms/Android klasörüne ekleyerek kök ad alanını projenizin ad alanıyla eşleşecek şekilde değiştirin:

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

    Önceki kod parçacığında MyWebChromeClient , sınıfı öğesinden MauiWebChromeClientdevralır ve web sayfası izin isteklerini kesmek için yöntemini geçersiz kılar OnPermissionRequest . Her izin öğesi, kamerayı temsil eden dize sabiti PermissionRequest.ResourceVideoCapture ile eşleşip eşleşmediğini görmek için denetlenir. Bir kamera izni eşleşirse kod, uygulamanın kamerayı kullanma izni olup olmadığını denetler. İzin varsa, web sayfasının isteği verilir.

  4. Chrome istemcisini SetWebChromeClientMyWebChromeClientolarak ayarlamak için Android'in WebView denetimindeki yöntemini kullanın. Aşağıdaki iki öğe, chrome istemcisini nasıl ayarlayabileceğinizi gösterir:

    • adlı theWebViewControlbir .NET MAUI WebView denetimi verildiğinde chrome istemcisini doğrudan Android denetimi olan platform görünümünde ayarlayabilirsiniz:

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

    • Ayrıca, tüm WebView denetimleri chrome istemcinizi kullanmaya zorlamak için işleyici özellik eşlemesini de kullanabilirsiniz. Daha fazla bilgi için bkz . İşleyiciler.

      Uygulama başlatıldığında aşağıdaki kod parçacığının CustomizeWebViewHandler yöntemi çağrılmalıdır, örneğin yönteminde 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
}

Tanımlama bilgilerini ayarlama

Tanımlama bilgileri, belirtilen URL'ye web isteğiyle gönderilecek şekilde bir WebView üzerinde ayarlanabilir. tanımlama bilgilerini, bir CookieContaineröğesine nesne ekleyerek Cookie ayarlayın ve sonra kapsayıcıyı bağlanabilir özelliğin WebView.Cookies değeri olarak ayarlayın. Aşağıdaki kodda bir örnek gösterilir:

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

Bu örnekte, nesneye CookieContainer tek Cookie bir eklenir ve bu özellik değeri WebView.Cookies olarak ayarlanır. belirtilen URL'ye WebView bir web isteği gönderdiğinde, istekle birlikte tanımlama bilgisi gönderilir.

JavaScript'i çağırma

WebView C# dilinden bir JavaScript işlevi çağırma ve C# kodunu çağıran herhangi bir sonucu döndürme özelliğini içerir. Bu birlikte çalışma aşağıdaki örnekte gösterilen yöntemiyle EvaluateJavaScriptAsync gerçekleştirilir:

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

yöntemi bağımsız WebView.EvaluateJavaScriptAsync değişken olarak belirtilen JavaScript'i değerlendirir ve sonucu olarak stringdöndürür. Bu örnekte, factorial sonuç olarak faktöriyelini number döndüren JavaScript işlevi çağrılır. Bu JavaScript işlevi, yüklenen yerel HTML dosyasında WebView tanımlanır ve aşağıdaki örnekte gösterilmiştir:

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

iOS ve Mac Catalyst üzerinde yerel WebView'ı yapılandırma

Yerel WebView denetim, sürümünden türetilen WKWebViewiOS ve Mac Catalyst üzerindedirMauiWKWebView. Oluşturucu aşırı yüklemelerinden MauiWKWebView biri, nesnenin nasıl yapılandırılacağı hakkında bilgi sağlayan bir WKWebViewConfiguration nesnenin belirtilmesine WKWebView olanak tanır. Tipik yapılandırmalar, kullanıcı aracısını ayarlamayı, web içeriğinizin kullanımına sunulacak tanımlama bilgilerini belirtmeyi ve web içeriğinize özel betikler eklemeyi içerir.

Uygulamanızda bir WKWebViewConfiguration nesne oluşturabilir ve ardından özelliklerini gerektiği gibi yapılandırabilirsiniz. Alternatif olarak statik yöntemini çağırarak MauiWKWebView.CreateConfiguration .NET MAUI'nin WKWebViewConfiguration nesnesini alabilir ve sonra değiştirebilirsiniz. Nesne WKWebViewConfiguration daha sonra oluşturucu aşırı yüklemesine MauiWKWebView bağımsız değişken olarak belirtilebilir.

İşleyicinin platform görünümü oluşturulduktan sonra iOS ve Mac Catalyst'te yerel WebView yapılandırma değiştirilebileceğinden, değiştirmek için özel bir işleyici fabrikası temsilcisi oluşturmanız gerekir:

#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

uygulamanızda görüntülenmeden önce WebView bir WKWebViewConfiguration nesneyle yapılandırmanız MauiWKWebView gerekir. Bunu yapmak için uygun konumlar uygulamanızın başlangıç yolundadır; örneğin , MauiProgram.cs veya App.xaml.cs.

iOS ve Mac Catalyst'te medya kayıttan yürütme tercihlerini ayarlama

Otomatik yürütme ve resimdeki resim de dahil olmak üzere HTML5 videonun satır içi medya kayıttan yürütmesi, iOS ve Mac Catalyst üzerinde varsayılan olarak WebView etkindir. Bu varsayılanı değiştirmek veya diğer medya kayıttan yürütme tercihlerini ayarlamak için, işleyicinin platform görünümü oluşturulduktan sonra medya kayıttan yürütme tercihleri değiştirilebileceğinden özel bir işleyici fabrikası temsilcisi oluşturmanız gerekir. Aşağıdaki kodda bunun bir örneği gösterilmektedir:

#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

iOS'ta yapılandırma WebView hakkında daha fazla bilgi için bkz . iOS ve Mac Catalyst'ta yerel WebView'ı yapılandırma.

Mac'te WebView Catalyst'i inceleme

Mac Catalyst'te safari WebView geliştirici araçlarını kullanarak içeriğini incelemek için aşağıdaki kodu uygulamanıza ekleyin:

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

Bu kod, içeriği Safari geliştirici araçları tarafından denetlenebilir hale getirmek WebView için WebViewHandler Mac Catalyst'in özellik eşleyicisini özelleştirir. İşleyiciler hakkında daha fazla bilgi için bkz . İşleyiciler.

Safari geliştirici araçlarını Mac Catalyst uygulamasıyla kullanmak için:

  1. Mac bilgisayarınızda Safari'i açın.
  2. Safari'de, menü çubuğunda Safari > Ayarlar > Gelişmiş > Geliştirme menüsünü göster onay kutusunu seçin.
  3. .NET MAUI Mac Catalyst uygulamanızı çalıştırın.
  4. Safari'de, yer tutucunun gibi Macbook Procihaz adınız olduğu {Device name} {Cihaz adı} geliştir > menüsünü seçin. Ardından uygulama adınızın altındaki girdiyi seçerek çalışan uygulamanızı da vurgulayabilirsiniz. Bu, Web denetçisi penceresinin görünmesine neden olur.

Sistem tarayıcısını başlatma

tarafından sağlanan Microsoft.Maui.Essentialssınıfıyla Launcher sistem web tarayıcısında bir URI açmak mümkündür. Başlatıcının yöntemini çağırın OpenAsync ve açılacak URI'yi temsil eden bir string veya Uri bağımsız değişkenini geçirin:

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

Daha fazla bilgi için bkz . Launcher.