Xamarin.Forms Webview

Makale
12/02/2021
Okumak için 11 dakika

WebView , uygulamanıza web ve HTML içeriğini görüntülemeye ilişkin bir görünümdir:

App Browser'da

Content

WebView aşağıdaki içerik türlerini destekler:

HTML & CSS web siteleri – WebView, JavaScript desteği de dahil olmak üzere HTML CSS kullanılarak yazılmış web siteleri için tam destek & içerir.
Belgeler – WebView her platformdaki yerel bileşenler kullanılarak uygulana olduğundan WebView, belgeleri temel alınan platform tarafından desteklenen biçimlerde gösterilebilir.
HTML dizeleri – WebView bellekten HTML dizelerini gösterebilir.
Yerel Dosyalar – WebView, yukarıdaki içerik türlerinden herhangi birini uygulamaya eklenmiş olarak sunabilirsiniz.

Not

WebViewWindows, platformda bir ActiveX destekleseler bile Silverlight, Flash veya Internet Explorer denetimlerini desteklemez.

Web Siteleri

İnternet'e ait bir web sitesini görüntülemek için WebView özelliğini bir Source dize URL'si olarak ayarlayın:

var browser = new WebView
{
  Source = "https://dotnet.microsoft.com/apps/xamarin"
};

Not

URL'ler belirtilen protokolle tam olarak oluşturulmuş olması gerekir (örneğin, bunun yanında "http://" veya "https://" olması gerekir).

iOS ve ATS

Sürüm 9'dan itibaren, iOS yalnızca uygulamanıza varsayılan olarak en iyi yöntem güvenliği uygulayan sunucularla iletişim kurmasına izin verir. Güvenli olmayan sunucularla Info.plist iletişimi etkinleştirmek için değerlerin içinde ayarlanmış olması gerekir.

Not

Uygulamanıza güvenli olmayan bir web sitesi bağlantısı gerekiyorsa, kullanarak ATS'i tamamen kapatma yerine etki alanını her zaman özel durum NSExceptionDomains olarak girmeniz NSAllowsArbitraryLoads gerekir. NSAllowsArbitraryLoads yalnızca aşırı acil durumlarda kullanılmalıdır.

Aşağıda, belirli bir etki alanının (bu örnekte xamarin.com) ATS gereksinimlerini atlamak için nasıl etkinleştirildikleri açıklanır:

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>xamarin.com</key>
            <dict>
                <key>NSIncludesSubdomains</key>
                <true/>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
                <key>NSTemporaryExceptionMinimumTLSVersion</key>
                <string>TLSv1.1</string>
            </dict>
        </dict>
    </dict>
    ...
</key>

Yalnızca bazı etki alanlarının ATS'yi atlayarak güvenilmeyen etki alanlarındaki ek güvenlikten faydalanarak güvenilen siteleri kullanmanıza olanak sağlamak en iyi uygulamadır. Aşağıda, uygulama için ATS'nin devre dışı bırakılmasının daha az güvenli yöntemi gösterildi:

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

iOS 9'daki bu yeni özellik hakkında daha fazla bilgi için bkz. Uygulama Taşıma Güvenliği.

HTML Dizeleri

Kodda dinamik olarak tanımlanmış bir HTML dizesi sunmak için bir örneği oluşturmanız HtmlWebViewSource gerekir:

var browser = new WebView();
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = @"<html><body>
  <h1>Xamarin.Forms</h1>
  <p>Welcome to WebView.</p>
  </body></html>";
browser.Source = htmlSource;

HTML Dizesini Görüntüleyen WebView

Yukarıdaki kodda, HTML'yi bir tam dize değişmez değeri olarak işaretlemek için kullanılır, yani çoğu kaçış @ karakteri yoksayılır. @

Not

html içeriğini görmek için, düzeninin alt olduğu düzene bağlı olarak ve WidthRequestHeightRequest özelliklerini ayarlamak WebViewWebView gerekebilir. Örneğin, bu bir içinde StackLayout gereklidir.

