如何在 Chrome 应用程序 web 视图中显示文件系统 URL？答案

【问题标题】：How do you display a filesystem URL in a Chrome app webview?如何在 Chrome 应用程序 web 视图中显示文件系统 URL？
【发布时间】：2015-01-13 22:50:33
【问题描述】：

我有一个 Chrome 打包应用程序，它要求我能够查看已保存的离线网页。这些页面在用户在线时从我的服务器下载并保存到 HTML5 文件系统，以便可以离线查看。这个 Chrome bug 票似乎表明我想做的事情是可能的：https://code.google.com/p/chromium/issues/detail?id=343382

基于 Chrome 应用程序“webview”文档 (https://developer.chrome.com/apps/tags/webview)，这是我想出的。

在我的清单中：

"permissions": [
    {
        "fileSystem": ["write"]
    },
    "storage",
    "unlimitedStorage",
    "webview"
],
"webview": {
    "partitions": [
        {
            "name":"contentView",
            "accessible_resources":["*.html"]
        }
    ]
}

我的网页浏览标签：

<webview id="websiteWebview" minwidth="800" minheight="600" autosize="on" partition="contentView"></webview>

然后我通过javascript添加'src'属性：

var websiteWebview = document.querySelector('#websiteWebview');
websiteWebview.setAttribute('src', decodeURIComponent(srcUrl));

这会在控制台中产生以下结果：

filesystem:chrome-extension://[appId]/[pathToFile]/index.html
Failed to load resource: net::ERR_FILE_NOT_FOUND
Not allowed to load local resource: filesystem:chrome-extension://[appId]/[pathToFile]/index.html

我不知道从这里去哪里。提前感谢您的帮助！

【问题讨论】：

您确定该文件存在于您期望的位置吗？
是的。 ERR_FILE_NOT_FOUND 错误是 webview 阻止我的本地文件的症状。 code.google.com/p/chromium/issues/detail?id=321638

标签： webview google-chrome-app

【解决方案1】：

看起来webview 标记不支持文件系统 URI - Chromium Issue 321628。无赖。

您可以尝试使用FileReader 将文件读取到数据URL，然后将webview 的src 属性设置为该URL。

我通过使用我在 NaCl 中创建的一个简单的 Web 服务器来解决这个问题，我已经嵌入到我的应用程序中（数据 URL 搞乱了我的文件编码）。

【讨论】：

您好，您说您解决了这个问题“通过使用我在 NaCl 中创建的一个简单的 Web 服务器，我已经嵌入到我的应用程序中”。您能否详细说明这一点或为此主题提供教程或类似的东西？谢谢！
我推荐使用数据 URL 方法，如果你可以让它工作，涉及的工作更少，而且你不必知道 C/C++ - 我只是因为一些问题而遇到了麻烦疯狂的文件编码。我使用了TCPSocket class。如果您不熟悉 NaCl - NaCl basics
您好，感谢您的回答。所以没有其他方法可以打开（在 web 视图中显示）我在 WebApp 中下载的本地文件，嗯？
不行，Chrome 目前不支持。

【解决方案2】：

您可以通过在您的应用程序中包含web server for chorme 库来解决此问题。网站上有关于如何将其包含在您自己的 chrome 应用程序中的示例。这将要求您在清单中使用额外的权限，即一些 chrome.sockets 权限。

【讨论】：