Android Webview and JavaScript interaction, enabling Android and JavaScript to call each other

In the development of Android, a new requirement, which is to let the Java code and JavaScript code to interact, implemented in iOS is very cumbersome, and in Android relatively easy, Android to this kind of interaction is very good encapsulation, We can easily use Java code to call WebView in the JS function, you can also use JS in the WebView to invoke the Java code in the Android app.

The main cases include:

1. Call Android method in HTML
2. Android Call JS method without parameters
3. Android Call JS method has parameters
4. Android Call JS method has parameters and return value processing mode 1
5. Android Call JS method has parameters and return value processing mode 2 (Android4.4 or more)

1: Create JS Object

Webview.addjavascriptinterface (new jsinterface (), "obj");

 public  class   Jsinterface { //           A way to call methods and return value processing in Android in JS  /**  ** * Click event onclick in HTML * <input type= "button" value= "settlement" onclick= "Showtoast ('") "> *   @param   toast  */   @JavascriptInterface  public  void   Showtoast (String toast) {Toast.maketext ( Mainactivity.  this , "Your commodity price is: ￥" +toast, Toast.length_short).    Show (); }}

function Showtoast (toast) {     var money=toast*3;    Javascript:obj.showToast (Money);}

2:

Webview.loadurl ("Javascript:funfromjs ()");

function Funfromjs () {    document.getElementById ("Helloweb"). Innerhtml= "DIV display data, no parameters";}

3:

Webview.loadurl ("Javascript:funjs (' Android-passed information, div tag display, with parameters ')");

function Funjs (msg) {   document.getElementById ("Hello2"). innerhtml=msg;}

4:

Webview.loadurl ("Javascript:sum (6,6)");

/** * * Android code call get J is the return value in *   @param result */    @JavascriptInterface   publicvoid onsum (int  result) {     Toast.maketext (mainactivity. This, "Android calls the JS method and has a return value + calculation result = =" +result, toast.length_short). Show   ();

function sum (i,m) {     var result = i*m;     document.getElementById ("H"). Innerhtml= "Android calls the JS method and has a return value-calculation result =" +result;     

5:

New Valuecallback<string>() {         @Override     publicvoid  Onreceivevalue (String value) {         toast.maketext (mainactivity. This, "return value" +value, Toast.length_short). Show ();           });

function Sumn (i,m) {      var result = i*m;      document.getElementById ("hh"). Innerhtml= "Android calls the JS method and has a return value-calculation result =" +result;       return

Attention:

1, Java call JS inside the function, efficiency is not very high, estimated to 200ms about it, do a very strong interaction, this speed is very difficult to accept, and JS to tune Java method, fast, 50ms around, so try to use JS call Java method

2, Java call JS function, no return value, call to control the

3, Js call Java method, return value if it is a string, you will find that the string is native, turn to the locale for normal use, using the tolocalestring () function can be, but this function is not fast, the conversion of the string if a lot of, It's going to be time-consuming.

4, do not use jquery in the Web page, it takes 5-6 seconds to execute, it is best to use the native JS write business script, to improve loading speed, improve the user experience.

Note: A local HTML file is used, but the HTML file for the Web link is also possible.

SOURCE Click to download

Android Webview and JavaScript interact, enabling Android and JavaScript to call each other