Android WebView and Javascript, how to get it done and pain points

Posted on by

Self Advertisement
—–Start of Advertisement——-
BUILD CAR POOL SOLUTIONS ON ANY DEVICE TO RUN ANYWHERE (www.mcruiseon.com). Introducing mCruiseOn, the java library /json api’s that you can use to build a car pool solution. Be the next avego.com, carpooling.com, zimride.com. mCruiseOn is your one stop API on EC2.
——End of Advertisement——-

So for today I am going to talk about Android and javascript. So most of you know that a WebView is used to show a html file in android. The WebView has some good features but also its side effects from javascript. I’ll first start with steps to get you to integrate your javascript to the android webview. Its actually very simple. You need to enable javascript on your webview first, and then associate a instance of object type JSInterface (which is a interface). So define a class extends JSInterface and write your public methods which you want to call from your javascript.

mWebView = (WebView) findViewById(R.id.searchResultPages);
mWebView.setWebViewClient(new MyWebViewClient());
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setBuiltInZoomControls(true);
mJSInterface = new MJSInterface(mWebView, this);
mWebView.addJavascriptInterface(mJSInterface,
"CallMWebViewJSInterface");

Now define your private class MJSInterface. Create a doEchoTest method.

public class MJSInterface {
	private WebView webView = null ;
	public ReadJSInterface(WebView webview) {
		super();
		webView = webview ;
	}

	public void doEchoTest(String echo) {
		 Toast toast = Toast.makeText(webView.getContext(), echo,
		 Toast.LENGTH_SHORT);
		 toast.show();
	}
}

Now in your html file give the path of your .js file. It should be within the <head> </head>. Else it wont work (atleast it did not work for me).


<script type="text/javascript" src="js/my.js"></script>

Finally in your my.js file use the doEchoTest. Remember the “CallMWebViewJSInterface” from the android java code above ?


window.CallMWebViewJSInterface.doEchoTest("5") ;

Now some learnings that I have had

– JavaScript is very error prone. So if you have a chance do not use it with android. One ” ” (space character) wrongly placed and all hell breaks loose. Debugging is just horrid.

– If you have to use doEchoTest for a way to test if the javascript is being called. The doEchoTest does a toast, so very useful. Debugging is the key here. So you dont loose time in cleaning up your mess.

– webView.loadUrl takes time to load, so if you have something in your onLoad, you need a way for javascript to tell you that its completed the loading. Dont just call multiple loadUrl’s in a for loop and expect all the scripts in your <body onLoad=window.CallMWebViewJSInterface.Somecall> to work.

If you need to get notified when you webview completes loading you need to wait for a onRequestFocus call. 2 steps for this

1. In your android java code in onCreate


mWebView.setWebChromeClient (new MyWebChromeClient()) ;

2. In the same activity, add another  private class

final class MyWebChromeClient extends WebChromeClient {
		public void onRequestFocus(WebView view) {
			synchronized (this) {
			this.notify();
			}
		}
	}

And with this notify you need wait after calling mWebView.loadUrl(“your url here”).

2 thoughts on “Android WebView and Javascript, how to get it done and pain points”

Leave a reply to mcondev Cancel reply