Access UI from JavaScript on Android

Question

For some reasons I have to use WebView in my Android application and part of business logic is contained in JavaScript (I run it using addJavascriptInterface()). The problem is that I can't modify the UI components of my application from object bound to the script. That's explained in the documentation:

Note: The object that is bound to your JavaScript runs in another thread and not in the thread in which it was constructed.

I'm wondering if there is some workaround for this problem?

Answer 1

You need to pass Handler instance to your JavaScript interface and use it to post runnables there. If this handler will be created on UI thread, runnables posted there will also be invoked on the UI thread.

Handler mHandler = new Handler(); // must be created on UI thread, e.g. in Activity onCreate

// from javascript interface...
mHandler.post(new Runnable() {
    @Override
    public void run() {
        // code here will run on UI thread
    }
});

Another workaround is to use Activity's method runOnUIThread

mActivity.runOnUIThread(new Runnable() {
    @Override
    public void run() {
       // code here will run on UI thread
    }
});

Answer 2

Suppose you are inside a fragment and you are doing getActrivity().runOnUIThread(...) in your Javascript interface code. It is possible that by the time the WebViewCoreThread executes the Javascript interface code the fragment is detached from the activity and getActivity() will return null resulting in a NullPointerException being thrown. A safe way to do this is to use a Handler as in the example below. Also, make sure the JavaScript interface uses WeakReferences for ui components incase they need to be be garbage collected before the the Javascript interface is executed.

 myWebView.addJavascriptInterface(new Object() {
        private Handler handler = new Handler();
        private WeakReference<ProgressBar> progressBarRef = new WeakReference<ProgressBar>(
                myWebViewProgressBar);
        private WeakReference<WebView> myWebViewRef = new WeakReference<WebView>(
                myWebView);

        @SuppressWarnings("unused")
        public void onFirstImageLoad() {

            handler.post(new Runnable() {
                @Override
                public void run() {
                    ProgressBar progressBar = progressBarRef.get();
                    WebView webView = myWebViewRef.get();
                    if (progressBar != null) {
                        progressBar.setVisibility(View.GONE);
                    } 
                    if (webView != null) {
                        webView .setVisibility(View.VISIBLE);
                    }
                }
            });
        }
    }, "jsInterface");