:::no-loc(Xamarin.Forms)::: WebView:::no-loc(Xamarin.Forms)::: WebView

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

WebView es una vista para mostrar contenido web y HTML en la aplicación:WebView is a view for displaying web and HTML content in your app:

En el explorador de aplicaciones

ContenidoContent

WebView admite los siguientes tipos de contenido:WebView supports the following types of content:

  • HTML & – WebView de sitios web CSS es totalmente compatible con sitios web escritos con HTML & CSS, incluida la compatibilidad con JavaScript.HTML & CSS websites – WebView has full support for websites written using HTML & CSS, including JavaScript support.
  • Documentos – dado que WebView se implementa mediante componentes nativos en cada plataforma, WebView es capaz de mostrar documentos en los formatos admitidos por la plataforma subyacente.Documents – Because WebView is implemented using native components on each platform, WebView is capable of showing documents in the formats that are supported by the underlying platform.
  • Las cadenas HTML – WebView pueden mostrar cadenas HTML de la memoria.HTML strings – WebView can show HTML strings from memory.
  • WebView – de archivos locales puede presentar cualquiera de los tipos de contenido anteriores incrustados en la aplicación.Local Files – WebView can present any of the content types above embedded in the app.

Nota

WebView en Windows no es compatible con Silverlight, flash ni con ningún control ActiveX, aunque sea compatible con Internet Explorer en esa plataforma.WebView on Windows does not support Silverlight, Flash or any ActiveX controls, even if they are supported by Internet Explorer on that platform.

WebsitesWebsites

Para mostrar un sitio web desde Internet, establezca la WebView Source propiedad de en una dirección URL de cadena: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"
};

Nota

Las direcciones URL deben estar formadas por completo con el protocolo especificado (es decir, deben tener "http://" o "https://" antepuesto).URLs must be fully formed with the protocol specified (i.e. it must have "http://" or "https://" prepended to it).

iOS y ATSiOS and ATS

Desde la versión 9, iOS solo permitirá que la aplicación se comunique con los servidores que implementan la seguridad de prácticas recomendadas de forma predeterminada.Since version 9, iOS will only allow your application to communicate with servers that implement best-practice security by default. Los valores se deben establecer en Info.plist para permitir la comunicación con servidores no seguros.Values must be set in Info.plist to enable communication with insecure servers.

Nota

Si la aplicación requiere una conexión a un sitio web inseguro, siempre debe escribir el dominio como una excepción mediante NSExceptionDomains en lugar de desactivar completamente el ATS usando 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. NSAllowsArbitraryLoads solo se debe usar en situaciones extremas de emergencia.NSAllowsArbitraryLoads should only be used in extreme emergency situations.

A continuación se muestra cómo habilitar un dominio específico (en este caso, xamarin.com) para omitir los requisitos de ATS: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>

Se recomienda habilitar solo algunos dominios para omitir ATS, lo que le permite usar sitios de confianza mientras benefician de la seguridad adicional en dominios que no son de confianza.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. A continuación se muestra el método menos seguro para deshabilitar ATS para la aplicación:The following demonstrates the less secure method of disabling ATS for the app:

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

Consulte seguridad de transporte de aplicaciones para obtener más información sobre esta nueva característica en iOS 9.See App Transport Security for more information about this new feature in iOS 9.

Cadenas HTMLHTML Strings

Si desea presentar una cadena de HTML definida dinámicamente en el código, deberá crear una instancia de 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>:::no-loc(Xamarin.Forms):::</h1>
  <p>Welcome to WebView.</p>
  </body></html>";
browser.Source = htmlSource;

Vista previa que muestra la cadena HTML

En el código anterior, @ se usa para marcar el HTML como un literal de cadena textual, lo que significa que la mayoría de los caracteres de escape se omiten.In the above code, @ is used to mark the HTML as a verbatim string literal, meaning most escape characters are ignored.

Nota

Puede que sea necesario establecer las WidthRequest propiedades y HeightRequest de WebView para ver el contenido HTML, dependiendo del diseño del que WebView sea un elemento secundario de.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. Por ejemplo, esto es necesario en StackLayout .For example, this is required in a StackLayout.

