Question

I have some HTML5/javascript files hosted on a server. When a button is clicked on the HTML5 page a javascript function is invoked. I want to listen for when a function is invoked and get the json that the function returns. Previously I was opening a port on the device but that doesn’t seem to work on Android 3.0. I have heard that you can use external interface to listen to javascript calls but I don’t know how to implement that.

Answer 1

To use external interfaces you need to run your site in WebView. Also the following solution implies, what

1. you know all the function names, which you want to intercept, and…
2. those functions are in the public scope of JS code.

To register your interface you need to call the addJavascriptInterface method on your WebView instance. You need to select a name for it and create an implementation. Your interface should intercept function calls and report their results, so, let’s describe it…

class FunctionCallInterceptor {
    public void reportCall(String functionName, String result) {
      // some code, handling interception
    }
}

and register it…

mWebView.addJavascriptInterface(new FunctionCallInterceptor(), 'Interceptor');

For more information on JavaScript interface see Binding JavaScript

Then you need to “transfer” function results to your interface… Here you need some JavaScript code.

function wrapFunc(name) {
  if(typeof window[name] == 'function') {  // If target is accessible
    var original = window['__' + name] = window[name];  // remember original one
    window[name] = function() {  // and replace with wrapper
        var result = original.apply(this, arguments); // call original                
        Interceptor.reportCall(name, result.toString()); // report to interceptor
        return result;  // return result as usual
    }
  }
}

To wrap your function use this code

wrapFunc('myFunction'); // wraps myFunction in the source

Also, don’t forget to enable JavaScript at all

mWebView.getSettings().setJavaScriptEnabled(true);

When, how to embed this code to your external page (I imply what you are not having access to external JS code)… To execute arbitrary code in the page context you can use loadUrl method of WebView

mWebView.loadUrl('javascript:some... js... code...');

This will not trigger page reload, just JavaScript will be executed. Note what you need to execute this after page is fully loaded. You can obtain this by code below:

mWebView.setWebViewClient(new WebViewClient {
    @Override
    public void onPageFinished (WebView view, String url) {
        // here page is loaded
    }
});

See setWebViewClient and onPageFinished for details

Also note, what code, transferred to page via loadUrl call, must not contain line breaks. So you need to get rid of them (by String.replace or so).

ADD
So, the final solution is:

String wrapFuncCode = "function wrapFunc ...... "; // or maybe place it in resources?
mWebView.addJavascriptInterface(new FunctionCallInterceptor(), 'Interceptor');
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient {
    @Override
    public void onPageFinished (WebView view, String url) {
       // inject wrapper
       // don't forget to remove newline chars
       mWebView.loadUrl("javascript:" + wrapFuncCode.replace('\n', ''));

       // wrap all the functions needed
       String[] funcToWrap = new String[] { 'myFunc1', ... };
       for(String f : funcToWrap) {
           mWebView.loadUrl("javascript:wrapFunc('" + f + "myFunction');");  
       }  
    }
});