Cannot load JavaScript and CSS files from assets into an html in a WebView

Question

My WebView cannot render an html file stored in the assets folder which contains scripts src (and also CSS path), like

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

It's showing a white screen.
Any ideas how to fix that?

I've read other answers, but it seems none of them suits my case.

Here is my code from MainActivity.java

    WebView browser = (WebView) this.findViewById(R.id.webView);
    String html = "file:///android_asset/file.html";

    browser.loadDataWithBaseURL("file:///android_asset/", html, "text/html", "utf-8", "");


    browser.getSettings().setJavaScriptEnabled(true);
    browser.getSettings().setSupportZoom(false); 
    browser.getSettings().setBuiltInZoomControls(true);
    browser.getSettings().setDisplayZoomControls(false);

    try {
            browser.loadUrl(html);

        } catch (Exception e) {
            e.printStackTrace();
        }

Farhad Mammadli · Accepted Answer · 2015-11-25 07:29:53Z

1

If files are in the same location, then html files will automatically determine files locations. So use Relative Paths, but not Absolute.

http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/

answered Nov 25, 2015 at 7:29

Farhad Mammadli

4291 gold badge5 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Phantômaxx · Accepted Answer · 2015-11-24 18:33:09Z

0

Instead of this:

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

simply do like this inside your HTML file:

<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="scripts.js"></script>

Because the HTML file knows nothing about your assets folder.
But it will easily find the files in the same directory.

Skip this line:

browser.loadDataWithBaseURL("file:///android_asset/", html, "text/html", "utf-8", "");

And just use

browser.loadUrl("file:///android_asset/file.html");

edited Nov 24, 2015 at 18:33

answered Nov 24, 2015 at 18:18

Phantômaxx

38.1k21 gold badges88 silver badges122 bronze badges

7 Comments

Stay Strong Over a year ago

it says about file.html that net::ERR_FILE_NOT_FOUND

Phantômaxx Over a year ago

Obviously, you need to use the same file names as yours. Mine work in my case, because I have such files in the assets folder, as long as the html which refers them. Take my code as a generic example, but adapt it to your specific case.

Stay Strong Over a year ago

I also have all files in the asset folder. but it does not work

Phantômaxx Over a year ago

Then in the html you must refer them correctly. href="your.css" and src="your.js" - don't add any path before the file names.

Phantômaxx Over a year ago

I edited my answer - It seems you're not loading the HTML file correctly.

|

Collectives™ on Stack Overflow

Cannot load JavaScript and CSS files from assets into an html in a WebView

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related