使用Xamarin Forms加载本地HTML的WebView

Question

我正在尝试在Xamarin forms的Webview中加载本地HTML页面。虽然我可以使用开发文档中的基本示例加载URL，但我无法加载自己的HTML页面。这只需要通过Android完成，因此不必担心IOS和Windows。

Xaml代码：

 <WebView
    x:Name="webviewjava"></WebView>

代码背后的实现：

 public partial class javscriptExample : ContentPage
{
    public interface IBaseUrl { string Get(); }
    public javscriptExample()
    {
        InitializeComponent();
        var source = new HtmlWebViewSource();

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

        webviewjava.Source = source;
    }
}

平台特定文件（LocalFile.cs）： 请注意，此文件已设置为Android资产。

 [assembly: Dependency(typeof(LocalFiles))]
namespace maptesting.Droid
{
    public class LocalFiles: IBaseUrl
    {
        public string Get()
        {
            return "file:///android_asset/";
        }

    }
}

在资产文件夹下有一个名为"TestWebPage.html"的文件，也被设置为Android资产。

虽然我不知道问题是什么，但我已经通过调试发现基础URL返回为空。只是为了清楚起见，我没有得到文件未找到的提示，屏幕只是空白的。

此外，我不确定是否会有影响。在LocalFiles.cs文件中，“IBaseUrl”没有语法高亮显示。所以我不确定它是否能“看到”它。

有什么想法吗？

- user3355961

Answer 1

我也遇到了同样的问题，但我是用以下方式解决的：

使用 "UrlWebViewSource" 替代 "HtmlWebViewSource"

var urlSource = new UrlWebViewSource();

string baseUrl = DependencyService.Get<IWebViewBaseUrl>().GetBaseUrl();
string filePathUrl = Path.Combine(baseUrl, "imprint.html");
urlSource.Url = filePathUrl;
WebBrowser.Source = urlSource;

- Kona Suresh

---

这个应该标记为答案。它适用于IOS和Android。 - Sanchal Kunnel

@SanchalKunnel 需要将html/css/javascript文件添加到两个项目中吗？还是只需添加到公共项目即可？ - chandravadan

我忘记了，我认为它被添加到了iOS和Android中。 - Kona Suresh

我为什么会收到“IWebViewBaseUrl 找不到”的错误信息？ - Jeremy Parker

@JeremyParker 你需要在你的表单中创建那个接口。 - niketan

Answer 2

你需要检查文件属性的生成操作是否为BundleResource。尝试使用以下代码加载本地html文件。

var source = new HtmlWebViewSource();
        string url = DependencyService.Get<IBaseUrl>().GetBaseUrl();
        string TempUrl = Path.Combine(url, "terms.html");
        source.BaseUrl = url;
        string html;
        try
        {
            using (var sr = new StreamReader(TempUrl))
            {
                html = sr.ReadToEnd();
                source.Html = html;
            }
        }
        catch(Exception ex){
            Console.WriteLine(ex.Message);
        }

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

iOS

[assembly: Dependency(typeof(BaseUrl))]
namespace yournamespace
{
   public class BaseUrl: IBaseUrl
   {
      public string GetBaseUrl()
      {
        return NSBundle.MainBundle.BundlePath;
      }
   }
}

安卓操作系统

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

- Vimal Saifudin

---

这个解决方案在iOS上对我有效。 - mefiX

Answer 3

WebView.BaseUrl仅告诉WebView从哪里开始查找文件。它是“网站”的根文件夹。默认情况下，浏览器将加载index.html文件，因此如果您将文件重命名为index.html，我相信它应该会自动加载。

我认为这也是可能的：

webviewjava.BaseUrl = DependencyService.Get<IBaseUrl>().Get();
webviewjava.Source = "TestWebPage.html";

在这里，你是在说“将此位置用作默认文件查找位置”和“查找此文件并将其用作HTML的源”。

- Jon G Stødle

---

谢谢，我会看一下这个。 - user3355961

Answer 4

这是一篇旧帖子，但它可能对寻求在Android、iOS和UWP上实现的人有所帮助，只需使用一个HTML文件即可。采用这种方法，您只需为所有平台使用一个HTML文件。

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/files?tabs=vsmac#loading-files-embedded-as-resources

- chandravadan

Answer 5

我不确定这是否算作一种解决方法，但我找到了一个变通的办法。与其采取上述路线，我只是做了这个：

webviewjava.Source = "file:///android_asset/TestWebPage.html";

在代码后台，只需完全省略IBaseUrl调用即可。这样做可以正常工作。

- user3355961

---

这不算，因为它只能在Android上运行。你应该真正创建依赖服务，并在每个实现中返回适当的字符串。对于Android，它是“file：///android_asset/TestWebPage.html”，而对于IOS，它将是其他内容。 - Yuri S

它只需要在Android上运行，我在问题中已经说过了。 - user3355961