Yerel HTML İçeriği

WebView, uygulamanın içine eklenmiş HTML, CSS ve JavaScript içeriklerini görüntülemenizi sağlar. Örnek:

<html>
  <head>
    <title>Xamarin Forms</title>
  </head>
  <body>
    <h1>Xamarin.Forms</h1>
    <p>This is an iOS web page.</p>
    <img src="XamarinLogo.png" />
  </body>
</html>

CSS:

html,body {
  margin:0;
  padding:10;
}
body,p,h1 {
  font-family: Chalkduster;
}

Yukarıdaki CSS'de belirtilen yazı tiplerinin her platform için özelleştirilmelidir çünkü her platform aynı yazı tiplerini kullanmaz.

kullanarak yerel içeriği görüntülemek için, HTML dosyasını diğer dosyalarda olduğu gibi açmanız ve ardından içeriği bir özelliğine WebView dize Html olarak yüklemeniz HtmlWebViewSource gerekir. Dosyaları açma hakkında daha fazla bilgi için bkz. Dosyalarla Çalışma.

Aşağıdaki ekran görüntüleri, her platformda yerel içeriği görüntülemenin sonucu gösterir:

Yerel İçeriği Görüntüleyen WebView

İlk sayfa yüklenmiş olsa da WebView HTML'nin nereden geldiğiyle ilgili bilgi sahibi değildir. Bu, yerel kaynaklara başvurulan sayfalarla ilgili bir sorundur. Bunun ne zaman olabileceğine örnek olarak yerel sayfalar birbirine bağlantı, bir sayfa ayrı bir JavaScript dosyası veya CSS stil sayfası bağlantıları kullanma gibi örneklerdir.

Bu sorunu çözmek için dosya sistemi üzerinde WebView dosyaların nerede buluneceğini söylemelisiniz. bunu yapmak için BaseUrl tarafından kullanılan üzerinde özelliğini HtmlWebViewSourceWebView ayarlar.

İşletim sistemlerinin her bir dosya sistemi farklı olduğundan, her platformda bu URL'yi belirlemeniz gerekir. Xamarin.Forms , her DependencyService platformda çalışma zamanında bağımlılıkları çözümlemek için 'i sunar.

kullanmak DependencyService için, önce her platformda uygulanan bir arabirim tanımlayın:

public interface IBaseUrl { string Get(); }

Arabirim her platforma uygulanana kadar uygulamanın çalışmayıncaya dikkat edin. Ortak projede kullanarak ayarlamayı BaseUrlDependencyService unutmayın:

var source = new HtmlWebViewSource();
source.BaseUrl = DependencyService.Get<IBaseUrl>().Get();

Daha sonra her platform için arabirim uygulamaları sağlanmalıdır.

iOS

iOS'ta web içeriği, aşağıda da olduğu gibi projenin kök dizininde veya Derleme eylemi BundleResourceile Kaynaklar dizininde olmalıdır:

Visual Studio
Mac için Visual Studio

iOS'ta Yerel Dosyalar

BaseUrl, ana paketin yoluna ayarlanıyor olmalı:

[assembly: Dependency (typeof (BaseUrl_iOS))]
namespace WorkingWithWebview.iOS
{
  public class BaseUrl_iOS : IBaseUrl
  {
    public string Get()
    {
      return NSBundle.MainBundle.BundlePath;
    }
  }
}

Android

Android'de, aşağıda olduğu gibi AndroidAsset derleme eylemiyle VARLıKLAR klasörüne HTML, CSS ve görüntüler girin:

Visual Studio
Mac için Visual Studio

Android'de Yerel Dosyalar

Android'de, BaseUrl olarak ayar "file:///android_asset/" gerekir:

[assembly: Dependency (typeof(BaseUrl_Android))]
namespace WorkingWithWebview.Android
{
  public class BaseUrl_Android : IBaseUrl
  {
    public string Get()
    {
      return "file:///android_asset/";
    }
  }
}

