Xamarin.FormsWebView WebView

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

WebViewist eine Ansicht für die Anzeige von Web-und HTML-Inhalt in Ihrer APP:WebView is a view for displaying web and HTML content in your app:

Im App-Browser

ContentContent

WebViewunterstützt die folgenden Inhaltstypen:WebView supports the following types of content:

  • HTML & CSS Websites – WebView bietet vollständige Unterstützung für Websites, die mithilfe von HTML-& CSS geschrieben wurden, einschließlich JavaScript-UnterstützungHTML & CSS websites – WebView has full support for websites written using HTML & CSS, including JavaScript support.
  • Dokumente – , da WebView mit nativen Komponenten auf jeder Plattform implementiert ist, kann WebView Dokumente anzeigen, die auf jeder Plattform sichtbar sind.Documents – Because WebView is implemented using native components on each platform, WebView is capable of showing documents that are viewable on each platform. Dies bedeutet, dass PDF-Dateien unter IOS und Android funktionieren.That means that PDF files work on iOS and Android.
  • HTML-Zeichen folgen WebView kann HTML-Zeichen folgen im Arbeits – Speicher anzeigen.HTML strings – WebView can show HTML strings from memory.
  • Lokale Dateien – WebView kann jeden der oben in der APP eingebetteten Inhaltstypen darstellen.Local Files – WebView can present any of the content types above embedded in the app.

Hinweis

WebViewunter Windows unterstützt Silverlight, Flash oder ActiveX-Steuerelemente nicht, auch wenn Sie von Internet Explorer auf dieser Plattform unterstützt werden.WebView on Windows does not support Silverlight, Flash or any ActiveX controls, even if they are supported by Internet Explorer on that platform.

WebsitesWebsites

Legen Sie die WebView -Eigenschaft des s auf eine Zeichen folgen-URL fest, um eine Website aus dem Internet anzuzeigen Source :To display a website from the internet, set the WebView's Source property to a string URL:

var browser = new WebView
{
  Source = "http://xamarin.com"
};

Hinweis

URLs müssen vollständig mit dem angegebenen Protokoll formatiert sein (d. h., es muss "http://" oder "https://" vorangesteht).URLs must be fully formed with the protocol specified (i.e. it must have "http://" or "https://" prepended to it).

IOS und ATSiOS and ATS

Seit Version 9 ermöglicht IOS nur der Anwendung die Kommunikation mit Servern, die standardmäßig die Best Practice-Sicherheit implementieren.Since version 9, iOS will only allow your application to communicate with servers that implement best-practice security by default. Werte müssen in festgelegt werden Info.plist , um die Kommunikation mit unsicheren Servern zu ermöglichen.Values must be set in Info.plist to enable communication with insecure servers.

Hinweis

Wenn Ihre Anwendung eine Verbindung mit einer unsicheren Website erfordert, sollten Sie die Domäne immer als Ausnahme mit eingeben, NSExceptionDomains anstatt sie vollständig mithilfe von zu deaktivieren NSAllowsArbitraryLoads .If your application requires a connection to an insecure website, you should always enter the domain as an exception using NSExceptionDomains instead of turning ATS off completely using NSAllowsArbitraryLoads. NSAllowsArbitraryLoadssollte nur in extrem Notfällen verwendet werden.NSAllowsArbitraryLoads should only be used in extreme emergency situations.

Im folgenden wird veranschaulicht, wie Sie eine bestimmte Domäne (in diesem Fall xamarin.com) zum Umgehen von ATS-Anforderungen aktivieren:The following demonstrates how to enable a specific domain (in this case xamarin.com) to bypass ATS requirements:

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

Es empfiehlt sich, nur einige Domänen für die Umgehung von ATS zu aktivieren, sodass Sie vertrauenswürdige Sites verwenden können, während Sie von der zusätzlichen Sicherheit auf nicht vertrauenswürdigen Domänen profitieren.It is best practice to only enable some domains to bypass ATS, allowing you to use trusted sites while benefitting from the additional security on untrusted domains. Im folgenden wird die weniger sichere Methode zum Deaktivieren von ATS für die APP veranschaulicht:The following demonstrates the less secure method of disabling ATS for the app:

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

Weitere Informationen zu diesem neuen Feature in ios 9 finden Sie unter App-Transport Sicherheit .See App Transport Security for more information about this new feature in iOS 9.

HTML-Zeichen folgenHTML Strings

Wenn Sie eine im Code dynamisch definierte HTML-Zeichenfolge präsentieren möchten, müssen Sie eine Instanz von erstellen HtmlWebViewSource :If you want to present a string of HTML defined dynamically in code, you'll need to create an instance of 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;

WebView mit HTML-Zeichenfolge

Im obigen Code @ wird verwendet, um den HTML-Code als ausführlichen Zeichenfolgenliteralszu markieren, was bedeutet, dass die meisten Escapezeichen ignoriert werdenIn the above code, @ is used to mark the HTML as a verbatim string literal, meaning most escape characters are ignored.

Hinweis

Es kann erforderlich sein, die-Eigenschaft und die-Eigenschaft von festzulegen WidthRequest , damit HeightRequest WebView der HTML-Inhalt angezeigt wird. Dies hängt vom Layout ab, von dem untergeordnet WebView ist.It may be necessary to set the WidthRequest and HeightRequest properties of the WebView to see the HTML content, depending upon the layout the WebView is a child of. Dies ist z. b. in einer erforderlich StackLayout .For example, this is required in a StackLayout.

Lokaler HTML-InhaltLocal HTML Content

In WebView können Inhalte aus HTML, CSS und JavaScript angezeigt werden, die in der APP eingebettet sind.WebView can display content from HTML, CSS and JavaScript embedded within the app. Beispiel:For example:

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

SumCSS:

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

Beachten Sie, dass die im obigen CSS angegebenen Schriftarten für jede Plattform angepasst werden müssen, da nicht jede Plattform die gleichen Schriftarten aufweist.Note that the fonts specified in the above CSS will need to be customized for each platform, as not every platform has the same fonts.

Zum Anzeigen von lokalem Inhalt mit einem WebView müssen Sie die HTML-Datei wie jede andere öffnen und dann den Inhalt als Zeichenfolge in die- Html Eigenschaft eines laden HtmlWebViewSource .To display local content using a WebView, you'll need to open the HTML file like any other, then load the contents as a string into the Html property of an HtmlWebViewSource. Weitere Informationen zum Öffnen von Dateien finden Sie unter Arbeiten mit Dateien.For more information on opening files, see Working with Files.

Die folgenden Screenshots zeigen das Ergebnis der Anzeige von lokalem Inhalt auf den einzelnen Plattformen:The following screenshots show the result of displaying local content on each platform:

Anzeigen von lokalem Inhalt in WebView

Obwohl die erste Seite geladen wurde, WebView hat nicht wissen, woher das HTML stammt.Although the first page has been loaded, the WebView has no knowledge of where the HTML came from. Dies ist ein Problem beim Umgang mit Seiten, die auf lokale Ressourcen verweisen.That is a problem when dealing with pages that reference local resources. Beispiele dafür sind, wann lokale Seiten miteinander verknüpft werden können, eine Seite verwendet eine separate JavaScript-Datei oder eine Seite mit einem CSS-Stylesheet.Examples of when that might happen include when local pages link to each other, a page makes use of a separate JavaScript file, or a page links to a CSS stylesheet.

Um dieses Problem zu beheben, müssen Sie angeben, WebView wo Dateien im Dateisystem zu finden sind.To solve this, you need to tell the WebView where to find files on the filesystem. Dies geschieht durch Festlegen der- BaseUrl Eigenschaft für den, der HtmlWebViewSource von verwendet wird WebView .Do that by setting the BaseUrl property on the HtmlWebViewSource used by the WebView.

Da das Dateisystem auf jedem der Betriebssysteme anders ist, müssen Sie diese URL auf jeder Plattform bestimmen.Because the filesystem on each of the operating systems is different, you need to determine that URL on each platform. Xamarin.Formsmacht den DependencyService zum Auflösen von Abhängigkeiten zur Laufzeit auf jeder Plattform verfügbar. exposes the DependencyService for resolving dependencies at runtime on each platform.

Um das zu verwenden DependencyService , definieren Sie zunächst eine Schnittstelle, die auf jeder Plattform implementiert werden kann:To use the DependencyService, first define an interface that can be implemented on each platform:

public interface IBaseUrl { string Get(); }

Beachten Sie, dass die APP nicht ausgeführt wird, bis die Schnittstelle auf jeder Plattform implementiert wird.Note that until the interface is implemented on each platform, the app will not run. Stellen Sie im Common-Projekt sicher, dass Sie die BaseUrl mit dem Festlegen DependencyService :In the common project, make sure that you remember to set the BaseUrl using the DependencyService:

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

Es müssen Implementierungen der-Schnittstelle für jede Plattform bereitgestellt werden.Implementations of the interface for each platform must then be provided.

iOSiOS

Unter IOS sollte sich der Webinhalt im Stammverzeichnis des Projekts oder im Ressourcen Verzeichnis mit der Buildaktion bundleresourcebefinden, wie unten gezeigt:On iOS, the web content should be located in the project's root directory or Resources directory with build action BundleResource, as demonstrated below:

Muss BaseUrl auf den Pfad des Haupt Bündels festgelegt werden:The BaseUrl should be set to the path of the main bundle:

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

AndroidAndroid

Platzieren Sie unter Android HTML, CSS und Images im Ordner "Assets" mit der Buildaktion " androidasset ", wie unten gezeigt:On Android, place HTML, CSS, and images in the Assets folder with build action AndroidAsset as demonstrated below:

Unter Android sollte auf BaseUrl festgelegt werden "file:///android_asset/" :On Android, the BaseUrl should be set to "file:///android_asset/":

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

Unter Android können auf Dateien im Ordner " Assets " auch über den aktuellen Android-Kontext zugegriffen werden, der von der-Eigenschaft verfügbar gemacht wird MainActivity.Instance :On Android, files in the Assets folder can also be accessed through the current Android context, which is exposed by the MainActivity.Instance property:

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

Universelle Windows-PlattformUniversal Windows Platform

Platzieren Sie in universelle Windows-Plattform (UWP)-Projekten HTML-, CSS-und Bilddateien im Stammverzeichnis des Projekts, und legen Sie die Buildaktion auf Contentfest.On Universal Windows Platform (UWP) projects, place HTML, CSS and images in the project root with the build action set to Content.

Muss BaseUrl auf festgelegt werden "ms-appx-web:///" :The BaseUrl should be set to "ms-appx-web:///":

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

WebView unterstützt die Navigation durch verschiedene Methoden und Eigenschaften, die es zur Verfügung stellt:WebView supports navigation through several methods and properties that it makes available:

  • GoForward () – Wenn CanGoForward true ist, wird GoForward bei Aufrufen von navigiert vorwärts zur nächsten besuchten Seite aufgerufen.GoForward() – if CanGoForward is true, calling GoForward navigates forward to the next visited page.
  • GoBack () – Wenn CanGoBack den Wert true hat, GoBack wird der Aufruf von zur letzten besuchten Seite navigiert.GoBack() – if CanGoBack is true, calling GoBack will navigate to the last visited page.
  • CanGoBacktrue, wenn Seiten vorhanden sind, zu denen navigiert werden soll, false Wenn der Browser an der Start-URL steht.CanGoBacktrue if there are pages to navigate back to, false if the browser is at the starting URL.
  • CanGoForward – , true Wenn der Benutzer rückwärts navigiert ist und mit einer bereits besuchten Seite fortfahren kann.CanGoForwardtrue if the user has navigated backwards and can move forward to a page that was already visited.

Innerhalb von Seiten WebView unterstützt keine Multitouch-Gesten.Within pages, WebView does not support multi-touch gestures. Es ist wichtig sicherzustellen, dass der Inhalt Mobil optimiert ist und ohne Zoom Vorgang angezeigt wird.It is important to make sure that content is mobile-optimized and appears without the need for zooming.

Es ist üblich, dass Anwendungen einen Link in einem WebView anstelle des Geräte Browsers anzeigen.It is common for applications to show a link within a WebView, rather than the device's browser. In diesen Situationen ist es hilfreich, die normale Navigation zuzulassen. wenn der Benutzer jedoch zurückkommt, während er sich auf der Start Verknüpfung befindet, sollte die APP zur normalen App-Ansicht zurückkehren.In those situations, it is useful to allow normal navigation, but when the user hits back while they are on the starting link, the app should return to the normal app view.

Verwenden Sie die integrierten Navigationsmethoden und-Eigenschaften, um dieses Szenario zu aktivieren.Use the built-in navigation methods and properties to enable this scenario.

Erstellen Sie zunächst die Seite für die Browseransicht:Start by creating the page for the browser view:

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

