Android Bridge — Java2Js

By MT

Chapters: webview, JS2Java , Java2JS, Alert dialog, Popup Screen, local Notification.

How about Java to JavaScript? For the Android API version > 18, Android provide a new way to run JavaScript that is loaded with the html file webView.evaluateJavascript(jsString, null);

However, webView.loadUrl(“javascript:” + jsString) works just fine in all versions.

Lets add a button to the layout and link it with a Android function, which will call a JavaScript function and pass data to it as string parameter.

1- Insert the code before the final curly bracket

public void button1_onclick(View view) {
js_call(webView, “Javascript_function('text',‘this is from the Java end’)”);}
// this is the main function that Java call JS
public void js_call(WebView webView, String jsString) {
final String webUrl = “javascript:” + jsString;
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
webView.evaluateJavascript(jsString, null);
System.out.println(jsString);
} else {
webView.loadUrl(webUrl);
System.out.println(“old way”); } }

Js_call is the way Java call Javascript. It calls webview evaluateJavaString or LoadUrl depending on the build version.

2- Add a JavaScript function to the index.html like this

function set_text(txt){
document.getElementById(“exchange”).innerHTML = txt;
}
//main function to be call
//f_name: the function to do
function Javascript_function(f_name, param) {
switch (f_name) {
case “text”:
if (!param) param = “NULL”;
set_text(param);
break;
case “dialog”:
if (param == “OK”) {set_text(“OK pressed”)}
break;
default:
set_text(“undefined JAVA call”);
break; }
}

It is the JavaScript side to deal with the parameter 1 “f_name”. If it is “text”, then we display the text passed as parameter 2. If it is something else, then we do re-act accordingly.

If you compare with the way IOS Swift works, you would find the switch statement is located in Swift side, while in Andoid bridge, we can put it in JavaScript side. Isnt cool? Andoid Bridge is easy, yes?

You should do your own function, name it whatever you like ie java_listener or so, just keep in mind, the safe way for data transfer between kernel and webview is text parameter.

Run and click your button, you would see the content of the element “exchange” changes to the text passed as parameter.

Note

The core of bridging is the communication or data exchange between webview and the kernel.

From JavaScript, you call our pre-defined “bridge” protocol.

From Java, you call our “js_call”.

Say, if you like to query your current geolocation from JavaScript end -we will do it shortly- , you would send a request via “bridge”, from Java side, you then process the request, and do a “js_call” to send the lat and long location back as text parameter.

Also, have you notice the location of where the js_call function? It is outside of bridge_protocol class, yes?

Look at the bridge_protocol class in previous chapter again:

//3 
public class bridge_protocol {
Context aContext;
// init the listening
bridge_protocol(Context c) {
aContext = c;
}
//Toast Message
// @param toast as String
@JavascriptInterface // this is required
public void showToast(String toast) {
Toast.makeText(aContext, toast, Toast.LENGTH_SHORT).show(); }
//4
}

The “showToast” must be inside the bridge_protocol so that the JavaScript from the webview can call.

The “js_call” must be outside the bridge_protocol so that Java from the app can call.

In short, anything that JavaScript from webview will call, must be defined inside bridge_protocol class.

Source code

Download here https://github.com/myteeNatanwit/android_bridge3

As you can see, I also changed the activity label from Bridge2 to Bridge3 in the Manifest file.