Android'de Assets klasöründeki dosyalara, özelliği tarafından açığa çıkarlan geçerli Android bağlamı aracılığıyla da erişilebilir:

var assetManager = MainActivity.Instance.Assets;
using (var streamReader = new StreamReader (assetManager.Open ("local.html")))
{
  var html = streamReader.ReadToEnd ();
}

Evrensel Windows Platformu

Evrensel Windows Platformu (UWP) projelerinde, derleme eylemi İçerik olarak ayarlanmış şekilde proje köküne HTML, CSS ve görüntüler yer.

BaseUrlolarak ayar "ms-appx-web:///" gerekir:

[assembly: Dependency(typeof(BaseUrl))]
namespace WorkingWithWebview.UWP
{
    public class BaseUrl : IBaseUrl
    {
        public string Get()
        {
            return "ms-appx-web:///";
        }
    }
}

WebView, kullanılabilir olduğu çeşitli yöntemler ve özellikler aracılığıyla gezintiyi destekler:

GoForward() : true ise çağrısı bir sonraki ziyaret edilen sayfaya GoForward gider.
GoBack() : true ise, çağrısı GoBack son ziyaret edilen sayfaya gider.
CanGoBack: tarayıcı başlangıç URL'sinin içinde ise geri false gidilen sayfalar varsa.
CanGoForward: Kullanıcı geriye doğru gezindi ve daha önce ziyaret edilen bir sayfaya geçenin.

Sayfalar WebView içinde, çok dokunmalı hareketleri desteklemez. İçeriğin mobil cihazlar için iyileştirilmiş olduğundan ve yakınlaştırmaya gerek kalmadan göründüğünden emin olmak önemlidir.

Uygulamalar genellikle cihazın tarayıcısı yerine WebView içinde bağlantı gösterir. Bu gibi durumlarda normal gezintiye izin vermek yararlıdır, ancak kullanıcı başlangıç bağlantısındayken geri geldiğinde uygulamanın normal uygulama görünümüne dönmesi gerekir.

Bu senaryoyu etkinleştirmek için yerleşik gezinti yöntemlerini ve özelliklerini kullanın.

Başlangıç olarak tarayıcı görünümü için sayfayı oluşturma:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WebViewSample.InAppBrowserXaml"
             Title="Browser">
    <StackLayout Margin="20">
        <StackLayout Orientation="Horizontal">
            <Button Text="Back" HorizontalOptions="StartAndExpand" Clicked="OnBackButtonClicked" />
            <Button Text="Forward" HorizontalOptions="EndAndExpand" Clicked="OnForwardButtonClicked" />
        </StackLayout>
        <!-- WebView needs to be given height and width request within layouts to render. -->
        <WebView x:Name="webView" WidthRequest="1000" HeightRequest="1000" />
    </StackLayout>
</ContentPage>

Arka kodda:

public partial class InAppBrowserXaml : ContentPage
{
    public InAppBrowserXaml(string URL)
    {
        InitializeComponent();
        webView.Source = URL;
    }

    async void OnBackButtonClicked(object sender, EventArgs e)
    {
        if (webView.CanGoBack)
        {
            webView.GoBack();
        }
        else
        {
            await Navigation.PopAsync();
        }
    }

    void OnForwardButtonClicked(object sender, EventArgs e)
    {
        if (webView.CanGoForward)
        {
            webView.GoForward();
        }
    }
}

İşte bu kadar!

WebView Gezinti Düğmeleri

Ekinlikler

WebView, durum değişikliklerine yanıt verme konusunda yardımcı olmak için aşağıdaki olayları verir:

Navigating – WebView yeni bir sayfa yüklemeye başladığında ortaya çıkar.
Navigated – sayfa yüklendiğinde ve gezinti durdurulurken olay ortaya çıkar.
ReloadRequested – geçerli içeriği yeniden yüklemek için istekte bulundurarak olay ortaya çıkar.

WebNavigatingEventArgsOlayla birlikte gelen nesnenin Navigating dört özelliği vardır:

Cancel – gezintinin iptal edip etmiyrini gösterir.
NavigationEvent – yükseltilmiş gezinti olayı.
Source – gezintiyi gerçekleştirilen öğe.
Url – gezinti hedefi.

WebNavigatedEventArgsOlayla birlikte gelen nesnenin Navigated dört özelliği vardır:

NavigationEvent – yükseltilmiş gezinti olayı.
Result – bir numaralama üyesi kullanarak WebNavigationResult gezintinin sonucundan açıklar. Geçerli değerler Cancel, Failure, Success veya Timeout değerleridir.
Source – gezintiyi gerçekleştirilen öğe.
Url – gezinti hedefi.

Yüklemesi uzun süren web sayfalarını kullanmayı bekliyorsanız, durum göstergesi uygulamak için Navigating ve Navigated olaylarını kullanmayı göz önünde bulundurabilirsiniz. Örnek:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WebViewSample.LoadingLabelXaml"
             Title="Loading Demo">
    <StackLayout>
        <!--Loading label should not render by default.-->
        <Label x:Name="labelLoading" Text="Loading..." IsVisible="false" />
        <WebView HeightRequest="1000" WidthRequest="1000" Source="https://dotnet.microsoft.com/apps/xamarin" Navigated="webviewNavigated" Navigating="webviewNavigating" />
    </StackLayout>
</ContentPage>

İki olay işleyicisi:

void webviewNavigating(object sender, WebNavigatingEventArgs e)
{
    labelLoading.IsVisible = true;
}

void webviewNavigated(object sender, WebNavigatedEventArgs e)
{
    labelLoading.IsVisible = false;
}

Bu, aşağıdaki çıkışa (yükleme) neden olur:

Yükleme Tamamlandı:

İçeriği yeniden yükleme

WebView geçerli Reload içeriği yeniden yüklemek için kullanılan bir yöntemi vardır:

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

yöntemi Reload çağrıldığında, geçerli içeriği yeniden yüklemek için bir ReloadRequested istekte bulundurarak olayı başlatıldı.

Performans

Popüler web tarayıcıları, donanım hızlandırmalı işleme ve JavaScript derlemesi gibi teknolojileri benimser. Xamarin.Forms4.4'den önce, sınıfı tarafından Xamarin.FormsWebView iOS üzerinde UIWebView uygulanmıştı. Ancak, bu teknolojilerin çoğu bu uygulamada kullanılamıyor. Bu Xamarin.Forms nedenle, 4.4'ten itibaren, iOS'ta daha Xamarin.FormsWebView hızlı WkWebView taramayı destekleyen sınıfı tarafından uygulanır.

Not

iOS'ta, WkWebViewRenderer bağımsız değişken kabul eden bir oluşturucu aşırı yüklemesi WkWebViewConfiguration vardır. Bu, işleyicinin oluşturma sırasında yapılandırılmalarını sağlar.

Bir uygulama, uyumluluk nedenleriyle uygulamasını uygulamak için iOS UIWebViewXamarin.FormsWebView sınıfını kullanmaya geri dönebilir. Bu, uygulamanın iOS platform projesinde AssemblyInfo.cs dosyasına aşağıdaki kodu ekleyerek elde edilebilir:

// Opt-in to using UIWebView instead of WkWebView.
[assembly: ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(Xamarin.Forms.Platform.iOS.WebViewRenderer))]

Not

Xamarin.Forms5.0'da WebViewRenderer sınıfı kaldırıldı. Bu Xamarin.Forms nedenle, 5.0 denetim başvurusu UIWebView içermez.

WebView Android'de varsayılan olarak, yerleşik tarayıcı kadar hızlıdır.

UWP WebView, Microsoft Edge altyapısını kullanır. Masaüstü ve tablet cihazları, Edge tarayıcısının kendisiyle aynı performansı görmeli.

İzinler

çalışması WebView için, her platform için izinlerin ayarlanmış olduğundan emin olun. Bazı platformlarda hata ayıklama modunda çalışsa da yayın için hazır WebView olduğunda çalışmaycağna dikkat edin. Bunun nedeni, Android'de İnternet erişimi gibi bazı izinlerin hata ayıklama modundayken varsayılan Mac için Visual Studio olarak ayarlanmıştır.

UWP – ağ içeriği görüntülenirken İnternet (İstemci Sunucusu) özelliğini gerektirir.
Android– yalnızca ağdan içerik görüntüleniyorken gerektirir. Yerel içerik için özel izinler gerekli değildir.
iOS – özel izinler gerektirir.

Layout

Diğer görünümlerden farklı olarak, stackLayout veya RelativeLayout içinde yer alan ve Xamarin.FormsWebViewHeightRequestWidthRequest ifadelerini gerektirir. Bu özellikleri belirtmezseniz, WebView işlanmaz.

Aşağıdaki örneklerde, çalışma ve işleme ile sonuçlandıran düzenler WebView verilmiştir:

WidthRequest & HeightRequest ile StackLayout:

<StackLayout>
    <Label Text="test" />
    <WebView Source="https://dotnet.microsoft.com/apps/xamarin"
        HeightRequest="1000"
        WidthRequest="1000" />
</StackLayout>

WidthRequest & HeightRequest ile RelativeLayout:

<RelativeLayout>
    <Label Text="test"
        RelativeLayout.XConstraint= "{ConstraintExpression
                                      Type=Constant, Constant=10}"
        RelativeLayout.YConstraint= "{ConstraintExpression
                                      Type=Constant, Constant=20}" />
    <WebView Source="https://dotnet.microsoft.com/apps/xamarin"
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,
                                     Constant=10}"
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,
                                     Constant=50}"
        WidthRequest="1000" HeightRequest="1000" />
</RelativeLayout>

WidthRequest HeightRequest olmadan AbsoluteLayout:

<AbsoluteLayout>
    <Label Text="test" AbsoluteLayout.LayoutBounds="0,0,100,100" />
    <WebView Source="https://dotnet.microsoft.com/apps/xamarin"
      AbsoluteLayout.LayoutBounds="0,150,500,500" />
</AbsoluteLayout>

WidthRequest HeightRequest olmadan kılavuz. Grid, istenen yüksekliklerin ve genişliklerin belirt belirtnerek gerektirmeyen birkaç düzenden birisidir:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Text="test" Grid.Row="0" />
    <WebView Source="https://dotnet.microsoft.com/apps/xamarin" Grid.Row="1" />
</Grid>

JavaScript'i faturalama

WebView , C# ile bir JavaScript işlevini çağırma ve C# kodunu çağıran koda herhangi bir sonuç geri dönme olanağını içerir. Bu, WebView.EvaluateJavaScriptAsync WebView örneğinden aşağıdaki örnekte gösterilen WebView.EvaluateJavaScriptAsync başarılı olur:

var numberEntry = new Entry { Text = "5" };
var resultLabel = new Label();
var 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, WebView.EvaluateJavaScriptAsync bağımsız değişken olarak belirtilen JavaScript'i değerlendirir ve sonucu olarak string döndürür. Bu örnekte factorial JavaScript işlevi çağrılır ve sonuç olarak faktöri number döndürür. Bu JavaScript işlevi, yükleyen 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>

Tanımlama bilgileri

Tanımlama bilgileri, belirtilen WebView URL'ye web isteğiyle birlikte gönderilen bir üzerinde ayarlanır. Bu, daha sonra Cookie bağlanabilir özelliğin CookieContainer değeri olarak ayarlanmış bir nesnesine nesneleri ekleyerek WebView.Cookies başarılı olur. Aşağıdaki kod bunun bir örneğini gösterir:

using System.Net;
using Xamarin.Forms;
// ...

CookieContainer cookieContainer = new CookieContainer();
Uri uri = new Uri("https://dotnet.microsoft.com/apps/xamarin", UriKind.RelativeOrAbsolute);

Cookie cookie = new Cookie
{
    Name = "XamarinCookie",
    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, Cookie nesnesine tek bir CookieContainer eklenir ve ardından özelliğin değeri olarak WebView.Cookies ayarlanır. belirtilen WebView URL'ye bir web isteği gönderdiğinde, tanımlama bilgisi istekle birlikte gönderilir.

UIWebView Kullanımdan App Store Reddi (ITMS-90809)

Apple, Nisan 2020'den itibaren kullanım dışı API'yi kullanmaya devam edecek uygulamaları reddedecek. Xamarin.Formsvarsayılan olarak WKWebView olarak geçiş yaptı, ancak ikili dosyalarda eski SDK'ya başvuru Xamarin.Forms hala devam ediyor. Geçerli iOS bağlantı noktası davranışı bunu kaldırmaz ve sonuç olarak, uygulamanıza gönderdiğinizde de kullanım dışı API'ye başvurul App Store.

Önemli

Xamarin.Forms5.0'da WebViewRenderer sınıfı kaldırıldı. Bu Xamarin.Forms nedenle, 5.0 denetim başvurusu UIWebView içermez.

Bu sorunu çözmek için linker'ın önizleme sürümü kullanılabilir. Önizlemeyi etkinleştirmek için, bağlantıcıya ek bir bağımsız --optimize=experimental-xforms-product-type değişken de sağlayacaktır.

Bunun çalışması için önkoşullar:

4.5 veya daha yüksek. Xamarin.Forms Uygulamanız Malzeme Görseli kullanıyorsa 4.6 veya daha yüksek bir değer gereklidir.
Xamarin.iOS 13.10.0.17 veya daha yüksek bir . Xamarin.iOS sürümleriniziVisual Studio. Xamarin.iOS'un bu sürümü Mac için Visual Studio 8.4.1 ve Visual Studio 16.4.3'e dahildir.
için başvuruları kaldırın. Kodunuz için veya kullanan UIWebView hiçbir sınıfa başvuruya sahip UIWebView değildir.

Başvuruları algılama ve kaldırma hakkında daha fazla UIWebView bilgi için bkz. UIWebView

Linker'ın başvuruları kaldırması için şu UIWebView adımları izleyin:

iOS proje özelliklerini açma – iOS projenize sağ tıklayın ve Özellikler'i seçin.
iOS Derleme bölümüne gidin – iOS Derleme bölümünü seçin.
Ek mtouch bağımsız değişkenlerini güncelleştir – Ek mtouch bağımsız değişkenlerde bu bayrağı ekleyin (zaten orada olan herhangi bir değere ek olarak). Not: Bu bayrak, Yalnızca SDK olarak ayarlanmış Linker Davranışı veya Tüm Bağlantı ilebirlikte çalışır. Herhangi bir nedenle, Linker Davranışını All olarak ayarlarken hatalar görüyorsanız, bu büyük olasılıkla uygulama kodunda veya daha güvenli olmayan bir üçüncü taraf kitaplığında bir sorundur. Linker hakkında daha fazla bilgi için bkz. Xamarin.iOS Uygulamalarını Bağlama.
Tüm derleme yapılandırmalarını güncelleştir – Tüm derleme yapılandırmalarını güncelleştirmek için pencerenin üst kısmında yer alan Yapılandırma ve Platform listelerini kullanın. Güncelleştirilen en önemli yapılandırma yayın/iPhone yapılandırmadır çünkü bu genellikle gönderim için derlemeler oluşturmak App Store kullanılır.

Bu ekran görüntüsünde yeni bayrağın yer alan pencereyi görebilirsiniz: