web-dev-qa-db-ja.com

アプリデータローカルフォルダーからUWPのxamlのWebViewにHtmlファイルを読み込んでいます

UWPのxamlWebViewのアプリデータフォルダーからhtmlファイルを読み込む必要があるという要件があります。 Htmlファイルは、別のフォルダー( "99/js /")内の異なるJsファイルも参照しています。 UWPの知識を持っている人なら誰でも私を導きます。事前のおかげで、私は次のコードを使用しています。Browserは私のWebViewです。

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

99フォルダの私のフォルダ構造は次のとおりです。 dapte
同じhtmlファイルをロードしていないWebViewにオフラインでhtmlファイルをロードしようとしています。サーバーのURLでロードしています。

11
arun

オフライン時にWebViewindex.htmlを読み込むには、index.htmlで使用されるすべてのリソースがアプリの LocalFolder に正しく配置されていることを確認する必要があります。そしてこれらのコンテンツはすべてローカルフォルダの下のサブフォルダに配置する必要があります

Ref Remarks in WebView class

アプリの LocalFolder または TemporaryFolder データストアから非圧縮および暗号化されていないコンテンツを読み込むには、 - Navigateri を使用するメソッド ms-appdataスキーム を使用します。 WebViewこのスキームのサポートコンテンツをローカルフォルダーまたは一時フォルダーの下のサブフォルダーに配置する必要があります。これにより、ms-appdata:///などのURIへのナビゲーションが可能になります。 local /folder/file.htmlおよびms-appdata:/// temp /folder/file.html。 (圧縮または暗号化されたファイルをロードするには、 NavigateToLocalStreamUri を参照してください。)

たとえば、jsフォルダーにindex.htmlを使用し、cssフォルダーにindex.jsを使用する単純なindex.cssを作成しました。

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;
}

それらは次のように私のアプリのLocalFolderにあります:
enter image description here

次に、UWPアプリで、次のコードを使用しました。

<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"));
}

これはうまく機能します:
enter image description here
したがって、htmlファイルが読み込まれていない場合は、アプリのLocalFolderをチェックして、htmlファイルとリソースが正しい場所に配置されていることを確認してください。

ローカルマシンでは、データファイルはフォルダに保存されます

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

これは通常C:\ Users\{UserName}\AppData\Local\Packages\{PackageId}、ここで{UserName}はWindowsユーザー名に対応し、{PackageId}はWindowsストアアプリケーションパッケージ識別子に対応します。これはPackage family name in-として見つけることができます。 パッケージアプリのマニフェストファイルのタブ。パッケージフォルダ内のLocalStateフォルダはLocalFolderです。

モバイルエミュレーターの場合、 IsoStoreSpy または Windows Phone Power Tools などのツールを使用してLocalFolderを確認できます。

Htmlファイルをロードできるが、cssスタイルが欠落しているなど、一部のリソースが欠落している場合は、htmlコードをチェックして、参照が正しいことを確認する必要があります。

11
Jay Zuo