我需要从文件中加载 HTML 和 CSS（不同于 ANDROID 和 IOS）并在 WebView 中显示？答案

【问题标题】：I need to load HTML and CSS (different from ANDROID and IOS) from a file and display in a WebView?我需要从文件中加载 HTML 和 CSS（不同于 ANDROID 和 IOS）并在 WebView 中显示？
【发布时间】：2017-10-25 17:47:20
【问题描述】：

请先查看下面的我的 cmets，然后再将其标记为与另一个不寻找相同内容的问题完全相同。

到目前为止，我已经尝试过像这样在本地加载：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:local="clr-namespace:Japanese;assembly=Test" 
    x:Class="Test.HelpCards" 
    x:Name="HelpCards" 
    Title="Help ▹ Cards Tab">
    <ContentPage.Content>
        <WebView x:Name="Browser" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
    </ContentPage.Content>
</ContentPage>

public HelpCards()
{
    InitializeComponent();
    var htmlSource = new HtmlWebViewSource();
    htmlSource.Html = @"<html><body>
    <h1>ABC</h1>
    <p>DEF</p>
    </body></html>";
    Browser.Source = htmlSource;
}

现在我想做同样的事情，但将 HTML 存储在一个文件中并具有 CSS（Android 和 iOS 不同）。我想找到一种方法将其加载到浏览器中。

有没有人有任何例子说明如何做到这一点。特别是对我来说，在我的公共项目中只有一个 HTML 文件，然后在这两个项目中拥有适用于 Android 和 iOS 的 CSS 文件，这一点很重要。

请注意，这不是

的完全相同

Loading Local HTML with WebView Xamarin Forms

唯一重复的是标题相似。

该问题表明：

“只需通过Android即可完成，无需担心IOS和Windows。”
这个问题也没有解决常见的 HTML
这个问题也没有提到任何关于 CSS 的内容

我不得不关闭并重新打开这个问题，因为它被我认为没有仔细观察的人错误地标记为完全重复。请不要标记为完全重复。

更新：这是我现在遇到的问题

NSBundle.MainBundle.BundlePath;这是：

"/Users/alan/Library/Developer/CoreSimulator/Devices/2184643E-9C57-4CFD-A7F9-A55CBC983402/data/Containers/Bundle/Application/9C950717-4E9C-4494-BF63-DC3AC3EDDE8C/Japanese.iOS.app"

我的 HTML 是这样的：

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8" />
       <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        Hello again
        <h1>hihi</h1>
    </body>
</html>

我的 style.css 文件位于 Japanese.iOS 的 Resources 文件夹中，是这样的：

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
    font-size: 99px;
}

【问题讨论】：

PCL 项目不包含资产/捆绑资源/等。除非它们是基于程序集的嵌入式资源，否则您始终可以嵌入 HTML 文件并将其加载到字符串中并将其分配给您的 @ 987654326@，就平台相关的 CSS 而言，将其加载到基于平台相关方法的字符串中，并将 CSS 注入您的 HTML 字符串，然后再将字符串应用到您的 WebView

标签： xamarin xamarin.forms

【解决方案1】：

要共享 html 文件 - 您可以在共享 PCL 项目中将它们注册为 embedded resources。确保按名称引用特定于平台的 css 文件。示例 html 文件如下所示：
```
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles.css">
</head>
```
将特定于android的css文件作为asset添加到android项目
将 iOS 特定的 css 文件作为 resource 添加到 iOS 项目
引入共享项目的接口 - 用于访问特定于平台的资产/资源的路径。
```
public interface IBaseUrl { string Get(); }
```

对 android 实现相同

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

对于 iOS

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

现在您可以设置您的 WebView 以使用共享的 html 文件，同时使用特定于平台的 css - 这是通过 BaseUrl 指定的。

var assembly = typeof(AppNamespace.App).GetTypeInfo().Assembly;
var stream = assembly.GetManifestResourceStream("AppNamespace.Common.html");
string html = string.Empty;
using (var reader = new System.IO.StreamReader(stream))
{
    html = reader.ReadToEnd();
}

var source = new HtmlWebViewSource()
{
    BaseUrl = DependencyService.Get<IBaseUrl>().Get(),
    Html = html
};

webView.Source = source;

【讨论】：

谢谢，我会试试这个，如果我有任何问题，请告诉你。
我已经尝试了您的答案，但似乎 css 文件未包含在资源包中，或者它没有被调用。我在示例中也注意到了同样的情况：developer.xamarin.com/samples/xamarin-forms/WorkingWithWebview 我在这里对 default.css 所做的任何更改都不会反映在我所看到的内容中。如果你能试试这个，如果你看到同样的东西，我会很感激。请注意，到目前为止我只尝试过 iOS。谢谢
我更新了问题以显示我遇到的问题。
测试它 - 它按预期工作。会不会是名字不匹配的问题？您可以通过Github link 访问代码
重建全部解决了这个问题。谢谢