WebView do xamarin. FormsXamarin.Forms WebView

Baixar exemplo baixar o exemploDownload Sample Download the sample

WebView é um modo de exibição da web e o conteúdo HTML em seu aplicativo.WebView is a view for displaying web and HTML content in your app. Diferentemente OpenUri, que leva o usuário para o navegador da web no dispositivo, WebView exibe o conteúdo HTML dentro de seu aplicativo.Unlike OpenUri, which takes the user to the web browser on the device, WebView displays the HTML content inside your app.

ConteúdoContent

WebView suporta os seguintes tipos de conteúdo:WebView supports the following types of content:

  • Sites HTML e CSS – WebView tem suporte completo para sites da Web escritos usando HTML e CSS, incluindo suporte a JavaScript.HTML & CSS websites – WebView has full support for websites written using HTML & CSS, including JavaScript support.
  • Documentos – como WebView é implementado usando componentes nativos em cada plataforma, WebView é capaz de mostrar os documentos que podem ser exibidos em cada plataforma.Documents – Because WebView is implemented using native components on each platform, WebView is capable of showing documents that are viewable on each platform. Isso significa que os arquivos PDF funcionam no iOS e Android.That means that PDF files work on iOS and Android.
  • Cadeias de caracteres HTML – WebView pode mostrar cadeias de caracteres HTML da memória.HTML strings – WebView can show HTML strings from memory.
  • Arquivos locais – WebView pode apresentar qualquer um dos tipos de conteúdo acima inserido no aplicativo.Local Files – WebView can present any of the content types above embedded in the app.

Observação

WebView no Windows não oferece suporte do Silverlight, Flash ou todos os controles ActiveX, mesmo se eles são suportados pelo Internet Explorer nessa plataforma.WebView on Windows does not support Silverlight, Flash or any ActiveX controls, even if they are supported by Internet Explorer on that platform.

SitesWebsites

Para exibir um site da internet, defina as WebViewdo Source propriedade como uma cadeia de caracteres de URL: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"
};

Observação

URLs devem ser totalmente formadas com o protocolo especificado (ou seja, ele deve ter "http://" ou "https://" acrescentado a ele).URLs must be fully formed with the protocol specified (i.e. it must have "http://" or "https://" prepended to it).

iOS e ATSiOS and ATS

Desde a versão 9, iOS só permitirá que seu aplicativo para se comunicar com servidores que implementam as práticas recomendadas de segurança por padrão.Since version 9, iOS will only allow your application to communicate with servers that implement best-practice security by default. Valores devem ser definidos Info.plist para habilitar a comunicação com servidores inseguros.Values must be set in Info.plist to enable communication with insecure servers.

Observação

Se seu aplicativo requer uma conexão em um site inseguro, você sempre deve inserir o domínio como uma exceção usando NSExceptionDomains em vez de como o ATS desativar completamente 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 só deve ser usado em situações extremas de emergências.NSAllowsArbitraryLoads should only be used in extreme emergency situations.

O exemplo a seguir demonstra como habilitar um domínio específico (em xamarin.com neste caso) para ignorar os 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>

É uma prática recomendada para permitir que somente alguns domínios ignorar a ATS, permitindo que você use sites confiáveis enquanto se beneficia com a segurança adicional em domínios não confiáveis.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. O exemplo a seguir demonstra o método menos seguro de desabilitar o ATS para o aplicativo:The following demonstrates the less secure method of disabling ATS for the app:

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

Ver segurança de transporte de aplicativo para obter mais informações sobre esse novo recurso no iOS 9.See App Transport Security for more information about this new feature in iOS 9.

Cadeias de caracteres HTMLHTML Strings

Se você quiser apresentar uma cadeia de caracteres de HTML definida dinamicamente no código, você precisará criar uma instância do 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;

No código acima, @ é usado para marcar o HTML como uma cadeia de caracteres literal, o que significa que todos os caracteres de escape comuns são ignorados.In the above code, @ is used to mark the HTML as a string literal, meaning all the usual escape characters are ignored.

Conteúdo HTML localLocal HTML Content

