通用 Windows 应用程序 (UWP) 未在 Webview 中加载本地 html 文件答案

【问题标题】：Universal Windows App (UWP) Not Loading local html file in Webview通用 Windows 应用程序 (UWP) 未在 Webview 中加载本地 html 文件
【发布时间】：2017-03-15 05:44:21
【问题描述】：

我从服务器下载了一个 html 内容，并将其存储在 Windows 存储文件夹 (Windows.Storage.ApplicationData.Current.LocalFolder.Path) 中。当我使用 window.location.href="ms-appdata:///local/inde.html" 导航到该页面时，没有任何反应。当我使用 webView.navigate("ms-appdata:///local/index.html") 导航时，它会显示页面，但我的任何 javascript 都没有被执行。任何事情都会更有帮助。

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function (id) {
        var plugin = new RuntimeComponent.Class;
        plugin.InitializeApp().then(function (response) {
            try{
                (new Windows.UI.Popups.MessageDialog(response, "Title")).showAsync()
            }catch(e){

            }
        });
       
    }
};
app.initialize();

<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

【问题讨论】：

您应该将您的 html 放在本地文件夹下的子文件夹中。比如ms-appdata:///local/folder/file.html。
@Tao：是的，我的 html 已经在一个文件夹中了。仅供参考，我提到的直接文件。

标签： html windows webview uwp windows-10-universal

【解决方案1】：

当我使用 window.location.href="ms-appdata:///local/inde.html" 导航到该页面时，没有任何反应。

问题是您使用的是UWP Web view，它是 UWP 中的一个封装控件，用于在应用中托管 HTML 内容。尽管它使用 Microsoft Edge 渲染引擎在为 Windows 10 编译的应用程序中显示 HTML 内容，但它有自己的 API，例如此处用于加载内容。不像传统浏览器，不能使用window.location.href重定向浏览器当前的URL位置。

当我使用 webView.navigate("ms-appdata:///local/index.html") 导航时，它会显示页面，但我的任何 javascript 都没有被执行。

当你想在 WebView 中调用 JavaScript 时，你需要调用InvokeScriptAsync method，在我上面链接的官方文档中有这方面的示例。但是如果你的js代码应该自动执行，可能还有很多其他的可能导致它无法执行，请分享你的html，这样我们可以继续处理这个案例。

最后我推荐你阅读这篇博客：Ten Things You Need to Know About WebView。

【讨论】：

"index.html" 调用 win 运行时组件方法来获取一些设置。如果我将该 index.html 作为项目的一部分添加到我的包中，则效果很好。但是，如果我将相同的 index.thml 放在“ms-appdata:///local/index.html”下，我的运行时组件方法不会被调用。我还在 FYR 上方的原始问题中添加了我的 html 和 javascript 代码
@ManojKumar，我们讨论了很多关于您的案例，为什么您的 html 参考 cordova？如果它是一个标准的 UWP 应用程序，那么这里对 cordova 的引用应该不起作用，并且您的 js 代码中的 WinRT api 也不应该在 WebView 控件中起作用。对于标准 UWP，如 @ZORRO 所引用的，“此方案的 WebView 支持要求您将内容放在本地或临时文件夹下的子文件夹中。”。但是我们对我在这里提到的问题感到困惑，可以分享您的样本吗？我们很想知道你是如何让它工作的，谢谢！
@Greg 下面是示例代码的链接。我认为它会向您解释我正在努力实现的目标。基本上我希望“ms-appdata:///local/folder/index.html”访问我的 RunTimeComponent 方法。 dropbox.com/s/4yiac5sqmokmmw5/CordovaSample.zip?dl=0
Webview 拥有一个 Web 上下文，而您的应用程序中的代码拥有一个本地上下文。在网络上下文中。无法访问 RunTimeComponent 方法。如果您尝试加载想要访问本地上下文的远程 html 内容。请创建一个Hosted Web App。

【解决方案2】：

window.location.href 是 JavaScript 中使用的属性。但是ms-appdata 是 UWP 应用中使用的 URI 方案。所以window.location.href 不能与ms-appdata:///local/inde.html 一起使用。要在 WebView 中加载本地 html 文件，我们应该使用 Navigate 方法和使用 ms-appdata scheme 的 Uri 就像你一样已经完成了。但这里我们需要注意的是：

Remarks in WebView class:

要从应用的 LocalFolder 或 TemporaryFolder 数据存储中加载未压缩和未加密的内容，请使用 Navigate 方法和Uri 使用 ms-appdata scheme。 WebView 支持此方案要求您将您的内容放在本地或临时文件夹下的子文件夹中。这可以导航到 URI，例如 ms-appdata:///local/folder/file.html 和 ms-appdata:///temp/folder/file.html .

所以就像@tao 的评论所说，你应该将你的 html 和 js 文件放在本地文件夹下的子文件夹中，然后使用类似的东西导航

webView.navigate("ms-appdata:///local/folder/index.html");

【讨论】：