从应用程序数据本地文件夹在UWP中的xaml中的WebView中加载HTML文件 [英] Loading Html file in WebView in xaml in UWP from app data local folder

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

问题描述

我有一个需要从UWP的xaml WebView中的应用程序数据文件夹加载html文件的要求。 HTML文件还引用另一个文件夹( 99 / js /)中的其他Js文件。具有UWP知识的任何人都可以指导我。预先感谢
我正在使用以下代码,浏览器是我的WebView。

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

我在99个文件夹中的文件夹结构为:

udapte

我正在尝试将html文件离线加载到未加载的WebView中

解决方案

要加载 index.html WebView 中的$ c>,您需要确保正确定位 index.html 中使用的所有资源在应用程序的



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

 <网格背景= {ThemeResource ApplicationPageBackgroundThemeBrush}> 
< WebView x:Name =浏览器 />
< / Grid>



 受保护的覆盖无效OnNavigatedTo( NavigationEventArgs e)
{
Browser.Navigate(new Uri( ms-appdata:///local/Downloads/index.html));
}

效果很好:



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



在本地计算机上,数据文件存储在文件夹中


%USERPROFILE%\ AppData\Local\Packages\ {PackageId}


通常是 C: \用户\ {UserName} \AppData\Local\Packages\ {PackageId} ,其中 {UserName} 对应于Windows用户名, {PackageId} 对应于Windows Store应用程序包标识符,您可以将其找到为 包装中的<< c $ c>包装族名称 应用清单文件的trong>标签。 package文件夹中的 LocalState 文件夹是LocalFolder。



对于Mobile Emulator,我们可以使用 IsoStoreSpy Windows Phone电动工具检查LocalFolder。



如果可以加载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 advance I 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:

To load uncompressed and unencrypted content from your app’s LocalFolder or TemporaryFolder data stores, use the Navigate method with a Uri that uses the ms-appdata 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 URIs such as ms-appdata:///local/folder/file.html and ms-appdata:///temp/folder/file.html . (To load compressed or encrypted files, see NavigateToLocalStreamUri.)

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

%USERPROFILE%\AppData\Local\Packages\{PackageId}

which usually is C:\Users\{UserName}\AppData\Local\Packages\{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文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