Call Android methods from JavaScript

javascript android html webview

48,025

Solution 1

You can do this by adding a JavaScript Interface to your WebView and exposing specific methods to the JavaScript code running in your web view. In other words, you'll need to wrap the calls to Android's Toast class in a method you create in your activity/fragment.

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView android:id="@+id/web_view"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"/>

</RelativeLayout>

MainActivity.java

public class MainActivity extends Activity {

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

        WebView webView = (WebView)findViewById(R.id.web_view);
        webView.loadUrl("file:///android_asset/web.html");

        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new WebViewJavaScriptInterface(this), "app");
    }

    /*
     * JavaScript Interface. Web code can access methods in here 
     * (as long as they have the @JavascriptInterface annotation)
     */
    public class WebViewJavaScriptInterface{

        private Context context;

        /*
         * Need a reference to the context in order to sent a post message
         */
        public WebViewJavaScriptInterface(Context context){
            this.context = context;
        }

        /* 
         * This method can be called from Android. @JavascriptInterface 
         * required after SDK version 17. 
         */
        @JavascriptInterface
        public void makeToast(String message, boolean lengthLong){
            Toast.makeText(context, message, (lengthLong ? Toast.LENGTH_LONG : Toast.LENGTH_SHORT)).show();
        }
    }

}

assets/web.html

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript View</title>

    <script type="text/javascript">

        function showToast(){
            var message = document.getElementById("message").value;
            var lengthLong = document.getElementById("length").checked;

            /* 
                Call the 'makeToast' method in the Java code. 
                'app' is specified in MainActivity.java when 
                adding the JavaScript interface. 
             */
            app.makeToast(message, lengthLong);
            return false;
        }

        /* 
            Call the 'showToast' method when the form gets 
            submitted (by pressing button or return key on keyboard). 
         */
        window.onload = function(){
            var form = document.getElementById("form");
            form.onsubmit = showToast;
        }
    </script>
</head>

<body>

<form id="form">
    Message: <input id="message" name="message" type="text"/><br />
    Long: <input id="length" name="length" type="checkbox" /><br />

    <input type="submit" value="Make Toast" />
</form>

</body>
</html>

A Toast Message

Solution 2

Check out WebView's addJavascriptInterface() method:

http://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface%28java.lang.Object,%20java.lang.String%29

Solution 3

Just because it is more convenient (layout):

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

48,025

Author by

bodruk

Hello, world! I'm a brazilian project manager who loves programming, web, games, technology and useless gadgets.

Updated on November 30, 2020

Comments

bodruk over 3 years

I searched, but I didn't find an answer. I'm developing an Android app based on webview, using HTML5 and JavaScript. Can I call an Android method, like makeToast() from JavaScript?
bodruk about 10 years

Awesome, that is what I need. Thanks!
bodruk almost 9 years

What are you talking about?
Andrei Angurets almost 9 years

I say that it makes no sense to insert WebView in RelativeLayout if WebView stretched on the screen. WebView logical to use as the root element.
Fat Monk over 8 years

@Ian, this looks like exactly what I am looking for but I'm getting an error when I call the method from within my JavaScript as folows: (function(event){appInterface.reloadSite();return false;}). This is called with onClick="appInterface.reloadSite();return false;" on an HTML IMG element, and my JavaScript interface is created with mWebView.addJavascriptInterface(new WebViewJavaScriptInterface(this), "appInterface"); Unfortunately the error in Chrome's debug inspector console is not very helpful.
Ian over 8 years

Sorry, I'm not sure. Perhaps the Java code is missing the @JavascriptInterface annotation??
Fat Monk over 8 years

I've got two methods that I want to call from the JavaScript onClick events and both have @JavascriptInterace right before the definition within the WebViewJavaScriptInterface class. Is there anything special needed in how the methods are called from JavaScript (via callbacks or something) or can I just call directly via the onClick event as I described?
Ian over 8 years

No, you don't need any special callbacks. I think it might be easier if you start off with the example in my answer and then change it to match what you need.
Fat Monk over 8 years

I found my problem... The methods that I was calling did things that need to be run in the UI Thread. It seems that anything run via the JavaScript interface will run in its own thread, so you need to use RunOnUiThread() - as described in stackoverflow.com/questions/5161951/… - to do anything that affects the view etc.
Deepak Borade over 6 years

yeeppie.you did great work for me bro.thaks for a answer
Sagar Nayak about 3 years

any reference on how to do it for ios?
Sameer Shelar over 2 years

Very nicely explained. I have kept this html template to test future such changes. Very good answer.