Question

(using Samsung Galaxy Tab and Android 3.0, this is intended to work on every 3.0+ tablet, like it does in their browsers, just not webview)

I have a page with CSS and jQuery that loads fine in browsers, android browsers and iOS devices, but android webview refuses to load it consistently.

I’ve narrowed down the problem to it simply skipping javascript on load (by replicating the problem with some webview javascript demo apps). Why is this?

HERE IS THE COMPLETE TEST HTML CODE
http://pastebin.com/GmE2vEYx

and here is how I call it:

  myWebview.loadUrl("file:///android_asset/myPage.html");
  myWebview.getSettings().setJavaScriptEnabled(true);
  myWebview.setWebChromeClient(new WebChromeClient());

The ordering of these three calls doesn’t effect the result.

  myWebview.getSettings().setJavaScriptEnabled(true);
  myWebview.setWebChromeClient(new WebChromeClient());
  myWebview.loadUrl("file:///android_asset/myPage.html");

One thing I’ve noticed is that if you give it time (by pausing the app with a breakpoint in the debugger) then the javascript will more consistently load. This led me to some farfetched experiments of trying to make the app load slower, but this is really not the desired user experience. I’m really hoping that Android webview really aren’t the IE6 of mobile development.

Additional facts:

If you remove the <script> tags that contain all of the Jquery, then the page loads quickly with all of the CSS formatting. As soon as the Jquery is added, nothing loads at all.

I have also found several other questions that encounter the exact same problem, many go unanswered or have no conclusive answer to what the OP was seeking 🙁

see:
Android: can't get javascript to work on WebView even with setJavaScriptEnabled(true)

Page reload (Webview.loadUrl) results in Javascript not being (fully) processed

http://groups.google.com/group/android-developers/browse_thread/thread/9962064ef217a5a7#

JavaScript sometimes doesn't work in android's webview

Android WebView not loading a JavaScript file, but Android Browser loads it fine

Android's Webview cannot handle javascript?

suggestions? lets get to the bottom of this! The android documentation says the webview has limitations but I don’t know where that limit is, since people make HTML CSS JS apps all the time!

Answer 1

The answer is that the javascript needs to be in functions within the HTML page <script>sections and then needs to be injected with
webview.loadUrl("javascript:yourJavascriptFunction()") after webview.setWebviewClient(new WebviewClient(){ public void onPageFinishedLoading(){ ...//js injections here });