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

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

  1. <android:id= "@+id/webView"  
  2. android:layout_width= "fill_parent"  
  3. android:layout_height= "wrap_content"  
  4. />

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

  1. WebView webView = (WebView) findViewById(R.id.webView);
  2. webView.addJavascriptInterface(newJSObject(context), "aikaifa" );
  3. WebSettings webSettings = webView.getSettings();
  4. webSettings.setJavaScriptEnabled( true );//Support js
  5. Handler handler = new Handler();
  6. handler.postDelayed(new Runnable() {
  7. public void run() {
  8. webView.loadUrl( "file:///android_asset/main.html" );
  9. }
  10. }, 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:

  1. public class JSObject {
  2. private Context context;
  3. public JSObject(Context context){
  4. this.context=context;
  5. }
  6. @JavascriptInterface
  7. public void goBack({
  8. Activity activity = (Activity) context;
  9. activity.finish();
  10. }
  11. }

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.

  1. public void getTestJS()
  2. {
  3. Timertimer = new Timer();
  4. final Handler handler = new Handler(){
  5. public void handleMessage(Message msg) {
  6. switch (msg.what) {
  7. case 1:
  8. webView.loadUrl( "javascript:getName()" );
  9. break;
  10. }
  11. super.handleMessage(msg);
  12. }
  13. };
  14. timer.schedule(new TimerTask() {
  15. public void run() {
  16. Message msg = new Message();
  17. msg.what = 1;
  18. handler.sendMessage(msg);
  19. }
  20. }, 500, 500);
  21. }

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

<<:  iOS AFNetworking framework HTTPS request configuration

>>:  Aiti Tribe Story Collection (16): Best Practices for Technical People During Their Fatigue Period

Recommend

Internet celebrity brands seek change and fight back!

As the year 2021 is about to pass, the new consum...

NetEase Tushou PK Yunji Weidian, which social e-commerce is better?

Recently I took over a distribution project, whic...

E-commerce live streaming practical process summary

The market is very good, but you need to be cauti...

How to promote Xiaohongshu notes to become popular?

It is indeed difficult for a new account to becom...

Forward SMS to a specified mobile number by keyword

Source code introduction Often we need to filter ...

Summary and trend analysis of the latest AppStore search algorithm!

According to the observed dates, the new search a...

There is new news about China’s moon landing program!

When will the Chinese achieve their goal of landi...

Is the ground promotion effect poor? You may be missing channel evaluation

Field promotions through multiple channels requir...