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.

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).