Xamarin.Forms WebView

Článek
12/02/2021
13 min ke čtení

WebView je zobrazení pro zobrazování obsahu webu a HTML v aplikaci:

V prohlížeči aplikací

Content

WebView podporuje následující typy obsahu:

&Weby HTML CSS – webové zobrazení má plnou podporu pro weby napsané pomocí HTML & CSS, včetně podpory JavaScriptu.
Dokumenty – protože WebView je implementován pomocí nativních komponent na každé platformě, WebView je schopný zobrazit dokumenty ve formátech podporovaných základní platformou.
Řetězce HTML – WebView může zobrazit řetězce HTML z paměti.
Místní soubory – WebView může prezentovat libovolné typy obsahu, které jsou v aplikaci vložené výše.

Poznámka

WebViewna Windows nepodporuje Silverlight, Flash ani žádné ovládací prvky technologie ActiveX, i když je aplikace Internet Explorer na této platformě podporuje.

Websites

Chcete-li zobrazit web z Internetu, nastavte WebViewSource vlastnost na hodnotu URL řetězce:

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

Poznámka

Adresy URL musí být plně tvořeny zadaným protokolem (tj. musí mít předponu "http://" nebo "https://").

iOS a ATS

Od verze 9 bude iOS umožňovat, aby aplikace komunikovala se servery, které ve výchozím nastavení implementují osvědčené zabezpečení. Info.plistAby bylo možné povolit komunikaci s nezabezpečenými servery, musí být hodnoty nastaveny v.

Poznámka

Pokud vaše aplikace vyžaduje připojení k nezabezpečenému webu, měli byste místo toho, aby provedete úplné používání služby ATS, měli jako výjimku zadat doménu jako výjimku NSExceptionDomainsNSAllowsArbitraryLoads . NSAllowsArbitraryLoads by mělo být použito pouze v extrémních situacích.

Následující příklad ukazuje, jak povolit konkrétní doménu (v tomto případě xamarin.com) pro obejití požadavků ATS:

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

Osvědčeným postupem je povolit jenom některým doménám obejít ATS, což vám umožní používat důvěryhodné weby při využívání z dalšího zabezpečení u nedůvěryhodných domén. Následující příklad ukazuje méně bezpečnou metodu zakázání ATS pro aplikaci:

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

Další informace o této nové funkci v iOS 9 najdete v tématu zabezpečení přenosu aplikací .

Řetězce HTML

Pokud chcete v kódu dynamicky definovat řetězec jazyka HTML, budete muset vytvořit instanci HtmlWebViewSource :

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;

Zobrazení řetězce HTML zobrazením

Ve výše uvedeném kódu @ se používá k označení HTML jako @, což znamená, že většina řídicích znaků je ignorována.

Poznámka

Může být nutné nastavit WidthRequestHeightRequest vlastnosti a WebView pro zobrazení obsahu HTML v závislosti na rozložení, které WebView je podřízenou položkou. Například to vyžaduje v StackLayout .

Místní obsah HTML

WebView může zobrazit obsah z HTML, CSS a JavaScriptu vloženého v rámci aplikace. Například:

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

FUNKCÍ

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

Všimněte si, že písma zadaná v šabloně stylů CSS budou muset být přizpůsobená pro každou platformu, protože ne každá platforma má stejná písma.

Chcete-li zobrazit místní obsah pomocí WebView , bude nutné otevřít soubor HTML jako kterýkoli jiný a pak načíst obsah jako řetězec do Html vlastnosti HtmlWebViewSource . Další informace o otevírání souborů najdete v tématu práce se soubory.

Následující snímky obrazovky ukazují výsledek zobrazení místního obsahu na každé platformě:

WebView zobrazující místní obsah

I když je první stránka načtená, WebView nemá žádné znalosti o tom, odkud pochází HTML. Jedná se o problém při řešení stránek, které odkazují na místní prostředky. Příklady toho, kdy k tomu může dojít, pokud se na sebe navzájem odkazují místní stránky, stránka používá samostatný soubor JavaScriptu nebo stránka odkazuje na šablonu stylů CSS.

Chcete-li tento problém vyřešit, je nutné sdělit, WebView kde najít soubory v systému souborů. Postup nastavení BaseUrl vlastnosti v rozhraní, které HtmlWebViewSource používá WebView .

Vzhledem k tomu, že systém souborů v každém operačním systému je jiný, je nutné určit tuto adresu URL na každé platformě. Xamarin.Forms zpřístupňuje DependencyService pro řešení závislostí za běhu na každé platformě.

Chcete-li použít DependencyService , nejprve definujte rozhraní, které lze implementovat na každé platformě:

public interface IBaseUrl { string Get(); }

Všimněte si, že dokud se rozhraní neimplementuje na každé platformě, aplikace se nespustí. V běžném projektu nezapomeňte nastavit BaseUrl pomocí DependencyService :

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

Je pak nutné zadat implementace rozhraní pro každou platformu.

iOS

V systému iOS by měl být webový obsah umístěný v kořenovém adresáři projektu nebo adresáři prostředků s akcí sestavení BundleResource, jak je znázorněno níže:

Visual Studio
Visual Studio pro Mac

Místní soubory v iOS

BaseUrlMěl by být nastaven na cestu k hlavnímu balíčku:

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

Android

V Androidu umístěte HTML, CSS a obrázky do složky assets pomocí akce sestavení AndroidAsset , jak je znázorněno níže:

Visual Studio
Visual Studio pro Mac

Místní soubory v Androidu

V Androidu BaseUrl by měla být nastavená na "file:///android_asset/" :

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

V systému Android se k souborům ve složce assets dá dostat taky prostřednictvím aktuálního kontextu Androidu, který je vystavený vlastností:

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

Univerzální platforma Windows

v projektech Univerzální platforma Windows (UWP) umístěte HTML, CSS a obrázky do kořenového adresáře projektu s akcí sestavení nastavenou na obsah.

BaseUrlMěla by být nastavena na "ms-appx-web:///" :

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

WebView podporuje navigaci prostřednictvím několika metod a vlastností, které zpřístupňuje:

GoForward () – Pokud má hodnotu true, volání GoForward navigace vpřed na další navštívenou stránku.
GoBack () – Pokud má hodnotu true, volání GoBack bude přejít na poslední navštívenou stránku.
CanGoBack – Pokud false je v prohlížeči na počáteční adrese URL stránky, na které se má přejít zpět.
CanGoForward – Pokud uživatel přešel zpět a může přejít vpřed na stránku, která již byla navštívena.

V rámci stránek nepodporuje WebView gesta s více dotykovými gesty. Je důležité se ujistit, že je obsah optimalizovaný pro mobilní zařízení a že se zobrazí bez nutnosti zvětšení.

Je běžné, že aplikace zobrazuje odkaz v rámci WebView , nikoli v prohlížeči zařízení. V těchto situacích je vhodné, abyste povolili normální navigaci, ale když se uživatel zavolá zpátky, zatímco se nachází na úvodním odkazu, aplikace by se měla vrátit do normálního zobrazení aplikace.

Tento scénář můžete povolit pomocí integrovaných navigačních metod a vlastností.

Začněte vytvořením stránky pro zobrazení v prohlížeči:

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

V kódu na pozadí:

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

A to je vše!

Navigační tlačítka WebView

Události

WebView vyvolá následující události, které vám pomůžou reagovat na změny ve stavu:

Navigating – Událost aktivovaná v případě, že webové zobrazení začne načítat novou stránku
Navigated – Událost aktivovaná při načítání stránky a zastavení navigace.
ReloadRequested – Událost aktivovaná při provedení žádosti o opětovné načtení aktuálního obsahu

WebNavigatingEventArgsObjekt, který provází událost, Navigating má čtyři vlastnosti:

Cancel – Určuje, jestli se má tato navigace zrušit.
NavigationEvent – událost navigace, která byla vyvolána.
Source – prvek, který provedl navigaci.
Url – cíl navigace.

WebNavigatedEventArgsObjekt, který provází událost, Navigated má čtyři vlastnosti:

NavigationEvent – událost navigace, která byla vyvolána.
Result – Popisuje výsledek navigace pomocí WebNavigationResult člena výčtu. Platné hodnoty jsou Cancel, Failure, Success nebo Timeout.
Source – prvek, který provedl navigaci.
Url – cíl navigace.

Pokud předpokládáte, že se načítají webové stránky, které trvá dlouhou dobu, zvažte použití Navigating událostí a Navigated k implementaci indikátoru stavu. Například:

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

Dvě obslužné rutiny událostí:

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

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

Výsledkem je následující výstup (načítání):

Načítání dokončeno:

Opětovné načítání obsahu

WebView má Reload metodu, která se dá použít k opětovnému načtení aktuálního obsahu:

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

Když Reload je metoda volána ReloadRequested , je vyvolána událost, která označuje, že byla provedena žádost o opětovné načtení aktuálního obsahu.

Výkon

