Android WebView JavaScript from assets

Question

How can I make JavaScript and images on my remote HTML page be loaded from assets folder (or just any local resource)?

score 45 · Accepted Answer · edited Feb 24 '12 at 14:36

45

Answer:
1. You MUST load the HTML into string:

private String readHtml(String remoteUrl) {
    String out = "";
    BufferedReader in = null;
    try {
        URL url = new URL(remoteUrl);
        in = new BufferedReader(new InputStreamReader(url.openStream()));
        String str;
        while ((str = in.readLine()) != null) {
            out += str;
        }
    } catch (MalformedURLException e) { 
    } catch (IOException e) { 
    } finally {
        if (in != null) {
            try {
                in.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
    return out;
}

2. Load WebView with base URL:

String html = readHtml("http://mydomain.com/my.html");
mWebView.loadDataWithBaseURL("file:///android_asset/", html, "text/html", "utf-8", "");

In this particular case you should have all .js files you want to use on the page to reside somewhere under "assets" folder of project. For example:

/MyProject/assets/jquery.min.js

3. In your remote html page you have to load .js and .css files that reside in your application like:

<script src="file:///android_asset/jquery.min.js" type="text/javascript"></script>

the same applies to all other local resources like images, etc. their path has to start with

file:///android_asset/

A WebView would first load the raw HTML you have provided as string, then pick .js, .css and other local resourses and then would load remote content.

edited Feb 24 '12 at 14:36

Sergey Glotov

20,200
11
84
98

answered Feb 24 '12 at 14:26

tomurka

851
1
7
16

5

Why should you have to provide the absolute path if you set the base path with `loadDataWithBaseURL`? Furthermore, it seems that this breaks in 4.1+. :( – Maarten Oct 20 '13 at 08:21
This seems to work in 4.1+ for me, and is so far the only way I've been able to load HTML with javascript that isn't hardcoded into the assets folder. – Chris Feb 20 '14 at 05:38
If the html is already remote with no possibility to edit the program should identify these files and replace the string from the *String html* – htafoya Jul 10 '14 at 00:07
In this solution if webpage contains images, then no images will be loaded. – Igor K Mar 31 '15 at 10:06
How can we implement this on postURL method – Karacago Jan 21 '16 at 08:09
Still can't load the JavaScript on the WebView using HTML. My `index.html` (which contains the reference to the `index.js` file) is located in the _asset/www/_ folder (same as where the `index.js` file is located). I am trying to convert my `index.html` to string but it doesn't seem like it's working. The return value of the `readHtml` is always `""`. What am I doing wrong ?! – McLan Oct 28 '16 at 15:32
If i put a .js file directly under assets (e.g. assets/index.js) it loads correctly, but if I put a folder e.g. assets/js/index.js then it fails to load, any ideas? – jay shah Sep 06 '17 at 12:59

score 2 · Answer 2 · answered Mar 03 '13 at 18:36

2

If dynamically creating your HTML and then using loadDataWithBaseURL make sure any local resources e.g. javascript in your assets folder are referred to in the HTML as file:/// (I Spent hours working this out)

answered Mar 03 '13 at 18:36

MLP

21
1

can you please tell me in detail how to dynamically add (file://) path to .js after getting html as string. – Adi Aug 13 '14 at 12:18

Android WebView JavaScript from assets

2 Answers2

Linked