Android webview - JavaScript callback not working?

Question

I am using a WebView to display a web-page on an android application. https://developer.android.com/guide/webapps/webview.html

After clicking a button from the HTML, I can successfully get to the Android class WebAppInterface (From the example) and display a "Toast" alert, but trying to callback to the a javacsript function defined in my web-page is not working.

This is the code of the web-page: (Android.html)

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        if (typeof Android != 'undefined') 
            Android.showToast(toast);       


    }

    function ChangeColor()
    {
        document.body.style.background = 'pink';
    }
</script>

This is the code of the MainActivity of the Android app. It loads the url and displays it.

public class MainActivity extends AppCompatActivity {

    WebView m_Webview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        m_Webview = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = m_Webview.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDomStorageEnabled(true);
        m_Webview.setWebViewClient(new WebViewClient());
        m_Webview.loadUrl("android.html");


        WebView webView = (WebView) findViewById(R.id.webview);
        webView.addJavascriptInterface(new WebAppInterface(this,webView), "Android");
    }
}

This is the WebAppInterface on the Android app:

public class WebAppInterface {

    Context mContext;
    WebView mView;

    /** Instantiate the interface and set the context */
    WebAppInterface(Context c,WebView w) {
        mContext = c;
        mView = w;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        mView.loadUrl("javascript:ChangeColor()");
    }
}

The JavaScript function ChangeColor is not getting called after the toast is getting displayed.

For more reference see: https://stackoverflow.com/a/14145116/7751339

Thanks!

Answer 1

The solution was to use the "post" function like this:

public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
      //  WebView Web = new WebView(mContext);
       // mView.getSettings().setUserAgentString("Android WebView");
        mView.post(new Runnable() {
            public void run() {
                mView.loadUrl("javascript:ChangeColor()");
            }
        });
    }

Also on KitKat and forward you need to use evaluateJavascript:

mView.evaluateJavascript("ChangeColor();",null);