在 Chrome App Webview 中加载本地文件答案

【问题标题】：Load local file in Chrome App Webview在 Chrome App Webview 中加载本地文件
【发布时间】：2014-06-15 22:52:26
【问题描述】：

在 Chrome 打包应用中，您可以使用它在应用内加载外部页面。有没有办法让他们加载本地文件（打包应用程序中的 html 文件）？我不能使用 iframe，因为 iframe 不支持外部资源（脚本、图像等）。

【问题讨论】：

您找到解决问题的方法了吗？我也一样！

标签： javascript google-chrome webview google-chrome-app

【解决方案1】：

没有要显示的任何代码，但试试这个：假设您可以读取本地文件（必须使用 chrome.fileSystem.chooseEntry 或在文件或其包含目录上保留条目）并获取 FileEntry 对象，然后，您可以创建一个 FileReader 以将文件作为数据 URL 获取。然后，您可以直接在 web 视图中使用该数据 URL。（除了访问 FileEntry 所需的权限外，还必须具有 webview 权限。）

[以上是我吃早餐时的记忆。可能有一些 API 名称略有不同，但我希望您能大致了解。]

【讨论】：

【解决方案2】：

local-resources 示例有一个在 web 视图中加载 html 文件的示例。您需要在 manifest.json 的 webview.partitions 部分中指定文件。

【讨论】：

【解决方案3】：

您可以尝试通过 XMLHttpRequest 将文件作为 Blob 加载，然后创建一个对象 url 将其设置为 webview 的src 属性：

window.onload = function() {
    var wv = document.getElementById("wv");

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'local_file.html', true);
    xhr.responseType = 'blob';
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var blob = new Blob([this.response], {type: 'text/html'});
            wv.src = window.URL.createObjectURL(blob);
        }
    };

    xhr.send();
};

这是一个工作示例：chrome_app_webview_test。

【讨论】：

不用说，如果“local_file.html”请求同目录下的其他资源，他们将无法加载。所以这不是一个理想的解决方案。

【解决方案4】：

不完全确定您在寻找什么，但我已经成功地使用了一个标记，该标记指向一个未打包的 Chrome 应用程序的目录结构中的本地 .html 文件（包括图像和视频资源）。作为它的 URL，我只使用 window.location.origin +'/files/my.html'。我将我的应用程序未打包，以便我可以动态生成 .html 文件。如果内容是静态的，我猜你可以打包应用程序，但我没有尝试过。

【讨论】：

不要破坏你的答案。如果您不希望自己的姓名与此相关联，请使用页面底部的“联系我们”链接删除您的姓名。