Contenido HTML localLocal HTML Content

WebView puede mostrar contenido de HTML, CSS y JavaScript incrustado dentro de la aplicación.WebView can display content from HTML, CSS and JavaScript embedded within the app. Por ejemplo:For example:

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

CSSCSS:

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

Tenga en cuenta que las fuentes especificadas en la CSS anterior deberán personalizarse para cada plataforma, ya que no todas las plataformas tienen las mismas fuentes.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.

Para mostrar el contenido local mediante WebView , deberá abrir el archivo HTML como cualquier otro y, a continuación, cargar el contenido como una cadena en la Html propiedad de 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. Para obtener más información sobre cómo abrir archivos, vea trabajar con archivos.For more information on opening files, see Working with Files.

Las siguientes capturas de pantallas muestran el resultado de mostrar el contenido local en cada plataforma:The following screenshots show the result of displaying local content on each platform:

Vista previa que muestra el contenido local

Aunque se ha cargado la primera página, el WebView no tiene ningún conocimiento de dónde procede el código HTML.Although the first page has been loaded, the WebView has no knowledge of where the HTML came from. Esto es un problema cuando se trabaja con páginas que hacen referencia a recursos locales.That is a problem when dealing with pages that reference local resources. Algunos ejemplos de Cuándo se pueden producir cuando las páginas locales se vinculan entre sí, una página utiliza un archivo de JavaScript independiente o una página se vincula a una hoja de estilos CSS.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.

Para solucionar este problemas, debe indicar WebView dónde encontrar los archivos en el sistema de archivos.To solve this, you need to tell the WebView where to find files on the filesystem. Para ello, establezca la BaseUrl propiedad en la HtmlWebViewSource utilizada por WebView .Do that by setting the BaseUrl property on the HtmlWebViewSource used by the WebView.

Dado que el sistema de archivos de cada uno de los sistemas operativos es diferente, debe determinar esa dirección URL en cada plataforma.Because the filesystem on each of the operating systems is different, you need to determine that URL on each platform. :::no-loc(Xamarin.Forms)::: expone el DependencyService para resolver las dependencias en tiempo de ejecución en cada plataforma.:::no-loc(Xamarin.Forms)::: exposes the DependencyService for resolving dependencies at runtime on each platform.

Para usar DependencyService , defina primero una interfaz que se pueda implementar en cada plataforma:To use the DependencyService, first define an interface that can be implemented on each platform:

public interface IBaseUrl { string Get(); }

Tenga en cuenta que hasta que la interfaz se implementa en cada plataforma, la aplicación no se ejecutará.Note that until the interface is implemented on each platform, the app will not run. En el proyecto común, asegúrese de que no se olvide de establecer BaseUrl mediante 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();

A continuación, se deben proporcionar las implementaciones de la interfaz para cada plataforma.Implementations of the interface for each platform must then be provided.

iOSiOS

En iOS, el contenido web debe estar ubicado en el directorio raíz del proyecto o en el directorio de recursos con la acción de compilación BundleResource , como se muestra a continuación:On iOS, the web content should be located in the project's root directory or Resources directory with build action BundleResource , as demonstrated below:

BaseUrlDebe establecerse en la ruta de acceso del paquete principal: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

En Android, coloque HTML, CSS e imágenes en la carpeta assets con la acción de compilación AndroidAsset como se muestra a continuación:On Android, place HTML, CSS, and images in the Assets folder with build action AndroidAsset as demonstrated below:

En Android, BaseUrl debe establecerse en "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/";
    }
  }
}

En Android, también se puede tener acceso a los archivos de la carpeta assets a través del contexto actual de Android, que se expone mediante la MainActivity.Instance propiedad: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 ();
}

Plataforma universal de WindowsUniversal Windows Platform

En los proyectos de Plataforma universal de Windows (UWP), coloque HTML, CSS e imágenes en la raíz del proyecto con la acción de compilación establecida en contenido.On Universal Windows Platform (UWP) projects, place HTML, CSS and images in the project root with the build action set to Content.

BaseUrlDebe establecerse en "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 admite la navegación a través de varios métodos y propiedades que pone a su disposición:WebView supports navigation through several methods and properties that it makes available:

  • GoForward () – Si CanGoForward es true, la llamada a GoForward navega hacia delante hasta la siguiente página visitada.GoForward() – if CanGoForward is true, calling GoForward navigates forward to the next visited page.
  • GoBack () – Si CanGoBack es true, al llamar GoBack a se navegará a la última página visitada.GoBack() – if CanGoBack is true, calling GoBack will navigate to the last visited page.
  • CanGoBacktrue si hay páginas a las que navegar de nuevo, false si el explorador está en la dirección URL de inicio.CanGoBacktrue if there are pages to navigate back to, false if the browser is at the starting URL.
  • CanGoForwardtrue si el usuario ha navegado hacia atrás y puede avanzar a una página que ya se ha visitado.CanGoForwardtrue if the user has navigated backwards and can move forward to a page that was already visited.

Dentro de las páginas, no WebView admite movimientos multitáctiles.Within pages, WebView does not support multi-touch gestures. Es importante asegurarse de que el contenido esté optimizado para dispositivos móviles y aparezca sin necesidad de hacer zoom.It is important to make sure that content is mobile-optimized and appears without the need for zooming.

Es habitual que las aplicaciones muestren un vínculo dentro de un WebView , en lugar del explorador del dispositivo.It is common for applications to show a link within a WebView, rather than the device's browser. En esas situaciones, es útil permitir la navegación normal, pero cuando el usuario se vuelve a utilizar mientras están en el vínculo de inicio, la aplicación debe volver a la vista normal de la aplicación.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.

Use los métodos y las propiedades de navegación integrados para habilitar este escenario.Use the built-in navigation methods and properties to enable this scenario.

Empiece por crear la página para la vista de explorador: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>

En el código subyacente: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();
        }
    }
}

Eso es todo.That's it!

Botones de navegación de vista previa

EventosEvents

WebView genera los siguientes eventos para ayudarle a responder a los cambios en el estado:WebView raises the following events to help you respond to changes in state:

  • Navigating : evento que se genera cuando la vista Web comienza a cargar una nueva página.Navigating – event raised when the WebView begins loading a new page.
  • Navigated : evento que se genera cuando se carga la página y se detiene la navegación.Navigated – event raised when the page is loaded and navigation has stopped.
  • ReloadRequested : evento que se genera cuando se realiza una solicitud para volver a cargar el contenido actual.ReloadRequested – event raised when a request is made to reload the current content.

El WebNavigatingEventArgs objeto que acompaña al Navigating evento tiene cuatro propiedades:The WebNavigatingEventArgs object that accompanies the Navigating event has four properties:

  • Cancel : indica si se debe cancelar o no la navegación.Cancel – indicates whether or not to cancel the navigation.
  • NavigationEvent : evento de navegación que se ha producido.NavigationEvent – the navigation event that was raised.
  • Source : el elemento que llevó a cabo la navegación.Source – the element that performed the navigation.
  • Url : el destino de navegación.Url – the navigation destination.

El WebNavigatedEventArgs objeto que acompaña al Navigated evento tiene cuatro propiedades:The WebNavigatedEventArgs object that accompanies the Navigated event has four properties:

  • NavigationEvent : evento de navegación que se ha producido.NavigationEvent – the navigation event that was raised.
  • Result : describe el resultado de la navegación mediante un WebNavigationResult miembro de enumeración.Result – describes the result of the navigation, using a WebNavigationResult enumeration member. Los valores válidos son Cancel, Failure, Success y Timeout.Valid values are Cancel, Failure, Success, and Timeout.
  • Source : el elemento que llevó a cabo la navegación.Source – the element that performed the navigation.
  • Url : el destino de navegación.Url – the navigation destination.

Si prevé usar páginas web que tardan mucho tiempo en cargarse, considere la posibilidad de usar Navigating los Navigated eventos y para implementar un indicador de estado.If you anticipate using webpages that take a long time to load, consider using the Navigating and Navigated events to implement a status indicator. Por ejemplo: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>

