在 UWP WebView 中显示本地 html 文件内容

Question

我认为这是一项非常简单的任务，我在网上看到了很多示例，但由于我遇到了不同的异常情况，其中 none 仍然对我有用。

html:

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <p>
        Help html content.
    </p>
</body>
</html>

xaml:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>

        <WebView x:Name="webView" />
        <Button x:Name="buttonRefresh" 
                Grid.Row="1" 
                HorizontalAlignment="Center"
                Click="buttonRefresh_Click">
            Refresh
        </Button>
    </Grid>

要在我的 UWP 应用程序 LocalFolder 中显示保存在 help.html 文件中的静态 html 我已经尝试了以下操作：
- 使用导航方法：

private void buttonRefresh_Click(object sender, RoutedEventArgs e)
        {
            var uri = new Uri("ms-appdata:///local/help.html");
            webView.Navigate(uri);
        }

结果是以下异常：

System.ArgumentException: Value does not fall within the expected range.
   at Windows.UI.Xaml.Controls.WebView.Navigate(Uri source)
   at SimpleUwpApp.Proxy.SimplerPage.buttonRefresh_Click(Object sender, RoutedEventArgs e)

- 尝试在后面的代码中显式设置 webView 的源属性：

private void buttonRefresh_Click(object sender, RoutedEventArgs e)
{
    var uri = new Uri("ms-appdata:///local/help.html");
    webView.Source = uri;
}

结果：

System.ArgumentException: Value does not fall within the expected range.
   at Windows.UI.Xaml.Controls.WebView.put_Source(Uri value)
   at SimpleUwpApp.Proxy.SimplerPage.buttonRefresh_Click(Object sender, RoutedEventArgs e)

- 在 xaml 中显式设置 webView 的源属性： 这是 microsoft documentation.

中的确切示例

<WebView x:Name="webView" Source="ms-appdata:///local/help.html" />

结果启动异常：

Windows.UI.Xaml.Markup.XamlParseException: The text associated with this error code could not be found.

Failed to assign to property 'Windows.UI.Xaml.Controls.WebView.Source' because the type 'Windows.Foundation.String' cannot be assigned to the type 'Windows.Foundation.Uri'. [Line: 16 Position: 54]
   at Windows.UI.Xaml.Application.LoadComponent(Object component, Uri resourceLocator, ComponentResourceLocation componentResourceLocation)
   at SimpleUwpApp.Proxy.SimplerPage.InitializeComponent()

- 尝试直接在 Navigate() 参数中使用 url 字符串，如 microsoft examples 中所示，但 Navigate() 仅接受 Uri 作为参数，因此文档是要么无效，要么对于旧版本的 xaml 工具包。

webView.Navigate("ms-appx-web:///help.html");

结果：

Syntax error.

我临时想出的唯一解决办法是用某种文件管理器读取 html 文件的内容并使用 NavigateToString() 方法：

var content = fileManager.Read("help.html"); // Manually read the content of html file
webView.NavigateToString(content);

所以问题是为什么描述的示例不起作用？如何避免使用 NavigateToString?

Answer 1

所以我得到了两个不同的东西，它们对我有用：

XAML版本：

<WebView x:Name="webView" Source="ms-appx-web:///help.html"/>

这里需要使用ms-appx-web前缀。

代码隐藏版本：

webView.Navigate(new Uri("ms-appx-web:///help.html"));

与您的版本不同的是，您不能只输入字符串。您需要创建一个 Uri-Class.

的新对象

在两个版本中，html-文件是项目的直接子文件，项目是 Windows-10-UWP Application [你没说，如果你使用 Windows 8 或 Windows10]

Answer 2

解决方案 will work for files that are delivered with your package. For files stored in your LocalFolder or TemporaryFolder you must follow special URI scheme：

The WebView support for this scheme requires you to place your content in a subfolder under the local or temporary folder. This enables navigation to Uniform Resource Identifier (URI) such as ms-appdata:///local/folder/file.html and ms-appdata:///temp/folder/file.html

这意味着如果您使用 LocalFolder 那么 URI 将像这样开始： ms-appdata:///local/ 在此之后必须是一个文件夹在你的文件里。这是一个工作示例：

StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///help.html"));
StorageFolder folder = await ApplicationData.Current.LocalFolder.CreateFolderAsync("anyFolder", CreationCollisionOption.OpenIfExists);
await file.CopyAsync(folder, "help.html", NameCollisionOption.ReplaceExisting);
webView.Navigate(new Uri("ms-appdata:///local/anyFolder/help.html"));

另请注意，所有使用的内容也必须位于该文件夹中，因为：

Each of these first-level subfolders is isolated from the content in other first-level subfolders.

在 UWP WebView 中显示本地 html 文件内容

Display local html file content in UWP WebView

c#

webview

uwp

uwp-xaml