Im Code-Behind:In the code-behind:

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

Das ist alles!That's it!

WebView-Navigations Schaltflächen

EventsEvents

WebView löst die folgenden Ereignisse aus, um Sie bei der Reaktion auf Zustandsänderungen zu unterstützen:WebView raises the following events to help you respond to changes in state:

  • Navigatingdas –-Ereignis wird ausgelöst, wenn die WebView mit dem Laden einer neuen Seite beginnt.Navigating – event raised when the WebView begins loading a new page.
  • Navigated–-Ereignis, das ausgelöst wird, wenn die Seite geladen und die Navigation beendet wurde.Navigated – event raised when the page is loaded and navigation has stopped.
  • ReloadRequesteddas –-Ereignis wird ausgelöst, wenn eine Anforderung zum erneuten Laden des aktuellen Inhalts erfolgt.ReloadRequested – event raised when a request is made to reload the current content.

Das WebNavigatingEventArgs Objekt, das das Navigating Ereignis begleitet, verfügt über vier Eigenschaften:The WebNavigatingEventArgs object that accompanies the Navigating event has four properties:

  • Cancel– Gibt an, ob die Navigation abgebrochen werden soll.Cancel – indicates whether or not to cancel the navigation.
  • NavigationEvent– Das aufgelöbene Navigations Ereignis.NavigationEvent – the navigation event that was raised.
  • Source– das Element, das die Navigation ausgeführt hat.Source – the element that performed the navigation.
  • Url– das Navigations Ziel.Url – the navigation destination.

Das WebNavigatedEventArgs Objekt, das das Navigated Ereignis begleitet, verfügt über vier Eigenschaften:The WebNavigatedEventArgs object that accompanies the Navigated event has four properties:

  • NavigationEvent– Das aufgelöbene Navigations Ereignis.NavigationEvent – the navigation event that was raised.
  • Result– Beschreibt das Ergebnis der Navigation mithilfe eines- WebNavigationResult Enumerationsmembers.Result – describes the result of the navigation, using a WebNavigationResult enumeration member. Gültige Werte sind Cancel, Failure, Success und Timeout.Valid values are Cancel, Failure, Success, and Timeout.
  • Source– das Element, das die Navigation ausgeführt hat.Source – the element that performed the navigation.
  • Url– das Navigations Ziel.Url – the navigation destination.

Wenn Sie die Verwendung von Webseiten erwarten, die viel Zeit zum Laden benötigen, sollten Sie die Navigating -und-Ereignisse verwenden, Navigated um einen Status Indikator zu implementieren.If you anticipate using webpages that take a long time to load, consider using the Navigating and Navigated events to implement a status indicator. Beispiel:For example:

<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="http://www.xamarin.com" Navigated="webviewNavigated" Navigating="webviewNavigating" />
    </StackLayout>
</ContentPage>

Die beiden Ereignishandler:The two event handlers:

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

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

Dies führt zu folgender Ausgabe (laden):This results in the following output (loading):

Beispiel für WebView-Navigations Ereignis

Ladevorgang abgeschlossen:Finished Loading:

Beispiel für WebView-Navigations Ereignis

Inhalt wird erneut geladenReloading content

WebViewverfügt über eine- Reload Methode, die zum erneuten Laden des aktuellen Inhalts verwendet werden kann:WebView has a Reload method that can be used to reload the current content:

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

Wenn die- Reload Methode aufgerufen wird ReloadRequested , wird das-Ereignis ausgelöst, das angibt, dass eine Anforderung zum erneuten Laden des aktuellen Inhalts ausgegeben wurde.When the Reload method is invoked the ReloadRequested event is fired, indicating that a request has been made to reload the current content.

LeistungPerformance

Gängige Webbrowser übernehmen Technologien wie Hardware beschleunigtes Rendering und JavaScript-Kompilierung.Popular web browsers adopt technologies like hardware accelerated rendering and JavaScript compilation. Vor Xamarin.Forms 4,4 Xamarin.Forms WebView wurde der von der-Klasse unter IOS implementiert UIWebView .Prior to Xamarin.Forms 4.4, the Xamarin.Forms WebView was implemented on iOS by the UIWebView class. Viele dieser Technologien waren in dieser Implementierung jedoch nicht verfügbar.However, many of these technologies were unavailable in this implementation. Seit Xamarin.Forms 4,4 Xamarin.Forms WebView wird das von der-Klasse unter IOS implementiert WkWebView , das schnelleres Durchsuchen unterstützt.Therefore, since Xamarin.Forms 4.4, the Xamarin.Forms WebView is implemented on iOS by the WkWebView class, which supports faster browsing.

Hinweis

Unter IOS verfügt über WkWebViewRenderer eine Konstruktorüberladung, die ein- WkWebViewConfiguration Argument akzeptiert.On iOS, the WkWebViewRenderer has a constructor overload that accepts a WkWebViewConfiguration argument. Dadurch kann der Renderer bei der Erstellung konfiguriert werden.This enables the renderer to be configured on creation.

Eine Anwendung kann UIWebView Xamarin.Forms aus Kompatibilitätsgründen zur Verwendung der IOS-Klasse zurückkehren, um zu implementieren WebView .An application can return to using the iOS UIWebView class to implement the Xamarin.Forms WebView, for compatibility reasons. Dies kann erreicht werden, indem Sie der Datei AssemblyInfo.cs im IOS-Platt Form Projekt für die Anwendung den folgenden Code hinzufügen:This can be achieved by adding the following code to the AssemblyInfo.cs file in the iOS platform project for the application:

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

WebViewunter Android ist standardmäßig so schnell wie der integrierte Browser.WebView on Android by default is about as fast as the built-in browser.

Die UWP-Webansicht verwendet die Microsoft Edge-Rendering-Engine.The UWP WebView uses the Microsoft Edge rendering engine. Auf Desktop-und Tablet-Geräten sollte die gleiche Leistung wie bei der Verwendung des Edge-Browsers selbst angezeigt werden.Desktop and tablet devices should see the same performance as using the Edge browser itself.

BerechtigungenPermissions

Damit Ordnungs WebView gemäß funktioniert, müssen Sie sicherstellen, dass für jede Plattform Berechtigungen festgelegt sind.In order for WebView to work, you must make sure that permissions are set for each platform. Beachten Sie, dass auf manchen Plattformen WebView im Debugmodus funktioniert, aber nicht, wenn Sie für Release erstellt werden.Note that on some platforms, WebView will work in debug mode, but not when built for release. Dies liegt daran, dass einige Berechtigungen, wie z. b. die für den Internet Zugriff unter Android, standardmäßig durch Visual Studio für Mac im Debugmodus festgelegt werden.That is because some permissions, like those for internet access on Android, are set by default by Visual Studio for Mac when in debug mode.

  • UWP – erfordert die Internet Funktion (Client & Server), wenn Netzwerk Inhalte angezeigt werden.UWP – requires the Internet (Client & Server) capability when displaying network content.
  • Android – erfordert INTERNET nur, wenn Inhalt aus dem Netzwerk angezeigt wird.Android – requires INTERNET only when displaying content from the network. Lokale Inhalte erfordern keine besonderen Berechtigungen.Local content requires no special permissions.
  • IOS – erfordert keine besonderen Berechtigungen.iOS – requires no special permissions.

LayoutLayout

Im Gegensatz zu den meisten anderen Xamarin.Forms Sichten WebView erfordert, dass HeightRequest und WidthRequest angegeben werden, wenn Sie in Stacklayout oder relativelayout enthalten sind.Unlike most other Xamarin.Forms views, WebView requires that HeightRequest and WidthRequest are specified when contained in StackLayout or RelativeLayout. Wenn Sie diese Eigenschaften nicht angeben, WebView wird nicht angezeigt.If you fail to specify those properties, the WebView will not render.

In den folgenden Beispielen werden Layouts veranschaulicht, die zur Funktionsweise von Rendern von WebView s führen:The following examples demonstrate layouts that result in working, rendering WebViews:

Stacklayout mit widthrequest & "Erhöhung trequest":StackLayout with WidthRequest & HeightRequest:

<StackLayout>
    <Label Text="test" />
    <WebView Source="http://www.xamarin.com/"
        HeightRequest="1000"
        WidthRequest="1000" />
</StackLayout>

Relativelayout mit widthrequest & Erhöhung trequest:RelativeLayout with WidthRequest & HeightRequest:

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

AbsoluteLayout ohne widthrequest & Erhöhung trequest:AbsoluteLayout without WidthRequest & HeightRequest:

<AbsoluteLayout>
    <Label Text="test" AbsoluteLayout.LayoutBounds="0,0,100,100" />
    <WebView Source="http://www.xamarin.com/"
      AbsoluteLayout.LayoutBounds="0,150,500,500" />
</AbsoluteLayout>

Raster ohne widthrequest & Erhöhung trequest.Grid without WidthRequest & HeightRequest. Raster ist eines der wenigen Layouts, bei dem keine angeforderte Höhe und Breite angegeben werden müssen:Grid is one of the few layouts that does not require specifying requested heights and widths.:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Text="test" Grid.Row="0" />
    <WebView Source="http://www.xamarin.com/" Grid.Row="1" />
</Grid>

Aufrufen von JavaScriptInvoking JavaScript

WebViewbietet die Möglichkeit, eine JavaScript-Funktion aus c# aufzurufen und jedes Ergebnis an den aufrufenden c#-Code zurückzugeben.WebView includes the ability to invoke a JavaScript function from C#, and return any result to the calling C# code. Dies erfolgt mit der- WebView.EvaluateJavaScriptAsync Methode, die im folgenden Beispiel aus dem WebView -Beispiel gezeigt wird:This is accomplished with the WebView.EvaluateJavaScriptAsync method, which is shown in the following example from the WebView sample:

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

Die WebView.EvaluateJavaScriptAsync -Methode wertet das JavaScript aus, das als-Argument angegeben ist, und gibt jedes Ergebnis als zurück string .The WebView.EvaluateJavaScriptAsync method evaluates the JavaScript that's specified as the argument, and returns any result as a string. In diesem Beispiel wird die factorial JavaScript-Funktion aufgerufen, die die Fakultät von number als Ergebnis zurückgibt.In this example, the factorial JavaScript function is invoked, which returns the factorial of number as a result. Diese JavaScript-Funktion wird in der lokalen HTML-Datei definiert, die WebView lädt, und wird im folgenden Beispiel gezeigt:This JavaScript function is defined in the local HTML file that the WebView loads, and is shown in the following example:

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

CookiesCookies

Cookies können für einen festgelegt werden WebView , die dann mit der Webanforderung an die angegebene URL gesendet werden.Cookies can be set on a WebView, which are then sent with the web request to the specified URL. Dies wird durch das Hinzufügen von Cookie Objekten zu einem erreicht CookieContainer , das dann als Wert der WebView.Cookies bindbaren Eigenschaft festgelegt wird.This is accomplished by adding Cookie objects to a CookieContainer, which is then set as the value of the WebView.Cookies bindable property. Im folgenden Code wird ein Beispiel hierfür dargestellt:The following code shows an example of this:

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

In diesem Beispiel wird dem-Objekt ein einzelnes- Cookie Objekt hinzugefügt CookieContainer , das dann als Wert der-Eigenschaft festgelegt wird WebView.Cookies .In this example, a single Cookie is added to the CookieContainer object, which is then set as the value of the WebView.Cookies property. Wenn WebView eine Webanforderung an die angegebene URL sendet, wird das Cookie mit der Anforderung gesendet.When the WebView sends a web request to the specified URL, the cookie is sent with the request.

UIWebView depreation und App Store-Ablehnung (iTMS-90809)UIWebView Deprecation and App Store Rejection (ITMS-90809)

Ab dem 2020 werden apps, die weiterhin die veraltete API verwenden, von Apple abgelehnt UIWebView .Starting in April 2020, Apple will reject apps that still use the deprecated UIWebView API. Während Xamarin.Forms auf als Standardwert umgestellt hat WKWebView , gibt es noch einen Verweis auf das ältere SDK in den Xamarin.Forms Binärdateien.While Xamarin.Forms has switched to WKWebView as the default, there is still a reference to the older SDK in the Xamarin.Forms binaries. Das aktuelle IOS -linkerverhalten entfernt das nicht, und daher wird die veraltete UIWebView API nach wie vor von Ihrer APP referenziert, wenn Sie Sie an den App Store übermitteln.Current iOS linker behavior does not remove this, and as a result the deprecated UIWebView API will still appear to be referenced from your app when you submit to the App Store.

Eine Vorschauversion des Linkers ist verfügbar, um dieses Problem zu beheben.A preview version of the linker is available to fix this issue. Um die Vorschau zu aktivieren, müssen Sie ein zusätzliches Argument --optimize=experimental-xforms-product-type für den Linker angeben.To enable the preview, you will need to supply an additional argument --optimize=experimental-xforms-product-type to the linker.

