Android uses the Jsbridge library to achieve html,javascript all interactions with Android

Java and JS Interoperability Framework Webviewjavascriptbridge is the mobile UIView and HTML interactive Communication Bridge, in the words of the author is the realization of Java and JS Mutual call Bridge.

Replaces the WebView's own Javascriptinterface interface, making our development more flexible and secure.

This blog to Jsbridge library near all Android and (HTML+JS) interactive way all realized, code details, comments clear , I hope to help you.

Effects such as:

　　　　　　

Pre-development preparation:(two ways to select, choose one)

Mode 1: Directly into the Jsbridge library package, Androidstudio Guide Library package See blog: Androidstudio How to import library project open Source libraries

Library package Download

Mode 2: Introduce the library and add the following code to the Bulid.gradle

repositories {    "Https://jitpack.io" }}

dependencies {    ' com.github.lzyzsd:jsbridge:1.0.4 '}

1: Default mode (two types (1:defaulthandler default ); 2: custom class implementation)

// show the first type of Bridgewebview.setdefaulthandler (new DefaultHandler ());

// data is returned by JavaScript Private void SetHandler () {        Bridgewebview.setdefaulthandler(new  Bridgehandler () {            @Override             publicvoid  handler (String data, callbackfunction function) {                Toast.maketext ( Mainactivity. This, "DefaultHandler default:" +Data,toast.length_long). Show ();            }        });   

Js

Connectwebviewjavascriptbridge (function(bridge) {            bridge.init( Message, Responsecallback) {                console.log (' JS got a message ', message);                 var data = {                    ' json ': ' JS returns any data! '                 };                Console.log (' JS responding with ', data); /* Printing Information */                  document.getElementById ("Init"). InnerHTML = "data =" + message;                Responsecallback (data);            });

2:html Click events Use the JS function method to tune the Android side and pass value to each other.

function Testclick () {            var str1 = document.getElementById ("Text1"). Value;             var str2 = document.getElementById ("Text2"). Value;            Window. Webviewjavascriptbridge.callhandler (                ' submitfromweb '                , {' data ': ' JSON data passed to Android '}  // This type is any type                function (responsedata) {                    document.getElementById ("Show"). InnerHTML = "Data sent by Java =" +  ResponseData                }            );        }

Android.java

// registering the Submitfromweb method        New Bridgehandler () {            @Override            voidfunction) {                log.i (TAG," To get the data from JS pass = "+ data";                Show (data);                 function. OnCallback ("Pass data to JS");            }        );

3:android Click events to invoke the JS method and pass the value to each other.

@Override     void OnClick (View v) {        //Java js Functionjs method and get return value        new  Callbackfunction () {            @Override            void  oncallback (String data) {                //  TODO auto-generated method stub               Show (data);            }        );    }

Js.js

function (data, responsecallback) {                document.getElementById ("Show"). InnerHTML = ("android Side: =" + data);                 var responsedata = "Javascript data";                Responsecallback (responsedata);//callback Back to Android            });

Send method (contains return value and no return value of two)

No return value:

Bridgewebview.send ("No return value");

 function   Testclick () { var  str1 = document.getElementById ("Text1"  var  str2 = document.getElementById ("Text2"             //  The data from Android is displayed on the Web page, and other data is passed to the Android side , which can be used for initialization and click action  var  data = {id:1, content: "I am the contents oh" }; Window. Webviewjavascriptbridge.send (data,  function  
     
       (responsedata) {document.getElementById (
      "Show"). InnerHTML = "data ="       + responsedata}); }

Other means, such as documents;

Code a little bit more, do not show each, directly download can

SOURCE Click to download

Android uses the Jsbridge library to achieve html,javascript all interactions with Android