Los dos controladores de eventos:The two event handlers:

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

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

Esto da como resultado el siguiente resultado (cargando):This results in the following output (loading):

Ejemplo de evento de navegación de vista en WebView

Finalizó la carga:Finished Loading:

Ejemplo de evento de navegación de vista en WebView

Recarga de contenidoReloading content

WebView tiene un Reload método que se puede usar para volver a cargar el contenido actual:WebView has a Reload method that can be used to reload the current content:

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

Cuando Reload se invoca el método ReloadRequested , se desencadena el evento, lo que indica que se ha realizado una solicitud para recargar el contenido actual.When the Reload method is invoked the ReloadRequested event is fired, indicating that a request has been made to reload the current content.

RendimientoPerformance

Los exploradores Web más populares adoptan tecnologías como la representación acelerada de hardware y la compilación de JavaScript.Popular web browsers adopt technologies like hardware accelerated rendering and JavaScript compilation. Antes de :::no-loc(Xamarin.Forms)::: 4,4, la :::no-loc(Xamarin.Forms)::: WebView clase implementaba en iOS UIWebView .Prior to :::no-loc(Xamarin.Forms)::: 4.4, the :::no-loc(Xamarin.Forms)::: WebView was implemented on iOS by the UIWebView class. Sin embargo, muchas de estas tecnologías no estaban disponibles en esta implementación.However, many of these technologies were unavailable in this implementation. Por lo tanto, desde :::no-loc(Xamarin.Forms)::: 4,4, :::no-loc(Xamarin.Forms)::: WebView se implementa en iOS mediante la WkWebView clase, que admite una exploración más rápida.Therefore, since :::no-loc(Xamarin.Forms)::: 4.4, the :::no-loc(Xamarin.Forms)::: WebView is implemented on iOS by the WkWebView class, which supports faster browsing.

Nota

En iOS, WkWebViewRenderer tiene una sobrecarga de constructor que acepta un WkWebViewConfiguration argumento.On iOS, the WkWebViewRenderer has a constructor overload that accepts a WkWebViewConfiguration argument. Esto permite configurar el representador durante la creación.This enables the renderer to be configured on creation.

Una aplicación puede volver a usar la clase de iOS UIWebView para implementar :::no-loc(Xamarin.Forms)::: WebView , por motivos de compatibilidad.An application can return to using the iOS UIWebView class to implement the :::no-loc(Xamarin.Forms)::: WebView, for compatibility reasons. Esto se puede lograr agregando el código siguiente al archivo AssemblyInfo.CS en el proyecto de la plataforma iOS para la aplicación: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(:::no-loc(Xamarin.Forms):::.WebView), typeof(:::no-loc(Xamarin.Forms):::.Platform.iOS.WebViewRenderer))]

WebView de forma predeterminada, en Android es tan rápido como el explorador integrado.WebView on Android by default is about as fast as the built-in browser.

La WebView de UWP usa el motor de representación de Microsoft Edge.The UWP WebView uses the Microsoft Edge rendering engine. Los dispositivos de escritorio y tableta deben ver el mismo rendimiento que usar el explorador Edge.Desktop and tablet devices should see the same performance as using the Edge browser itself.

PermisosPermissions

Para WebView que funcione, debe asegurarse de que los permisos se establecen para cada plataforma.In order for WebView to work, you must make sure that permissions are set for each platform. Tenga en cuenta que en algunas plataformas, WebView funcionará en modo de depuración, pero no cuando se compile para la versión.Note that on some platforms, WebView will work in debug mode, but not when built for release. Esto se debe a que algunos permisos, como los de acceso a Internet en Android, se establecen de forma predeterminada en Visual Studio para Mac en modo de depuración.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 – requiere la capacidad de Internet (servidor de & de cliente) al mostrar el contenido de la red.UWP – requires the Internet (Client & Server) capability when displaying network content.
  • Android – solo se requiere INTERNET cuando se muestra el contenido de la red.Android – requires INTERNET only when displaying content from the network. El contenido local no requiere ningún permiso especial.Local content requires no special permissions.
  • iOS – no requiere ningún permiso especial.iOS – requires no special permissions.

