在 UWP WebView 中显示本地 html 文件内容 [英] Display local html file content in UWP WebView
问题描述
我相信这是一项非常简单的任务，我在网络上看到了很多示例，但由于我遇到了不同的异常，因此它们仍然不适合我.
I believe this is pretty straightforward task and I've seen a lot of examples in the web but still none of them is working for me since I experience different exceptions.
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，我已经尝试了以下操作:
- 使用导航方法:
To display static html saved in help.html file in my UWP application LocalFolder I've already tried the following:
- Use Navigate method:
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 的 Source 属性:
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 的 Source 属性: 这是 微软文档.
<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 工具包.
- Tried using url string directly in Navigate() arguments as in this microsoft examples but Navigate() accepts only Uri as an aargument so the documentation is either invalid, either for older version of xaml toolkit.
webView.Navigate("ms-appx-web:///help.html");
结果:
Syntax error.
我暂时想到的唯一解决方案是使用某种文件管理器读取 html 文件的内容并使用 NavigateToString() 方法:
The only solution I've temporary came up with is reading the content of html file with some kind of file manager and using NavigateToString() method:
var content = fileManager.Read("help.html"); // Manually read the content of html file
webView.NavigateToString(content);
那么问题是为什么描述的示例不起作用?如何避免使用 NavigateToString?
推荐答案
TheTanic 提供的解决方案 将适用于文件与您的包裹一起交付.对于存储在 LocalFolder 或 TemporaryFolder 中的文件，您必须遵循特殊的 URI 方案:
The solution provided by TheTanic will work for files that are delivered with your package. For files stored in your LocalFolder or TemporaryFolder you must follow special URI scheme:
此方案的 WebView 支持要求您将内容放在本地或临时文件夹下的子文件夹中.这可以导航到统一资源标识符 (URI)，例如 ms-appdata:///local/folder/file.html 和 ms-appdata:///temp/folder/file.html
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/ 在此之后 must是一个文件夹并在您的文件中.这是一个工作示例:
This means that if you use LocalFolder then URI will start like this: ms-appdata:///local/ after this must be a folder and inside your file. Here is a working sample:
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"));
另请注意，使用的所有内容也必须在该文件夹中:
Note also that all the content used must be also in that folder as:
这些一级子文件夹中的每一个都与其他一级子文件夹中的内容隔离.
Each of these first-level subfolders is isolated from the content in other first-level subfolders.
这篇关于在 UWP WebView 中显示本地 html 文件内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
