Android WebView WebChromeClient example tutorial

WebChromeClient is used to handle a JavaScript events in Android App which are produced by WebView. The examples of such events are : 
  • onCloseWindow
  • onProgressChanged
  • onJsAlert
  • onJsConfirm
  • onJsPrompt
  • onJsTimeout
In the following example, I am going to demonstrate handling of JavaScript Alert function on Android.
For more detail about WebView visit my earlier blog post on WebView.

Setting up WebView 

//initialization of webview

webView = (WebView) findViewById(R.id.webView);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

Loading HTML in WebView
//webView.loadUrl("file:///android_res/raw/testhtml.html");
webView.loadUrl("file:///android_asset/testhtml.html");

Setting WebChromeClient to webView
webView.setWebChromeClient(new MyJavaScriptChromeClient());


The MyJavaScriptChromeClient class
Here we have to  override onJsAlert() method to handle JavaScript Alert Function.
private class MyJavaScriptChromeClient extends WebChromeClient {
  @Override
  public boolean onJsAlert(WebView view, String url, String message,final JsResult result) {
//handle Alert event, here we are showing AlertDialog
    new AlertDialog.Builder(MainWebViewActivity.this)
       .setTitle("JavaScript Alert !")
       .setMessage(message)
       .setPositiveButton(android.R.string.ok,
           new AlertDialog.OnClickListener() {
              public void onClick(DialogInterface dialog, int which) {
                     // do your stuff
                     result.confirm();
               }
           }).setCancelable(false).create().show();
   return true;
  }
}


My Html File :
testhtml.html :

<html>

  <body >

    <div onclick="alert('hello')"> Click Me !!  </div>

  </body>

</html>

How it Works ?
When the text "Click Me !!" on the WebView is clicked, The android function onJsAlert(WebView view, String url, String message,final JsResult result) is called. The parameter to alert is copied to message  parameter of onJsAlert function. And rest of the handling is done there.
Here we are displaying a AlertDialog .

Enjoy..... Happy Coding....