Android Webview HTML Downloading Javascript Issues

Question

I struggled with this problem for more than 48 hours, and I could not find the answer anywhere on the net. Here's the setting:

My Android application downloads content during the first launch (content over 20 MB), and the files are unpacked to the user's SD card in the / mnt / sdcard / {my package} / folder. Content includes HTML files, CSS files, JS files, and images. Here is 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 downloads an html file from an 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 an HTML page. There are no problems yet. Each page has the following heading:

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

That is where the problem is. My WebView renders HTML perfectly. It even loads and applies CSS perfectly. However, he refuses to download and execute Javascript. If you remember from above, the js folder is essentially one excerpt from the html file, so it points to the right place.

Here is a list of what I know:

• The CSS I use is applied perfectly, so I know that the problem is not with the file location.

• I used the same code before, but downloaded files from the application resources folder (file: /// android_assets / ...), and it worked fine. Since the content is so large, I can not associate it with my application, therefore, switching to an SD card.

• If I modify the HTML files so that all Javascript methods are listed inside the script tag, it works fine. I have no control over HTML, so I cannot apply this change forever. This tells me that WebView has no problem executing Javascript.

• Images load normally.

Now I'm out of fresh ideas. Does anyone know why my WebView cannot load my Javascript files? Has anyone seen this before?

EDIT: here are the JS files I'm trying to use, you can see it 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 created by me.

Answer 1

I could never find a solution to this.

I ended up just editing HTML files that changed the Javascript source files to embedded Javascript. It worked (as I expected).

Answer 2

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

 webView.loadDataWithBaseURL() 

We need to transfer the root directory of the place where html, js, css are found in the file system as baseURL. It is important to note that we only need to use the URL of the file scheme.

In your case, the 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 will help future visitors.

PS: The above code snippet does not compile