javascript - Load local file in Chrome App Webview - Stack Overflow

admin管理员组

文章数量:1391955

In Chrome packaged apps you can use to load external pages inside the app. Is there a way to make them load a local file (an html file inside the packaged app)? I can't use iframe, because iframe wont support external resources (scripts, images, whatever).

In Chrome packaged apps you can use to load external pages inside the app. Is there a way to make them load a local file (an html file inside the packaged app)? I can't use iframe, because iframe wont support external resources (scripts, images, whatever).

• javascript
• google-chrome
• webview
• google-chrome-app

Share Improve this question Follow asked Apr 29, 2014 at 20:01 FabisFabis 2,07233 gold badges2323 silver badges4242 bronze badges 1

• Did you find a solution for your problem? I Face the same! – John Smith Commented Oct 28, 2014 at 11:06

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

Don't have any code to show, but try this: Assuming you can read the local file (must use chrome.fileSystem.chooseEntry or have a retained entry on the file or its containing directory) and get a FileEntry object, you can then create a FileReader to get the file as a data URL. Then you can use that data URL directly in a webview. (Must have webview permission, in addition to the permissions needed to access the FileEntry.)

[Above is from memory while I'm eating breakfast. Might have some API names slightly off, but I hope you get the general idea.]

The local-resources sample has an example of loading an html file in a webview. You need to specify the files in the webview.partitions section of manifest.json.

You may try loading the file as a Blob via an XMLHttpRequest, then creating an object url to set it as webview's src attribute:

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

Here's a working example: chrome_app_webview_test.

Not exactly sure what you are looking for, but I have successfully used a <webview> tag pointing to a local .html file (including image and video resources) within the directory structure of an UNpackaged Chrome App. As its URL I simply use window.location.origin +'/files/my.html'. I leave my App unpackaged so I can dynamically generate the .html files. I guess you can pack the app if the content is static, but I have not tried.

本文标签： javascriptLoad local file in Chrome App WebviewStack Overflow