Calling Java method in Android from JavaScript using webview

Question

I'm trying to access my Java method helloWorld(); using JavaScriptInterface in Android, from the page I'm viewing using WebView

I'm a little new to this, and I don't know why I'm not getting the value to my html page

This is the Android code I'm using:

WebView web;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    web = (WebView) findViewById(R.id.webview01);
    JavaScriptInterface jsInterface = new JavaScriptInterface(this);
    web.getSettings().setJavaScriptEnabled(true);
    web.addJavascriptInterface(jsInterface, "JSInterface");
    web.getSettings().setUseWideViewPort(true);
    web.getSettings().setLoadWithOverviewMode(true);
    web.setWebViewClient(new myWebClient());
    web.getSettings().setJavaScriptEnabled(true);
    web.loadUrl("http://exampleweb:10110/exWeb/deposits.jsp");
}

public class myWebClient extends WebViewClient
{
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        // TODO Auto-generated method stub
        super.onPageStarted(view, url, favicon);
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // TODO Auto-generated method stub

        view.loadUrl(url);
        return true;

    }
}
public class JavaScriptInterface {
    private Activity activity;

    public JavaScriptInterface(Activity activity) {
        this.activity = activity;
    }
    @JavascriptInterface
    public String helloWorld(){
        return("hello world");
    }
}

}

This is the JavaScript code I've been using (on the page I'm viewing with WebView)

HTML button

<td> <button type="button" class="btn btn-xs btn-primary connectToAndroid">Test android</button></td>

JavaScript

$(".connectToAndroid").on('click', function () {
var val = window.JSInterface.helloWorld();
alert(val);
});

Does anyone know what I'm doing wrong here? I just want to alert an "Hello World" from android in my HTML page.

Any pointers are greatly appreciated!

Try putting a log in helloWorld and see if its being called. — Rohit5k2
– Rohit5k2, Commented Jan 29, 2016 at 10:51
why do you call it by WINDOW.JSinterface and not directly by JSInterface ? — r4phG
– r4phG, Commented Jan 29, 2016 at 10:58
@r4phG I don't know why actually, I've been trying to follow some guides on the internet. I'll try without "window". — MattiasH
– MattiasH, Commented Jan 29, 2016 at 11:06
did you load jquery before using it? try to use javascript instead of jquery and try again. — kopikaokao
– kopikaokao, Commented Feb 1, 2016 at 8:31

kopikaokao · Accepted Answer · 2016-02-01 08:36:28Z

1

Try by adding this line of code before loading the url and make sure you reference your jQuery library in the html.

web.setWebChromeClient(new WebChromeClient(this));

answered Feb 1, 2016 at 8:36

kopikaokao

5187 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MattiasH Over a year ago

I will give you an upvote, not because you solved the answer, but this did help me with displaying the " alert ". When I managed to pass the data, the alert didn't work yet, but by adding this line of code, I could alert the data aswell. Thank you :)

kopikaokao Over a year ago

@Coderap Glad that I helped :)

MattiasH · Accepted Answer · 2016-05-09 08:08:16Z

This is very weird, I tried using this a couple of hours ago:

$(".connectToAndroid").on('click', function () {
  var val = Android.helloWorld();
  alert(val);
 });

Then I changed it, it didn't say Android anymore,

yet I kept getting an error saying:

Uncaught ReferenceError: Android is not defined

And after a while I figured, Android.helloWorld(); must be cached somehow in my webview app or something.

So, I changed back to this:

$(".connectToAndroid").on('click', function () {
  var val = Android.helloWorld();
  alert(val);
 });

And added this:

web.addJavascriptInterface(jsInterface, "Android");

And now it works like a charm, as it should have from the beginning if it wasn't for some cache somewhere,

Can anyone explain why this happens? Does android webview actually cache javascript code? And can I prevent this behaviour in the future somehow? Cache bothers a lot when coding/testing new stuff.

Collectives™ on Stack Overflow

Calling Java method in Android from JavaScript using webview

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related