Android Webview HTML Loading Javascript Problem

Question

I've been battling this problem for over 48 hours now and I have been unable to find an answer anywhere on the net. Here's the setup:

My Android application is downloading content during first run (content is over 20MB) and the files are unzipped onto the user's SD card at /mnt/sdcard/{my package}/folder. The content includes HTML files, CSS files, JS files and images. Here's the full structure of what is written to the SD card (where / = /mnt/sdcard/{my package}/folder/):

/content/

a.html
b.html
images/
  image1.jpg

/css/

c.css
d.css

/js/

e.js
f.js

Here is my code that loads the html file from the SD card:

    webView = (WebView) findViewById(R.id.pageBrowser);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.addJavascriptInterface(new LinkHandlerInterface(), "Android");
    webView.setWebViewClient(new PageWebViewClient());

    // contentLocation + url is equal to the full path to the html file
    webView.loadUrl("file://" + contentLocation + url);

This code successfully loads the HTML page. No problems yet. Each page has the following head tag:

    <link rel="stylesheet" type="text/css" href="../css/screen.css" media="all" />
    <link rel="stylesheet" type="text/css" href="../css/inPractice.css" media="all" />
    <link rel="stylesheet" type="text/css" href="../css/inPracticeScheme.css" media="all" />
    <link rel="stylesheet" type="text/css" href="../css/mobile/iPad.css" media="all" />
    <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../js/inPractice-utilities.js"></script>
    <script type="text/javascript" src="../js/inPractice.js"></script>
    <script type="text/javascript" src="../js/mobile/inpractice.ipad.js"></script>

Here is where the problem is. My WebView renders the HTML just fine. It even loads and applies the CSS perfectly. However, it refuses to load and execute the Javascript. If you remember from above, the js folder is, in fact, one leve up from the html file, so it's pointing to the correct place.

Here's a list of what I know:

• The CSS I'm using is being applied fine, so I know the issue is not with the file location.

• I used this same code before, but was loading the files from my application's assets folder (file:///android_assets/...) and it worked perfectly. Since the content is so large, I can't bundle it with my application, hence the move to the SD card.

• If I change the HTML files in such a way that all the Javascript methods are listed inside a script tag, it works fine. I don't have control over the HTML, so I can't apply this change permanently. This tells me that the WebView has no problem executing the Javascript.

• Images load fine.

I'm fresh out of ideas now. Does anyone have any clue why my WebView cannot load my Javascript files? Has anyone seen this before?

EDIT: Here are the JS files I'm trying to use can be viewed here:

http://www.automatastudios.com/clients/cco/inpractice/css/inPractice.css http://www.automatastudios.com/clients/cco/inpractice/css/inPracticeScheme.css http://www.automatastudios.com/clients/cco/inpractice/css/screen.css http://www.automatastudios.com/clients/cco/inpractice/css/mobile/iPad.css

• NOTE: These CSS files were not authored by me.

Meath

I wonder if this may ultimately be an issue where Android won't allow JS from the SD card to be executed within a WebView? – Meath

Answer 1

Was never able to find a solution to this.

I ended up just editing the HTML files, such that changed the Javascript source files to inline Javascript. That worked (as I expected it would).

Meath

Answer 2

The preferred way to to load a html which references js, css is to use

webView.loadDataWithBaseURL()

We need to pass the root directory of the location where the html,js,css are found on the file system as the baseURL. Important thing to note here is that we need to use "file" scheme URL only.

In your case code should be

    String html = readFileAsString(
       new FileInputStream("file://" + contentLocation + url) );
webView.loadDataWithBaseURL("file://" + contentLocation,html,"text/html","utf-8",null);


public static StringBuffer streamToString(InputStream stream ){

        StringBuffer fileContent = new StringBuffer("");
        try {

            int size = stream.available();
            byte[] buffer = new byte[size];
            int length;
            while ((length = stream.read(buffer)) != -1) {
                fileContent.append(new String(buffer));
            }
            stream.close();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            try {
                stream.close();
            } catch (IOException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            }
        }

        return fileContent;
    }

Hope the answer helps future visitors

PS: The above code snippet is not compiled

Gothurd