WebView pode exibir o conteúdo do HTML, CSS e Javascript inserido dentro do aplicativo.WebView can display content from HTML, CSS and Javascript embedded within the app. Por exemplo:For example:

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

CSS:CSS:

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

Observe que as fontes especificadas no CSS acima precisará ser personalizado para cada plataforma, pois nem todas as plataforma tem as mesmas fontes.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 exibição local conteúdo usando um WebView, você precisará abrir o arquivo HTML como qualquer outro e, em seguida, carregar o conteúdo como uma cadeia de caracteres para o Html propriedade de um 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 obter mais informações sobre a abertura de arquivos, consulte trabalhando com arquivos.For more information on opening files, see Working with Files.

As capturas de tela a seguir mostram o resultado de exibição de conteúdo local em cada plataforma:The following screenshots show the result of displaying local content on each platform:

Embora a primeira página é carregada, o WebView não tem conhecimento de onde veio o HTML.Although the first page has been loaded, the WebView has no knowledge of where the HTML came from. Isso é um problema ao lidar com páginas que fazem referência a recursos locais.That is a problem when dealing with pages that reference local resources. Quando o link de páginas locais aos outros, uma página faz uso de um arquivo JavaScript separado ou uma página contém links para uma folha de estilos CSS são exemplos de quando isso pode acontecer.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 resolver isso, você precisa informar o WebView onde localizar os arquivos no sistema de arquivos.To solve this, you need to tell the WebView where to find files on the filesystem. Fazer isso definindo a BaseUrl propriedade em de HtmlWebViewSource usado pelo WebView.Do that by setting the BaseUrl property on the HtmlWebViewSource used by the WebView.

Como o sistema de arquivos em cada um dos sistemas operacionais é diferente, você precisa determinar essa URL em cada plataforma.Because the filesystem on each of the operating systems is different, you need to determine that URL on each platform. Xamarin. Forms expõe a DependencyService para resolução de dependências em tempo de execução em cada plataforma.Xamarin.Forms exposes the DependencyService for resolving dependencies at runtime on each platform.

Para usar o DependencyService, primeiro defina uma interface que pode ser implementada em cada plataforma:To use the DependencyService, first define an interface that can be implemented on each platform:

public interface IBaseUrl { string Get(); }

Observe que, até que a interface é implementada em cada plataforma, o aplicativo não será executado.Note that until the interface is implemented on each platform, the app will not run. No projeto comuns, certifique-se de que você se lembrar de definir a BaseUrl usando o 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();

Implementações da interface para cada plataforma, em seguida, devem ser fornecidas.Implementations of the interface for each platform must then be provided.

iOSiOS

No iOS, o conteúdo da web deve estar localizado no diretório raiz do projeto ou recursos diretório com a ação de build BundleResource, conforme demonstrado a seguir:On iOS, the web content should be located in the project's root directory or Resources directory with build action BundleResource, as demonstrated below:

O BaseUrl deve ser definido como o caminho do pacote 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

No Android, coloque o HTML, CSS e imagens na pasta ativos com a ação de build AndroidAsset como demonstrado a seguir:On Android, place HTML, CSS, and images in the Assets folder with build action AndroidAsset as demonstrated below:

No Android, o BaseUrl deve ser definido como "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/";
    }
  }
}

No Android, arquivos de ativos pasta também pode ser acessada por meio do contexto Android atual, que é exposto pelo MainActivity.Instance propriedade: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 do WindowsUniversal Windows Platform

Em projetos de plataforma Universal do Windows (UWP), colocar HTML, CSS e imagens na raiz do projeto com a ação de build definida como conteúdo.On Universal Windows Platform (UWP) projects, place HTML, CSS and images in the project root with the build action set to Content.

O BaseUrl deve ser definido como "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 dá suporte à navegação por meio de vários métodos e propriedades que ele se torna disponível:WebView supports navigation through several methods and properties that it makes available:

  • GoForward() – se CanGoForward for true, chamar GoForward navega para a próxima página visitada.GoForward() – if CanGoForward is true, calling GoForward navigates forward to the next visited page.
  • GoBack() – se CanGoBack for true, chamar GoBack navegará para a última página visitada.GoBack() – if CanGoBack is true, calling GoBack will navigate to the last visited page.
  • CanGoBacktrue se não houver páginas para navegar de volta para false se o navegador é a URL inicial.CanGoBacktrue if there are pages to navigate back to, false if the browser is at the starting URL.
  • CanGoForwardtrue se o usuário navegar para trás e avance até uma página que já foi visitada.CanGoForwardtrue if the user has navigated backwards and can move forward to a page that was already visited.

