Xamarin.Forms WebView

WebView是用于在您的应用程序中显示Web和HTML内容的视图。

内容

WebView支持以下类型的内容：

HTML和CSS网站– WebView完全支持使用HTML和CSS编写的网站，包括JavaScript支持。
文档–由于WebView是在每个平台上使用本机组件实现的，因此WebView能够显示在每个平台上可见的文档，这意味着PDF文件可在iOS和Android上使用。
HTML字符串– WebView可以显示内存中的HTML字符串。
本地文件– WebView可以显示应用程序中嵌入的上述任何内容类型。

注：Windows上的WebView不支持Silverlight，Flash或任何ActiveX控件，即使该平台上的Internet Explorer支持它们也是如此。

示例：WorkingWithWebview

WebSites
要显示来自互联网的网站，请将WebView的Source属性设置为字符串URL：

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

注：网址必须使用指定的协议完整构成（即，其前面必须带有“ http：//”或“ https：//”）。

要想打开外部的网页，则可以：

 var openUrl = new Button
            {
                Text = "Open location using built-in Web Browser app"
            };
            openUrl.Clicked += async (sender, e) =>
            {
                await Launcher.OpenAsync("http://xamarin.com/evolve");
            };

或者创建一个Label，其内容是html文本（包含一个<a href...>）

iOS和ATS（App Transport Security）

从版本9开始，iOS默认将仅允许您的应用程序与实现最佳实践安全性的服务器通信。必须在Info.plist中设置值才能启用与不安全服务器的通信。

注：如果您的应用程序需要连接到不安全的网站，则应始终使用NSExceptionDomains作为例外输入域，而不是使用NSAllowsArbitraryLoads完全关闭ATS，NSAllowsArbitraryLoads仅应在极端紧急情况下使用。

更多查看

HTML字符串

如果要呈现在代码中动态定义的HTML字符串，则需要创建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;

在上面的代码中，@用于将HTML标记为字符串文字，这意味着所有常用的转义字符都将被忽略。

注：可能需要设置WebView的WidthRequest和HeightRequest属性以查看HTML内容，具体取决于WebView是其子级的布局。例如，这在StackLayout中是必需的。

本地HTML内容

WebView可以显示应用程序中嵌入的HTML，CSS和Javascript中的内容。例如：

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

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

请注意，上述CSS中指定的字体将需要针对每个平台进行自定义，因为并非每个平台都具有相同的字体。

要使用WebView显示本地内容，您需要像打开其他文件一样打开HTML文件，然后将内容作为字符串加载到HtmlWebViewSource的Html属性中。有关打开文件的更多信息，请参见使用文件。

尽管已经加载了第一页，但是WebView不了解HTML的来源，在处理引用本地资源的页面时，这是一个问题。当本地页面彼此链接，页面使用单独的JavaScript文件或页面链接到CSS样式表时，可能发生这种情况的示例。

为了解决这个问题，您需要告诉WebView在文件系统上哪里可以找到文件，通过在WebView使用的HtmlWebViewSource上设置BaseUrl属性来执行此操作。

由于每个操作系统上的文件系统都不相同，因此您需要确定每个平台上的URL，Xamarin.Forms公开了DependencyService以在运行时在每个平台上解决依赖关系。

要使用DependencyService，首先定义一个可以在每个平台上实现的接口：

public interface IBaseUrl { string Get(); }

请注意，除非在每个平台上都实现了该界面，否则该应用程序将无法运行。在公共项目中，请确保您记得使用DependencyService设置BaseUrl：

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

然后必须提供每个平台的接口实现。

iOS
在iOS上，Web内容应通过构建操作BundleResource位于项目的根目录或Resources目录中，如下所示：

Xamarin.Forms WebView

应将BaseUrl设置为Main bundle的路径：

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

Android
在Android上，通过构建操作AndroidAsset将HTML，CSS和图像放在Assets文件夹中，如下所示：

文件属性中，生成操作=AndroidAsset

Xamarin.Forms WebView

在Android上，应将BaseUrl设置为“ file：/// android_asset /”：

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

在Android上，还可以通过MainActivity.Instance属性公开的当前Android上下文访问Assets文件夹中的文件：

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

Navigation

WebView支持通过几种可用的方法和属性进行导航：

GoForward（）–如果CanGoForward为true，则调用GoForward会向前导航到下一个访问的页面。
GoBack（）–如果CanGoBack为true，则调用GoBack将导航到最后访问的页面。
CanGoBack –如果存在要导航回的页面，则为true；如果浏览器位于起始URL，则为false。
CanGoForward –如果用户向后导航并且可以前进到已经访问过的页面，则为true。

在页面内，WebView不支持多点触摸手势，重要的是要确保内容经过移动优化，并且无需缩放即可显示。

应用程序通常在WebView而非设备的浏览器中显示链接，在这些情况下，允许常规导航很有用，但是当用户在开始链接上时回击时，应用程序应返回到常规应用程序视图。

使用内置的导航方法和属性来启用此方案。

示例：WebViewSample

首先创建浏览器视图的页面：

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

View Code