如何在xamarin表单webview中加载本地html文件

Question

我正在尝试加载一个 html 文件，该文件与我正在使用的类位于同一路径中，当我运行应用程序时，通过 xamarin 表单中的 Web 视图，我得到一个白屏，并且没有加载任何内容，这是我的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace App.Plan
{
    public partial class Tornado : ContentPage
    {
        public Tornado()
        {
            InitializeComponent();
            var browser = new WebView
            {
                Source = "local.html"
};
    }
    }
}

Answer 1

我意识到这已经很旧了，但是当涉及到本地文件时，文档可能并不完全清楚，所以我想我应该分享我的想法。希望它对在这里绊倒的人有所帮助。

文档指出：

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

需要注意的关键是 WebView 的Source属性仅适用于外部 URL 或 HtmlWebViewSource。您不能将本地 URL 放入 Source 属性中。“您需要像打开其他文件一样打开 HTML 文件”这句话意味着（正如其后不久所述）您需要使用完整文件路径（而不是 URL）将文件内容从磁盘加载到变量中。

那么问题就变成了“其他本地文件的链接怎么样？” 这就是 HtmlWebViewSource 的 BaseUrl 属性发挥作用的地方。该文档通过说明以下内容解决了这个问题：

尽管第一页已加载，但 WebView 并不知道 HTML 来自何处。在处理引用本地资源的页面时，这是一个问题。可能发生这种情况的示例包括本地页面相互链接、页面使用单独的 JavaScript 文件或页面链接到 CSS 样式表。

换句话说，HTML 中任何指向本地资源的链接都将由 Webview 自动在前面添加 BaseUrl。

总结一下

在共享项目中创建 IBaseUrl 接口

public interface IBaseUrl { 
    string Get(); 
}

在每个平台项目中创建 IBaseUrl 的平台特定实现

iOS：

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

安卓

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

UWP

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

确保您的 HTML 文件位于适当的文件夹中并且具有正确的构建操作

• iOS：资源，构建操作：“BundleResource”
• Android：资产，构建操作：“AndroidAsset”
• UWP：项目根目录，构建操作：“内容”

确保 WebView 有高度和宽度请求，否则可能无法呈现：

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

设置完成后，您可以在共享项目中将其付诸实践。这是一个简化的示例：

// Use DI function to get the BaseUrl for the platform
var baseUrl = DependencyService.Get<IBaseUrl>().Get();

// You could append subfolders here if you don't 
// want all the HTML files mixed with other resources:
// var baseUrl = System.IO.Path.Combine(DependencyService.Get<IBaseUrl>().Get(), "subfolder");

// Define the location of your initial HTML page using the base url
var initialHtmlPath = System.IO.Path.Combine(baseUrl, "index.html");

// Create the viewsource, loading the first HTML file as a string
var localHtmlViewSource = new HtmlWebViewSource();
localHtmlViewSource.BaseUrl = baseUrl;
localHtmlViewSource.Html = System.IO.File.ReadAllText(initialHtmlPath);

// Set the webview to use the local source
HelpWebView.Source = localHtmlViewSource;