Question

您好我正在尝试加载一个html文件，该文件与类i在同一路径中运行，当我运行应用程序时，通过xamrian表单中的Web视图我得到一个白色屏幕，这里没有任何内容加载＃39我的代码：

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

Xamarin有与此相关的文档：

https://developer.xamarin.com/guides/xamarin-forms/user-interface/webview/

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;

Answer 2

这是github中的官方样本

WorkingWithWebview

tabs.Children.Add (new LocalHtml {Title = "Local" });
tabs.Children.Add (new LocalHtmlBaseUrl {Title = "BaseUrl" });
tabs.Children.Add (new WebPage { Title = "Web Page"});
tabs.Children.Add (new WebAppPage {Title ="External"});

第二个标签可能会有帮助。

Answer 3

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

The documentation 声明：

<块引用>

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

需要注意的关键是 WebView 的 Source 属性仅适用于外部 URL 或 HtmlWebViewSource。您不能在 Source 属性中放置本地 URL。措辞“您需要像打开其他任何文件一样打开 HTML 文件” 意味着（正如其后不久声明的那样）您需要使用完整文件将文件内容从磁盘加载到变量中路径，而不是网址。

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

<块引用>

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

换句话说，Webview 会自动在您的 HTML 中添加本地资源的任何链接。

总结

在您的共享项目中创建 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;

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

3 个答案: