The Android summary webview with JavaScript interaction (calling each other) _android

Objective:

Recently, the company's app to speed up the development of the efficiency of selected part of the use of H5 development, from the current market for most of the app, roughly divided into native app, Web app, Hybrid app three ways, personally feel that the current Hybrid app mostly, Simple data Display We directly use WebView to render it, but sometimes it may be used to pass the parameters between the two, today to sum up how the two call each other. This article mainly introduces WebView and JavaScript interactive data, on how to H5 Web page presented on the WebView can refer to this blog article: Android summary of the WebView use summary.

WebView interacts with javascript:

WebView and JavaScript interaction is two-way data transfer, 1.H5 Web page of the JS function call the native function 2.Native function call JS function, the specific implementation of the following examples mainly:

1.) Add network permissions in Mainfest.xml

<uses-permission android:name= "Android.permission.INTERNET"/>

2.) WebView Open support JavaScript

3. Simple H5 Web implementation, mainly implemented Actionfromnative (), Actionfromnativewithparam (String str), placed under Assets file

4.) native implementation and JS interactive functions: Actionfromjs (), Actionfromjswithparam ()

public class Mainactivity extends activity {private WebView Mwebview;

 Private TextView Logtextview;
  @Override public void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
  Setcontentview (R.layout.main);
  Mwebview = (webview) Findviewbyid (R.id.webview);
  Enables JavaScript mwebview.getsettings (). Setjavascriptenabled (True);
  Loading HTML Mwebview.loadurl ("file:///android_asset/wx.html") from the assets directory;
  Mwebview.addjavascriptinterface (This, "WX");
  Logtextview = (TextView) Findviewbyid (R.id.text);
  Button button = (button) Findviewbyid (R.id.button); Button.setonclicklistener (New Button.onclicklistener () {public void OnClick (View v) {//no parameter call Mwebview.loadur
    L ("javascript:actionfromnative ()");
   The pass parameter calls Mwebview.loadurl ("Javascript:actionfromnativewithparam" ("+" ' come from Native ' ")");

 }
  }); @android. Webkit.javascriptinterface public void Actionfromjs () {Runonuithread (new Runnable () {@Override Pub LIC voidRun () {Toast.maketext (mainactivity.this, "JS called the native function", Toast.length_short). Show ();
    String text = Logtextview.gettext () + "\njs called native function";
   Logtextview.settext (text);
 }
  }); @android. Webkit.javascriptinterface public void Actionfromjswithparam (final String str) {runonuithread (new runnabl E () {@Override public void run () {Toast.maketext (mainactivity.this, JS) called the native function pass parameter: "+ str, toast.length_s
    Hort). Show ();
    String text = Logtextview.gettext () + "\NJS calls the native function pass parameter:" + str;
   Logtextview.settext (text);

 }
  });

 }
}

Mwebview.addjavascriptinterface (This, "WX"); the equivalent of adding a JS callback interface, and then give this an alias, I am here to name WX (micro-letter haha). @android. Webkit.javascriptinterface in order to solve the addjavascriptinterface loophole, only after 4.2.

5.) Layout File implementation

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
    android:layout_width=" match_parent "
    android:layout_height=" match_parent "
    android:o" rientation= "vertical" >

 <webview
  android:id= "@+id/webview" android:layout_width= "Match_parent"
  "
  android:layout_height=" 0DP "
  android:layout_weight=" 1 "/>

 <textview android:id=" @+id/text "
  android:layout_width= "match_parent"
  android:layout_height= "wrap_content"
  android:text= ""/>

 <button
  android:id= "@+id/button"
  android:layout_width= "match_parent"
  android:layout_ height= "Wrap_content"
  android:text= "native call js function"/>

</LinearLayout>

6.) Simple explanation of the code

(1.) JS (HTML) access to the Android (Java) end code is implemented through the Jsobj object, calling functions in the Jsobj object, such as: Window.jsObj.actionFromJs (), The jsobj here is the alias for adding an interface in native.

(2.) Android (Java) access to the JS (HTML) End code is implemented through the Loadurl function, access format such as: Mwebview.loadurl ("javascript:actionfromnative ()");

Demo Run screenshot:

Summarize:

Here a simple implementation of JS and native interaction, later will take the time to look at the Webviewjavascriptbridge this open source framework.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.