Android teaches you how to interact with WebView and JS in five minutes

[[189497]]

Background: Android API provides WebView component to realize HTML rendering. Now HTML5, CSS3, JS related development technology, and data exchange format json/XML. Skills of Web development engineers. In order to reduce excessive dependence on Android, some HTML is usually embedded in native Android.

In this way, js data interaction is inevitable.

We create a simple layout with only one webview control

 <android:id= "@+id/webView"  
 android:layout_width= "fill_parent"  
 android:layout_height= "wrap_content"  
 />

We find this webView and load the local main.html, where main.html is stored in the assets root directory of the project file.

 WebView webView = (WebView) findViewById(R.id.webView);
 webView.addJavascriptInterface(newJSObject(context), "aikaifa" );
 WebSettings webSettings = webView.getSettings();
 webSettings.setJavaScriptEnabled( true );//Support js
 Handler handler = new Handler();
 handler.postDelayed(new Runnable() {
 public void run() {
 webView.loadUrl( "file:///android_asset/main.html" );
 }
 }, 500);

1.js calls Android method

If you are careful, you should notice that there is a JSObject class above. Yes, this is the entry point, so that the front-end js can call the methods written on our Android side. The "aikaifa" can be understood as a mark, which can be changed to whatever you like.

Let's take a look at the JSObject class:

 public class JSObject {
 private Context context;
 public JSObject(Context context){
 this.context=context;
 }
 @JavascriptInterface
 public void goBack({
 Activity activity = (Activity) context;
 activity.finish();
 }
 }

This class defines the goBack method, which can be called by injecting JS.

If you want to call the goBack method in js, you can call it like this: aikaifa.goBack().

In this way, the front end can easily call our Android methods.

2.Android calls JS method

Since js can call our methods, we also call js methods

For example, we want to call the getName method in js.

We can write it like this.

 public void getTestJS()
 {
 Timertimer = new Timer();
   final Handler handler = new Handler(){
 public void handleMessage(Message msg) {
 switch (msg.what) {
 case 1:
         webView.loadUrl( "javascript:getName()" );
 break;
 }
 super.handleMessage(msg);
 }
 };
   timer.schedule(new TimerTask() {
 public void run() {
            Message msg = new Message();
 msg.what = 1;
             handler.sendMessage(msg);
 }
 }, 500, 500);
 }

The getName method is a method in js, and we can call the getTestJS method where needed.

In this way, the interaction between WebView and js is roughly completed.

[This article is an original article by 51CTO columnist "Hong Shengpeng". Please contact the original author for reprinting.]

Click here to read more articles by this author