Hierfür müssen folgende Voraussetzungen erfüllt sein:The prerequisites for this to work are:

  • ** Xamarin.Forms 4,5 oder höher**.Xamarin.Forms 4.5 or higher. Xamarin.Forms4,6 oder höher ist erforderlich, wenn Ihre APP Material Visualisierung verwendet. 4.6, or higher, is required if your app uses Material Visual.
  • Xamarin. IOS 13.10.0.17 oder höher.Xamarin.iOS 13.10.0.17 or higher. Überprüfen Sie die xamarin. IOS-Version in Visual Studio.Check your Xamarin.iOS version in Visual Studio. Diese Version von xamarin. IOS ist in Visual Studio für Mac 8.4.1 und Visual Studio 16.4.3 enthalten.This version of Xamarin.iOS is included with Visual Studio for Mac 8.4.1 and Visual Studio 16.4.3.
  • **Entfernen Sie Verweise UIWebView auf **.Remove references to UIWebView. Der Code darf keine Verweise auf UIWebView oder Klassen aufweisen, die verwenden UIWebView .Your code should not have any references to UIWebView or any classes that make use of UIWebView.

Weitere Informationen zum erkennen und Entfernen von UIWebView Verweisen finden Sie unter " UIWebView depreation".For more information about detecting and removing UIWebView references, see UIWebView deprecation.

Konfigurieren des LinkersConfigure the linker

Führen Sie die folgenden Schritte aus, damit der Linker Verweise entfernen muss UIWebView :Follow these steps for the linker to remove UIWebView references:

  1. IOS-Projekteigenschaften öffnen – Klicken Sie mit der rechten Maustaste auf Ihr IOS-Projekt und wählen Sie EigenschaftenOpen iOS project properties – Right-click your iOS project and choose Properties.
  2. Navigieren Sie zum Abschnitt – IOS-Build. Wählen Sie den Abschnitt IOS-Build aus.Navigate to the iOS Build section – Select the iOS Build section.
  3. Aktualisieren der zusätzlichen mtouchscreen-Argumente – Fügen Sie in den zusätzlichen mberührungs-Argumenten dieses Flag hinzu --optimize=experimental-xforms-product-type (zusätzlich zu allen Werten, die möglicherweise bereits vorhanden sind).Update the Additional mtouch arguments – In the Additional mtouch arguments add this flag --optimize=experimental-xforms-product-type (in addition to any value that might already be in there). Hinweis: dieses Flag funktioniert zusammen mit dem linkerverhalten , das nur auf das SDK oder alle verknüpfenfestgelegt ist.Note: this flag works together with the Linker Behavior set to SDK Only or Link All. Wenn Sie aus irgendeinem Grund Fehler sehen, wenn Sie das linkerverhalten auf alle festlegen, ist dies wahrscheinlich ein Problem innerhalb des App-Codes oder einer Drittanbieter Bibliothek, die nicht Linker sicher ist.If, for any reason, you see errors when setting the Linker Behavior to All, this is most likely a problem within the app code or a third-party library that is not linker safe. Weitere Informationen zum Linker finden Sie unter Verknüpfen von xamarin. IOS-apps.For more information on the linker, see Linking Xamarin.iOS Apps.
  4. Alle Buildkonfigurationen aktualisieren – Verwenden Sie die Listen Konfiguration und Plattform am oberen Rand des Fensters, um alle Buildkonfigurationen zu aktualisieren.Update all build configurations – Use the Configuration and Platform lists at the top of the window to update all build configurations. Die wichtigste zu Aktualisier dende Konfiguration ist die Release/iPhone- Konfiguration, da diese normalerweise zum Erstellen von Builds für die App Store-Übermittlung verwendet wird.The most important configuration to update is the Release/iPhone configuration, since that is typically used to create builds for App Store submission.

Sie können das Fenster mit dem neuen Flag in diesem Screenshot sehen:You can see the window with the new flag in place in this screenshot:

Festlegen des Flags im Abschnitt IOS-BuildSetting the flag in the iOS Build section

Wenn Sie nun einen neuen (Release) Build erstellen und an den App Store senden, sollten keine Warnungen zu der veralteten API vorliegen.Now when you create a new (release) build and submit it to the App Store, there should be no warnings about the deprecated API.