Call Java function from JavaScript over Android WebView

Question

I want to make a synchronous call to some Java code in my Android app.

I am using this solution: https://stackoverflow.com/a/3338656

My Java code:

final class MyWebChromeClient extends WebChromeClient {
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            Log.d("LogTag", message);
            result.confirm();
            return true;
        }
    }

My JavaScript code:

<html>
<script>
function java_request(){
    alert('test');
}
</script>
<body>
<h2>Welcome</h2>
<div id="area"></div>
<form>
<input type="button" value="java_call" onclick="java_request()">
</form>
</body>
</html>

When I tap on the java_call button, the button goes to the pressed state. I can see 'test' in the console log. Everything is normal until here.

The problem is, the button never gets back to its normal state. It stays in the pressed state. Maybe the JavaScript execution is broken or something?

Why does the button never return to its normal state?

Pablo C. García · Accepted Answer · 2019-01-09 14:01:41Z

113

I don't think this is the best solution to get the javascript to execute java code. See here:

If you want to expose native code to the HTML to be callable via javascript, do the following around your web view declaration:

JavaScriptInterface jsInterface = new JavaScriptInterface(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInterface, "JSInterface");

Declare the class JavaScriptInterface:

public class JavaScriptInterface {
    private Activity activity;

    public JavaScriptInterface(Activity activity) {
        this.activity = activity;
    }

    @JavascriptInterface
    public void startVideo(String videoAddress){
        Intent intent = new Intent(Intent.ACTION_VIEW);
        intent.setDataAndType(Uri.parse(videoAddress), "video/3gpp"); 
        activity.startActivity(intent);
    }
}

I am declaring a single function for playing a video, but you can do whatever you want.

Finally you call this in the WebView contents via simple javascript call:

<video width="320" height="240" controls="controls" poster='poster.gif'
       onclick="window.JSInterface.startVideo('file:///sdcard/test.3gp');" >
   Your browser does not support the video tag.
</video>

The example is taken from another answer of mine, about playing videos, but should be explaining enough.

EDIT As per @CedricSoubrie's comment: if the target version of the application is set to 17 or higher you need to add annotation @JavascriptInterface above each method you want to export to the web view.

edited Jan 9, 2019 at 14:01

Pablo C. García

22.4k14 gold badges95 silver badges116 bronze badges

answered Apr 30, 2012 at 19:49

Boris Strandjev

47k16 gold badges112 silver badges136 bronze badges

1

thanks for info, I saw this solution. since there is a bug in 2.3.X for this solution, I dont want to use it. workaround was very terrific.
– ozkolonur
Commented May 2, 2012 at 16:22
@ozkolonur I have been using this with all versions of Android 2.2+, never saw any bug. Can you share what it is. A link is also very welcome.
– Boris Strandjev
Commented May 3, 2012 at 6:54
I suppose 'playVideo' and 'startVideo' should be the same?
– Maarten
Commented Dec 19, 2012 at 12:53
2

@Maarten: actually this was not the only error in my answer. I have corrected it now.
– Boris Strandjev
Commented Dec 19, 2012 at 14:28
2

@BorisStrandjev Extremely clear answer ! Note that you must add the "@JavascriptInterface" annotation to any method that you want available from your JavaScript for version 17 or higher. Source : developer.android.com/guide/webapps/webview.html
– CedricSoubrie
Commented Apr 21, 2013 at 3:39

| Show 10 more comments

R. Maynard · Accepted Answer · 2014-06-30 16:12:54Z

1

Your function returns 'true'. That makes the 'onclick' property of your HTML code equal to true, hence the button remains 'clicked.'

answered Jun 30, 2014 at 16:12

R. Maynard

111 bronze badge

Add a comment |

tyolab · Accepted Answer · 2018-03-12 06:11:01Z

The methods defined in the "YourJavaScriptInterface" class, don't forget to annotate each method that you want to expose with "@JavascriptInterface", otherwise the method won't be triggered.

For example, the below code is from the Google Cloud Print JavaScript interface for calls from a webview page:

        final class PrintDialogJavaScriptInterface {
        @JavascriptInterface
        public String toString() { return JS_INTERFACE; }

        @JavascriptInterface
        public String getType() {
            return cloudPrintIntent.getType();
        }

        @JavascriptInterface
        public String getTitle() {
            return cloudPrintIntent.getExtras().getString("title");
        }

        @JavascriptInterface
        public String getContent() {
            try {
                ContentResolver contentResolver = getActivity().getContentResolver();
                InputStream is = contentResolver.openInputStream(cloudPrintIntent.getData());
                ByteArrayOutputStream baos = new ByteArrayOutputStream();

                byte[] buffer = new byte[4096];
                int n = is.read(buffer);
                while (n >= 0) {
                    baos.write(buffer, 0, n);
                    n = is.read(buffer);
                }
                is.close();
                baos.flush();

                return Base64.encodeToString(baos.toByteArray(), Base64.DEFAULT);
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
            return "";
        }

        @JavascriptInterface
        public String getEncoding() {
            return CONTENT_TRANSFER_ENCODING;
        }

        @JavascriptInterface
        public void onPostMessage(String message) {
            if (message.startsWith(CLOSE_POST_MESSAGE_NAME)) {
                finish();
            }
        }
    }

Collectives™ on Stack Overflow

Call Java function from JavaScript over Android WebView

3 Answers 3

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Linked

Related