从应用程序数据本地文件夹加载 UWP 中 xaml 中的 WebView 中的 Html 文件

本文介绍了从应用程序数据本地文件夹加载 UWP 中 xaml 中的 WebView 中的 Html 文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个要求，我需要从 UWP 中 xaml WebView 中的应用程序数据文件夹加载 html 文件.Html 文件还引用了另一个文件夹(99/js/")中的不同 Js 文件.任何具有 UWP 知识的人都可以指导我.提前致谢我正在使用以下代码，Browser 是我的 WebView.

 var Uri = new Uri("ms-appdata:///Local/Downloads/99/index.html");Browser.Navigate(Uri);

我在 99 文件夹中的文件夹结构是:更新
我正在尝试将 html 文件离线加载到 WebView，它没有加载与服务器 url 加载相同的 html 文件.

解决方案

要在离线时加载 WebView 中的 index.html，您需要确保所有资源index.html 中使用的正确位于应用程序的

然后在我的 UWP 应用中，我使用了以下代码:

<WebView x:Name="浏览器"/></网格>

protected override void OnNavigatedTo(NavigationEventArgs e){Browser.Navigate(new Uri("ms-appdata:///local/Downloads/index.html"));}

效果很好:

因此，如果您的 html 文件未加载，请检查您应用的 LocalFolder 并确保您的 html 文件和资源位于正确的位置.

在本地机器上，数据文件存储在文件夹中

%USERPROFILE%AppDataLocalPackages{PackageId}

通常是 C:Users{UserName}AppDataLocalPackages{PackageId}，其中 {UserName} 对应于 Windows 用户名，{PackageId} 对应于 Windows Store 应用程序包标识符，您可以在 中找到应用清单文件的 Packaging 标签中的包系列名称.包文件夹中的 LocalState 文件夹是 LocalFolder.

对于移动模拟器，我们可以使用一些工具，例如 IsoStoreSpy 或 Windows Phone 电源工具以检查本地文件夹.

如果你可以加载html文件，但是缺少一些资源，比如缺少css样式，你可能需要检查你的html代码并确保引用是正确的.

I have a requirement where I need to load an html file from app data folder in xaml WebView in UWP. Html file is also referencing different Js files in another folder ("99/js/"). Any one with UWP knowledge guide me. Thanks in advanceI am using following code, Browser is my WebView.

  var Uri = new Uri("ms-appdata:///Local/Downloads/99/index.html");
  Browser.Navigate(Uri);

My folder structure in 99 folder is:udapte
I am trying load html file in offline to WebView which is not loading same html file is loading with server url.

解决方案

To load the index.html in WebView while offline, you need to make sure all the resource used in index.html are correctly located in app's LocalFolder. And all these content must be placed in a subfolder under the local folder.

Ref Remarks in WebView class:

For example, I created a simple index.html that use index.js in js folder and index.css in css folder.

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="js/index.js"></script>
    <link href="css/index.css" rel="stylesheet" />
</head>
<body>
    <button id="myBtn">Click Me!</button>
    <div id="myDiv"></div>
</body>
</html>

index.js

window.onload = function () {
    document.getElementById("myBtn").onclick = function () {
        document.getElementById("myDiv").innerHTML += "You have clicked once! <br>";
    }
}

index.css

#myDiv {
    border: 2px dotted black;
    width: 500px;
    height: 500px;
}

They located in my app's LocalFolder like following:

Then in my UWP app, I used following code:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <WebView x:Name="Browser" />
</Grid>

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    Browser.Navigate(new Uri("ms-appdata:///local/Downloads/index.html"));
}

This works well:

So if your html file is not loading, please check your app's LocalFolder and make sure your html file and the resources are located in right place.

On Local Machine, the data files are stored in the folder

which usually is C:Users{UserName}AppDataLocalPackages{PackageId}, where {UserName} corresponds to the Windows user name and {PackageId} corresponds to the Windows Store application package identifier which you can find as Package family name in Packaging tab of your app's manifest file. The LocalState folder inside the package folder is the LocalFolder.

For Mobile Emulator, we can use some tools like IsoStoreSpy or Windows Phone Power Tools to check the LocalFolder.

If you can load the html file, but some resources are missing like missing the css style, you may need to check your html code and make sure the references are right.

这篇关于从应用程序数据本地文件夹加载 UWP 中 xaml 中的 WebView 中的 Html 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！