In this post I present methods on how to build interaction between Javascript content in a webpage and the Java code of an Android application. When building an application with web content (build-in or loaded from network) there is always the issue on how it will communicate with the rest of the application. The interaction has to be two-way. The web content probably hosted in a webview has to be able to affect the rest of the application based on user interaction and Android must be able to change the web content. There is not a unified way to build a two-way bridge between the two interfaces, Javascript and Android have to bind with each other using separate processes.
Let’s suppose that you are building an app with one activity named Activity1that hosts a webview which opens the local file HTML1.html (the examples that follow also work when files are somewhere in a network and not local). In Activity1 there are some String variables v1, v2, v3. Corresponding variables with capital letter names are defined in some javascript code enclosed in HTML1.
At first the variables and the webview in Activity1 have to be declared properly and Javascript support has to be enabled.
Code to place in Activity1
String v1, v2, v3;
WebView webView;
//In the onCreate method add
webView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
Variable declaration in a script in HTML1.html
var V1=”Value of v1”;
var V2=”Value of v2”;
var V3=”Value of v3”;
Updating variables in Javascript
I present two techniques for updating the variables in Javascript. In the first the necessary code will be loaded in Javascript before HTML1 will be loaded in webview and this is the main advantage of this technique.
In order to change the Javascript code that runs in webview, I create programmatically a file that contains the code I care to run and then I insert it to HTML1. As a technique may not be so elegant, but it has certain advantages. Another advantage of this technique is that the preservation of the information that regards the variables does not depend on the life circle of Activity1. So, the file may be store while running Activity1 and other activities that will open in the future may read it and update their variables.
In Activity1
At first the path of the file that will be dynamically created has to be defined. A good choice is to place it in the files directory of the application. The directory path can be accessed using the getFilesDir() method. Then it is only necessary to add the code that creates the file.
File jsfile = new File(getFilesDir() + File.separator+"new.js");
public void filecreator(){
v1="new value1";
v2="new value1";
v3="new value1";
BufferedWriter buffer = null;
try{
buffer=new BufferedWriter(new FileWriter(jsfile));
buffer.write("V1="+v1+";");
buffer.newLine();
buffer.write("V2="+v2+";");
buffer.newLine();
buffer.write("V3="+v3+";");
buffer.newLine();
buffer.flush();
buffer.close();
}
catch (IOException ex){
String ioerror=ex.toString();
}
}
Then simply call the method while running Activity1.
In HTML1.html
Insert the newly created file in the body or the head of the html code.
<script src="jsfile.js" type="text/javascript"></script>
If both HTML1.html and jsfile.js are in the same directory then it is not necessary to determine the full path of the file and the code above is enough.
Another more elegant technique is to load the script using method
webView.loadUrl(("javascript: /*some code*/")
In this case you only add the following code in Activity1 and don’t make any changes in HTML1.
webView01.loadUrl("javascript: V1=’new value1’; V2=’new value1’; V3=’new value1’");
The above script will be executed after HTML1 has been fully loaded in webview. You have to be careful on this, as executing the script before loading the html file might lead to undesired behavior.
Updating Android variables from Javascript
Let’s see how running Javascript can affect the variables of Activity1 by modifying the example in Android Developers site (link).
In Activity1
Add a WebAppInterface class. The methods of the class must overidde JavascriptInterface in order to work with the latest versions of Android.
public class WebAppInterface {
Context mContext;
WebAppInterface(Context c) {
mContext = c;
}
@JavascriptInterface
public void updatevariables(String V1, String V2, String V3) {
v1=V1;
public class WebAppInterface {
Context mContext;
WebAppInterface(Context c) {
mContext = c;
}
@JavascriptInterface
public void updatevariables(String V1, String V2, String V3) {
v1=V1;
v2=V2;
v3=V3;
}
v3=V3;
}
}
In this implementation, the method updatevariables is called from Javascript that runs in the webview. The values that should be set in the variables v1, v2 , v3 are passed to the formal parameters of the method (String V1, String V2, String V3) and the code that follows updates the variables in Activity1.
Code to place in HTML1.html
function updatevariables (V1, V2, V3) {
Android. updatevariables (V1, V2, V3);
}
In some part of the script in HTML1.html call the function updatevariables and the values of v1, v2, v3 will be updated.
In this implementation, the method updatevariables is called from Javascript that runs in the webview. The values that should be set in the variables v1, v2 , v3 are passed to the formal parameters of the method (String V1, String V2, String V3) and the code that follows updates the variables in Activity1.
Code to place in HTML1.html
function updatevariables (V1, V2, V3) {
Android. updatevariables (V1, V2, V3);
}
In some part of the script in HTML1.html call the function updatevariables and the values of v1, v2, v3 will be updated.