LayoutLayout

A diferencia de la mayoría de las demás :::no-loc(Xamarin.Forms)::: vistas, WebView requiere que HeightRequest y WidthRequest estén especificados cuando se incluyen en StackLayout o RelativeLayout.Unlike most other :::no-loc(Xamarin.Forms)::: views, WebView requires that HeightRequest and WidthRequest are specified when contained in StackLayout or RelativeLayout. Si no se especifican esas propiedades, WebView no se representará.If you fail to specify those properties, the WebView will not render.

En los siguientes ejemplos se muestran los diseños que dan como resultado el trabajo, la representación de WebView s:The following examples demonstrate layouts that result in working, rendering WebViews:

StackLayout con WidthRequest & HeightRequest:StackLayout with WidthRequest & HeightRequest:

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

RelativeLayout con WidthRequest & HeightRequest: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 sin WidthRequest & HeightRequest: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>

Grid sin WidthRequest & HeightRequest.Grid without WidthRequest & HeightRequest. Grid es uno de los pocos diseños que no requieren la especificación de alto y ancho solicitados.: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>

Invocar JavaScriptInvoking JavaScript

WebView incluye la capacidad de invocar una función de JavaScript desde C# y devolver los resultados al código C# que realiza la llamada.WebView includes the ability to invoke a JavaScript function from C#, and return any result to the calling C# code. Esto se logra con el WebView.EvaluateJavaScriptAsync método, que se muestra en el ejemplo siguiente desde el ejemplo WebView :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}.";

El WebView.EvaluateJavaScriptAsync método evalúa el JavaScript que se especifica como argumento y devuelve cualquier resultado como string .The WebView.EvaluateJavaScriptAsync method evaluates the JavaScript that's specified as the argument, and returns any result as a string. En este ejemplo, factorial se invoca la función de JavaScript, que devuelve el factorial de number como resultado.In this example, the factorial JavaScript function is invoked, which returns the factorial of number as a result. Esta función de JavaScript se define en el archivo HTML local que WebView carga y se muestra en el ejemplo siguiente: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

Las cookies se pueden establecer en un WebView , que luego se envían con la solicitud Web a la dirección URL especificada.Cookies can be set on a WebView, which are then sent with the web request to the specified URL. Esto se logra agregando Cookie objetos a un objeto CookieContainer , que se establece como el valor de la WebView.Cookies propiedad enlazable.This is accomplished by adding Cookie objects to a CookieContainer, which is then set as the value of the WebView.Cookies bindable property. El código siguiente muestra un ejemplo de esto:The following code shows an example of this:

using System.Net;
using :::no-loc(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() };

En este ejemplo, Cookie se agrega un único al CookieContainer objeto, que se establece como el valor de la WebView.Cookies propiedad.In this example, a single Cookie is added to the CookieContainer object, which is then set as the value of the WebView.Cookies property. Cuando WebView envía una solicitud Web a la dirección URL especificada, la cookie se envía con la solicitud.When the WebView sends a web request to the specified URL, the cookie is sent with the request.

UIWebView desuso y rechazo de la tienda de aplicaciones (ITMS-90809)UIWebView Deprecation and App Store Rejection (ITMS-90809)

A partir del 2020 de abril, Apple rechazará las aplicaciones que siguen usando la API en desuso UIWebView .Starting in April 2020, Apple will reject apps that still use the deprecated UIWebView API. Aunque :::no-loc(Xamarin.Forms)::: ha cambiado a WKWebView como valor predeterminado, todavía hay una referencia al SDK anterior en los :::no-loc(Xamarin.Forms)::: archivos binarios.While :::no-loc(Xamarin.Forms)::: has switched to WKWebView as the default, there is still a reference to the older SDK in the :::no-loc(Xamarin.Forms)::: binaries. El comportamiento actual del enlazador de iOS no lo quita y, como resultado, la UIWebView API en desuso seguirá apareciendo como referencia desde la aplicación cuando se envíe a la tienda de aplicaciones.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.

Hay disponible una versión preliminar del enlazador para corregir este problema.A preview version of the linker is available to fix this issue. Para habilitar la vista previa, debe proporcionar un argumento adicional --optimize=experimental-xforms-product-type al enlazador.To enable the preview, you will need to supply an additional argument --optimize=experimental-xforms-product-type to the linker.

Los requisitos previos para que funcionen son los siguientes:The prerequisites for this to work are:

  • :::no-loc(Xamarin.Forms)::: 4,5 o superior.:::no-loc(Xamarin.Forms)::: 4.5 or higher. :::no-loc(Xamarin.Forms)::: se requiere 4,6, o posterior, si la aplicación usa el material visual.:::no-loc(Xamarin.Forms)::: 4.6, or higher, is required if your app uses Material Visual.
  • Xamarin. iOS 13.10.0.17 o superior.Xamarin.iOS 13.10.0.17 or higher. Compruebe la versión de Xamarin. iOS en Visual Studio.Check your Xamarin.iOS version in Visual Studio. Esta versión de Xamarin. iOS se incluye con Visual Studio para Mac 8.4.1 y Visual Studio 16.4.3.This version of Xamarin.iOS is included with Visual Studio for Mac 8.4.1 and Visual Studio 16.4.3.
  • Quite las referencias UIWebView a.Remove references to UIWebView. El código no debe tener ninguna referencia a UIWebView o a clases que hagan uso de UIWebView .Your code should not have any references to UIWebView or any classes that make use of UIWebView.

Para obtener más información sobre cómo detectar y quitar UIWebView referencias, vea UIWebView deprecated.For more information about detecting and removing UIWebView references, see UIWebView deprecation.

Configurar el enlazadorConfigure the linker

Siga estos pasos para que el vinculador Quite UIWebView las referencias:Follow these steps for the linker to remove UIWebView references:

  1. Abrir propiedades – del proyecto de iOS Haga clic con el botón derecho en el proyecto de iOS y elija propiedades.Open iOS project properties – Right-click your iOS project and choose Properties.
  2. Vaya a la sección – compilación de iOS. Seleccione la sección compilación de iOS .Navigate to the iOS Build section – Select the iOS Build section.
  3. Actualización de los argumentos – de Mtouch adicionales En los argumentos Mtouch adicionales , agregue esta marca --optimize=experimental-xforms-product-type (además de cualquier valor que ya esté en ella).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). Nota: esta marca funciona junto con el comportamiento del vinculador establecido en solo SDK o vincular todo.Note: this flag works together with the Linker Behavior set to SDK Only or Link All. Si, por cualquier motivo, ve errores al establecer el comportamiento del enlazador en todos, lo más probable es que haya un problema en el código de la aplicación o en una biblioteca de terceros que no sea segura para el vinculador.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. Para obtener más información sobre el enlazador, consulte vinculación de aplicaciones de Xamarin. iOS.For more information on the linker, see Linking Xamarin.iOS Apps.
  4. Actualizar todas las configuraciones – de compilación Use las listas configuración y plataforma en la parte superior de la ventana para actualizar todas las configuraciones de compilación.Update all build configurations – Use the Configuration and Platform lists at the top of the window to update all build configurations. La configuración más importante que hay que actualizar es la configuración de lanzamiento o iPhone , ya que normalmente se usa para crear compilaciones para el envío de la tienda de aplicaciones.The most important configuration to update is the Release/iPhone configuration, since that is typically used to create builds for App Store submission.

Puede ver la ventana con la nueva marca en su lugar en esta captura de pantalla:You can see the window with the new flag in place in this screenshot:

Establecimiento de la marca en la sección compilación de iOSSetting the flag in the iOS Build section

Ahora, cuando se crea una nueva compilación (versión) y se envía a la tienda de aplicaciones, no debería haber ninguna advertencia sobre la API en desuso.Now when you create a new (release) build and submit it to the App Store, there should be no warnings about the deprecated API.