Em páginas, WebView não oferece suporte a gestos multitoque.Within pages, WebView does not support multi-touch gestures. É importante para garantir que o conteúdo é otimizada para celular e é exibido sem a necessidade de aumentar o zoom.It is important to make sure that content is mobile-optimized and appears without the need for zooming.

É comum para aplicativos mostrar um link dentro de um WebView, em vez do navegador do dispositivo.It is common for applications to show a link within a WebView, rather than the device's browser. Nessas situações, é útil permitir a navegação normal, mas quando o usuário optou novamente enquanto estiverem no link inicial, o aplicativo deve retornar ao modo de exibição normal do aplicativo.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 as propriedades e métodos de navegação interna para habilitar esse cenário.Use the built-in navigation methods and properties to enable this scenario.

Comece criando a página para o modo de exibição do navegador: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>

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

É só isso!That's it!

EventosEvents

WebView aciona os eventos a seguir para ajudá-lo a responder a alterações no estado:WebView raises the following events to help you respond to changes in state:

  • Navigating – Evento gerado quando o WebView começa a carregar uma nova página.Navigating – event raised when the WebView begins loading a new page.
  • Navigated – Evento gerado quando a página é carregada e navegação foi interrompido.Navigated – event raised when the page is loaded and navigation has stopped.
  • ReloadRequested – Evento gerado quando uma solicitação é feita para recarregar o conteúdo atual.ReloadRequested – event raised when a request is made to reload the current content.

O WebNavigatingEventArgs objeto que acompanha o Navigating eventos tem quatro propriedades:The WebNavigatingEventArgs object that accompanies the Navigating event has four properties:

  • Cancel – Indica se deve ou não cancelar a navegação.Cancel – indicates whether or not to cancel the navigation.
  • NavigationEvent – o evento de navegação que foi gerado.NavigationEvent – the navigation event that was raised.
  • Source – o elemento que executou a navegação.Source – the element that performed the navigation.
  • Url – o destino de navegação.Url – the navigation destination.

O WebNavigatedEventArgs objeto que acompanha o Navigated eventos tem quatro propriedades:The WebNavigatedEventArgs object that accompanies the Navigated event has four properties:

  • NavigationEvent – o evento de navegação que foi gerado.NavigationEvent – the navigation event that was raised.
  • Result – Descreve o resultado do painel de navegação, usando um WebNavigationResult membro de enumeração.Result – describes the result of the navigation, using a WebNavigationResult enumeration member. Os valores válidos são Cancel, Failure, Success e Timeout.Valid values are Cancel, Failure, Success, and Timeout.
  • Source – o elemento que executou a navegação.Source – the element that performed the navigation.
  • Url – o destino de navegação.Url – the navigation destination.

Se você antecipar o uso de páginas da Web que levam muito tempo para carregar, considere usar o Navigating e Navigated eventos para implementar um indicador de status.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 exemplo: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>

Os dois manipuladores de evento:The two event handlers:

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

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

Isso resulta na seguinte saída (Carregando):This results in the following output (loading):

Carregamento concluído:Finished Loading:

Recarregar conteúdoReloading content

WebView tem um Reload método que pode ser usado para recarregar o conteúdo atual:WebView has a Reload method that can be used to reload the current content:

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

Quando o Reload método é invocado o ReloadRequested evento é acionado, o que indica que uma solicitação foi feita para recarregar o conteúdo atual.When the Reload method is invoked the ReloadRequested event is fired, indicating that a request has been made to reload the current content.

DesempenhoPerformance

