How to call Android function from JavaScript?

Check the Video below to see what we are going to do…

If the web page you plan to load in your WebView use JavaScript, you must enable JavaScript for your WebView. Once JavaScript is enabled, you can also create interfaces between your application code and your JavaScript code.

Enabling JavaScript

JavaScript is disabled in a WebView by default. You can enable it through the WebSettings attached to your WebView. You can retrieve WebSettings with getSettings(), then enable JavaScript with setJavaScriptEnabled().

Here is my sample HTML file which I have copied in the project’s assets folder.

<html>
<script>
    function echoBack()
    {
            var txtVal = document.getElementById("myText").value;
            window.MyJSClient.getStringFromJS(txtVal);
    }
</script>
<body style="padding:10px;">
<br/><br/>
Enter yout text :
<br/><br/><input type="text" name="myText" id="myText" style="padding:10px;">
<br/><br/>
<input type="button" value="Send to Android" onclick="echoBack()" style="padding:10px;">
</body>
</html>

Android Code

JavaScript Interface Class.


    public class MyJavascriptInterface {

        Context context;

        public MyJavascriptInterface(Context context) {
            this.context = context;
        }

        @android.webkit.JavascriptInterface
        public void getStringFromJS(String txtVal) {
            Toast.makeText(context, "Value From JS : " + txtVal, Toast.LENGTH_LONG).show();
        }

    }

Map the JavaScript and Android JS Interface.

We will now map the javascript object to the Android interface class object

 webView.addJavascriptInterface(new MyJavascriptInterface(this), "MyJSClient");

Calling from JavaScript.

Now we have mapped the objects, we will now call the Android function from JavaScript.

    var txtVal = document.getElementById("myText").value;
    window.MyJSClient.getStringFromJS(txtVal);

Complete Android Activity

package demo1.coderzheaven.com.demo1;

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WebView webView = new WebView(this);
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new MyJavascriptInterface(this), "MyJSClient");
        webView.loadUrl("file:///android_asset/test.html");
        setContentView(webView);
    }

    public class MyJavascriptInterface {

        Context context;

        public MyJavascriptInterface(Context context) {
            this.context = context;
        }

        @android.webkit.JavascriptInterface
        public void getStringFromJS(String txtVal) {
            Toast.makeText(context, "Value From JS : " + txtVal, Toast.LENGTH_LONG).show();
        }

    }
}

All Done.
Please Check the video above to see a Demo.
Send your valuable comments to coderzheaven@gmail.com.

How to call Android function from JavaScript?

2 thoughts on “How to call Android function from JavaScript?”

Leave a Reply Cancel reply