logo标签列表

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

c#webviewuwpuwp-xaml
7

我相信这是一个非常简单的任务，我在网上看到了很多例子，但由于我遇到了不同的异常情况，所以它们都无法为我工作。

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，我已经尝试了以下方法：
- 使用Navigate方法：
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的源属性：这是来自微软文档的精确示例。

<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()


- 尝试将url字符串直接用作Navigate()参数，就像这个微软示例中所示，但是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？
1
可能是从应用程序数据本地文件夹中的xaml中的WebView加载Html文件的重复问题。 - Jay Zuo
2个回答
10

我有两个不同的东西，对我都很有效：

XAML 版本：

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

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

代码后端版本：

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

与您的版本不同之处在于，您不能仅输入字符串。 您需要创建一个Uri类的新对象。

在两个版本中，html文件是该项目的直接子项，而该项目是一个Windows-10-UWP应用程序 [您没有说明您使用的是Windows 8还是Windows 10]。

7
该解决方案TheTanic提供的适用于随您的软件包一起交付的文件。对于存储在LocalFolder或TemporaryFolder中的文件，您必须遵循特殊的URI方案：

此方案的WebView支持要求您将内容放置在本地或临时文件夹下的子文件夹中。这使得可以导航到统一资源标识符（URI），例如ms-appdata:///local/folder/file.html和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"));

请注意，所有使用的内容也必须在该文件夹中，如下所示：

每个一级子文件夹都与其他一级子文件夹中的内容隔离。

是的，确实是这样。我只是把文件移动到子文件夹中，然后它就可以工作了。非常感谢。 - Dmytro
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接