Os navegadores da web populares agora adotam tecnologias, como a compilação de JavaScript e renderização acelerada por hardware.The popular web browsers now adopt technologies like hardware accelerated rendering and JavaScript compilation. No iOS, por padrão, o xamarin. Forms WebView é implementado pelo UIWebView classe e várias dessas tecnologias não estão disponíveis nesta implementação.On iOS, by default, the Xamarin.Forms WebView is implemented by the UIWebView class, and many of these technologies are unavailable in this implementation. No entanto, um aplicativo pode participar de uso do iOS WkWebView classe para implementar o xamarin. Forms WebView, que dá suporte à navegação mais rápida.However, an application can opt-in to using the iOS WkWebView class to implement the Xamarin.Forms WebView, which supports faster browsing. Isso pode ser feito adicionando o seguinte código para o AssemblyInfo.cs arquivo no projeto da plataforma iOS para o aplicativo: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 WkWebView instead of UIWebView.
[assembly: ExportRenderer(typeof(WebView), typeof(Xamarin.Forms.Platform.iOS.WkWebViewRenderer))]

WebView no Android por padrão é tão rápido quanto o navegador interno.WebView on Android by default is about as fast as the built-in browser.

O UWP WebView usa o mecanismo de renderização do Microsoft Edge.The UWP WebView uses the Microsoft Edge rendering engine. Dispositivos de desktop e tablet devem ver o mesmo desempenho quanto usar o próprio navegador Edge.Desktop and tablet devices should see the same performance as using the Edge browser itself.

PermissõesPermissions

Para que WebView para trabalhar, certifique-se de que as permissões são definidas para cada plataforma.In order for WebView to work, you must make sure that permissions are set for each platform. Observe que, em algumas plataformas, WebView funcionará no modo de depuração, mas não quando compilado para versão.Note that on some platforms, WebView will work in debug mode, but not when built for release. Isso ocorre porque algumas permissões, como aqueles para acesso à internet no Android, são definidos por padrão pelo Visual Studio para Mac quando no modo de depuração.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 – exige a funcionalidade de Internet (cliente e servidor), ao exibir o conteúdo de rede.UWP – requires the Internet (Client & Server) capability when displaying network content.
  • Android – requer INTERNET apenas ao exibir o conteúdo da rede.Android – requires INTERNET only when displaying content from the network. Conteúdo local não requer nenhuma permissão especial.Local content requires no special permissions.
  • iOS – não exige nenhuma permissão especial.iOS – requires no special permissions.

LayoutLayout

Ao contrário da maioria dos outros modos de xamarin. Forms WebView exige que HeightRequest e WidthRequest são especificados quando contido em StackLayout ou RelativeLayout.Unlike most other Xamarin.Forms views, WebView requires that HeightRequest and WidthRequest are specified when contained in StackLayout or RelativeLayout. Se você não especificar essas propriedades, o WebView não será renderizado.If you fail to specify those properties, the WebView will not render.

Os exemplos a seguir demonstram os layouts que resultam em funcionamento, renderização WebViews:The following examples demonstrate layouts that result in working, rendering WebViews:

StackLayout com WidthRequest & HeightRequest:StackLayout with WidthRequest & HeightRequest:

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

RelativeLayout com 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 sem 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>

Grade sem WidthRequest & HeightRequest.Grid without WidthRequest & HeightRequest. A grade é um dos layouts de alguns que não exigem a especificação de larguras e alturas solicitadas.: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>

Invocação de JavaScriptInvoking JavaScript

WebView inclui a capacidade de invocar uma função de JavaScript do C#e retornar qualquer resultado para a chamada C# código.WebView includes the ability to invoke a JavaScript function from C#, and return any result to the calling C# code. Isso é feito com o WebView.EvaluateJavaScriptAsync método, que é mostrado no exemplo a seguir do WebView exemplo: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}.";

O WebView.EvaluateJavaScriptAsync método avalia o JavaScript que é especificado como o argumento e retorna qualquer resultado como um string.The WebView.EvaluateJavaScriptAsync method evaluates the JavaScript that's specified as the argument, and returns any result as a string. Neste exemplo, o factorial função de JavaScript é chamada, que retorna o fatorial de number como resultado.In this example, the factorial JavaScript function is invoked, which returns the factorial of number as a result. Esse JavaScript função é definida no HTML local do arquivo que o WebView carrega e é mostrado no exemplo a seguir: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>