Oblíbené webové prohlížeče přijímají technologie, jako je vykreslování a kompilace JavaScriptu v hardwarové akceleraci. Před 4,4 se v Xamarin.FormsXamarin.FormsWebView systému iOS implementovala UIWebView Třída. Mnohé z těchto technologií však v této implementaci nejsou k dispozici. Proto od verze Xamarin.Forms 4,4 Xamarin.FormsWebView je implementováno v iOS WkWebView třídou, která podporuje rychlejší procházení.

Poznámka

V systému iOS WkWebViewRenderer má přetížení konstruktoru, který přijímá WkWebViewConfiguration argument. To umožňuje, aby se zobrazovací jednotka nakonfigurovala při vytváření.

Aplikace se může vrátit k použití třídy iOS UIWebView k implementaci z Xamarin.FormsWebView důvodů kompatibility. Toho lze dosáhnout přidáním následujícího kódu do souboru AssemblyInfo. cs v projektu platformy iOS pro aplikaci:

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

Poznámka

V Xamarin.Forms 5,0 byla WebViewRenderer Třída odebrána. Proto Xamarin.Forms 5,0 neobsahuje odkaz na UIWebView ovládací prvek.

WebView ve výchozím nastavení má Android hodnotu co nejrychleji, a to jako vestavěný prohlížeč.

webview UWP používá modul vykreslování Microsoft Edge. Stolní počítač a zařízení tabletu by měly vidět stejný výkon jako při použití samotného prohlížeče Edge.

Oprávnění

Aby bylo WebView možné pracovat, je nutné zajistit, aby byla pro každou platformu nastavena oprávnění. Všimněte si, že na některých platformách WebView bude fungovat v režimu ladění, ale ne v případě sestavení pro vydání. důvodem je to, že některá oprávnění, jako jsou ta pro přístup k internetu na androidu, se ve výchozím nastavení nastavují Visual Studio pro Mac v režimu ladění.

UWP – při zobrazování síťového obsahu vyžaduje schopnost Internetu (klientský server).
Android – vyžaduje se jenom při zobrazování obsahu ze sítě. Místní obsah nevyžaduje žádná zvláštní oprávnění.
iOS – nevyžaduje žádná zvláštní oprávnění.

Layout

Na rozdíl od většiny ostatních Xamarin.Forms zobrazení WebView vyžaduje, aby HeightRequest a WidthRequest byly zadány, pokud jsou obsaženy v StackLayout nebo RelativeLayout. Pokud tyto vlastnosti nebudete moci zadat, nebude WebView vykreslena.

Následující příklady ukazují rozložení, která vedou k práci, vykreslování WebView s:

StackLayout s WidthRequest & HeightRequest:

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

RelativeLayout s WidthRequest & HeightRequest:

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

AbsoluteLayout bez WidthRequest HeightRequest:

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

Grid bez WidthRequest HeightRequest. Grid je jedno z několika rozložení, která nevyžadují zadání požadovaných výšek a šířek.:

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

Vyvolání JavaScriptu

WebView zahrnuje možnost vyvolat funkci JavaScriptu z C# a vracet jakýkoli výsledek volání kódu C#. To se provádí pomocí WebView.EvaluateJavaScriptAsync metody, která je znázorněna v následujícím příkladu v ukázce WebView.EvaluateJavaScriptAsync :

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

WebView.EvaluateJavaScriptAsyncMetoda vyhodnocuje jazyk JavaScript, který je zadán jako argument, a vrátí výsledek jako string . V tomto příkladu factorial je vyvolána funkce JavaScriptu, která vrací faktoriál v number důsledku. Tato funkce JavaScriptu je definována v místním souboru HTML, který je WebView načten a je zobrazen 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>

Soubory cookie

Soubory cookie lze nastavit na WebView , které se pak odesílají s webovým požadavkem na zadanou adresu URL. To lze provést přidáním Cookie objektů do CookieContainer , který je poté nastaven jako hodnota vlastnosti s možností WebView.Cookies vazby. Příklad ukazuje následující kód:

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

V tomto příkladu Cookie je přidána jedna do CookieContainer objektu, který je poté nastaven jako hodnota WebView.Cookies Vlastnosti. Když WebView pošle webový požadavek na zadanou adresu URL, soubor cookie se pošle spolu s požadavkem.

Vyřazení z UIWebView a zamítnutí App Storu (ITMS-90809)

Od dubna 2020 přestane Apple aplikace , které pořád používají zastaralé rozhraní API. I když se Xamarin.Forms přepnul na WKWebView jako výchozí, je stále odkaz na starší sadu SDK v Xamarin.Forms binárních souborech. Aktuální chování linkeru iOS tuto situaci neodstraní. v důsledku toho se v případě odeslání do obchodu s aplikacemi stále zdá, že se na zastaralá rozhraní API budou odkazovat z vaší aplikace.

Důležité

V Xamarin.Forms 5,0 byla WebViewRenderer Třída odebrána. Proto Xamarin.Forms 5,0 neobsahuje odkaz na UIWebView ovládací prvek.

K odstranění tohoto problému je k dispozici verze Preview linkeru. Chcete-li povolit verzi Preview, budete muset --optimize=experimental-xforms-product-type do linkeru dodat další argument.

Požadavky, které je potřeba pro tuto práci, jsou:

4,5 nebo vyšší. Xamarin.Forms v případě, že vaše aplikace používá materiálový vizuál, se vyžaduje 4,6 nebo vyšší.
Xamarin. iOS 13.10.0.17 nebo novější. Podívejte se na verzi Xamarin. iOS v Visual Studio. tato verze Xamarin. iOS je součástí Visual Studio pro Mac 8.4.1 a Visual Studio 16.4.3.
Odeberte odkazy na . Váš kód by neměl mít žádné odkazy na UIWebView třídy, které využívají UIWebView .

Další informace o zjišťování a odebírání UIWebView odkazů najdete v tématu vyřazení z UIWebView.

Pomocí těchto kroků linker odeberte UIWebView odkazy:

Otevřete vlastnosti projektu iOS – klikněte pravým tlačítkem na projekt pro iOS a vyberte vlastnosti.
Přejděte do části Build pro iOS – vyberte oddíl Build pro iOS .
Aktualizace dalších argumentů mtouch – v dalších argumentech mtouch přidejte tento příznak (kromě jakékoli hodnoty, která v něm již může být). Poznámka: Tento příznak funguje společně s chováním linkeru nastaveným pouze na sadu SDK nebo v rámci propojení všech. Pokud z jakéhokoli důvodu zobrazíte chyby při nastavování chování linkeru všem, je to pravděpodobně problém v kódu aplikace nebo knihovna třetí strany, která není bezpečná linkerem. Další informace o linkeru najdete v tématu propojování aplikací Xamarin. iOS.
Aktualizovat všechny konfigurace sestavení – k aktualizaci všech konfigurací sestavení použijte seznamy konfigurací a platforem v horní části okna. nejdůležitější konfigurace, kterou je třeba aktualizovat, je konfigurace Release/iPhone , protože se obvykle používá k vytváření buildů pro odesílání App storu.

Na tomto snímku obrazovky vidíte okno s novým příznakem:

Pomocí těchto kroků linker odeberte UIWebView odkazy:

Otevřete možnosti projektu iOS – klikněte pravým tlačítkem na projekt pro iOS a vyberte Možnosti.
Přejděte do části Build pro iOS – vyberte oddíl Build pro iOS .
Aktualizace dalších argumentů mtouch – v dalších argumentech mtouch přidejte tento příznak (kromě jakékoli hodnoty, která v něm již může být). Poznámka: Tento příznak funguje společně s chováním linkeru nastaveným pouze na sadu SDK nebo v rámci propojení všech. Pokud z jakéhokoli důvodu zobrazíte chyby při nastavování chování linkeru všem, je to pravděpodobně problém v kódu aplikace nebo knihovna třetí strany, která není bezpečná linkerem. Další informace o linkeru najdete v tématu propojování aplikací Xamarin. iOS.
Aktualizovat všechny konfigurace sestavení – k aktualizaci všech konfigurací sestavení použijte seznamy konfigurací a platforem v horní části okna. nejdůležitější konfigurace, kterou je třeba aktualizovat, je konfigurace Release/iPhone , protože se obvykle používá k vytváření buildů pro odesílání App storu.

Na tomto snímku obrazovky vidíte okno s novým příznakem:

Když teď vytvoříte nové sestavení (vydání) a odešlete ho do App Store, neměla by se zobrazit žádná upozornění týkající se zastaralého rozhraní API.

Xamarin.Forms WebView

Ohodnoťte vaše zkušenosti

Content

Websites

iOS a ATS

Řetězce HTML

Místní obsah HTML

iOS

Android

Univerzální platforma Windows

Navigace

Události

Opětovné načítání obsahu

Výkon

Oprávnění

Layout

Vyvolání JavaScriptu

Soubory cookie

Vyřazení z UIWebView a zamítnutí App Storu (ITMS-90809)

Konfigurace linkeru

Související odkazy