Detailed explanation of callback using custom javascript based on WebView in Android

Let's start with why we need to discuss this issue.

Now many mobile applications may directly embed a web page. The advantages of this are: one is that the function update is convenient and easy to maintain. You only need to maintain the server page without updating the client; The other is the general function. Not only Android can be used, IOS can also be used, and Symbian can also be used directly.

So why don't many mobile applications be web-based? There are many reasons. One is that the presentation ability of Web mode is relatively weak at this stage. If the requirements for the beauty of the application are relatively high, web mode cannot be used; One is that the speed of Web mode is relatively slow, and the user experience will be affected; One is that the current traffic is still relatively valuable, and the web traffic is relatively large; Another is that some functions cannot be realized by web (on this point, many open source projects can realize some hardware functions of mobile phones, such as taking photos and obtaining contacts. If you are interested, you can search phonegap. However, from the existing feedback, the speed is slow and the experience is poor).

Based on the above reasons, now many projects will make some functions into web mode, and some functions will be written with other controls. This requires some interaction between the web page and other controls. How to interact is to use custom JavaScript.

Here is a virtual scene.

Now there is a function to display the current user's friend list. The friend list page is web-based. Click a friend's Avatar to enter the friend's details page. For some reasons, this page is not web-based.

Assume that the friends list page is userlistactivity and contains a WebView. The friend details page is userdetailactivity, which contains many controls and business logic.

We uniquely identify users with IDs. On the friends list page, click each friend avatar to call:

onclick="javascript:android.user('1')"

JS statements like this. Because this article mainly introduces Android rather than web development, it will not be detailed. It is easy for students familiar with web development to understand.

What we need to do now is to display the user list page, and then after the user clicks the avatar, respond to the specific JS request and jump to the friend details page.

Let's take a look at the general implementation method.

By default, JavaScript cannot be used in WebView. You can use the following code:

Then register the JS interface. Let's take a look at a method of WebView.

Since: API Level 1

Use this function to bind an object to JavaScript so that the methods can be accessed from JavaScript.

IMPORTANT:

・ Using addJavascriptInterface() allows JavaScript to control your application. This can be a very useful feature or a dangerous security issue. When the HTML in the WebView is untrustworthy (for example,part or all of the HTML is provided by some person or process), then an attacker Could inject HTML that will execute your code and possibly any code of the attacker's choosing. Do not use addJavascriptInterface() unless all of the HTML in this WebView was written by you.

・ The Java object that is bound runs in another thread and not in the thread that it was constructed in.

We add the following statement to the oncreate() method of userlistactivity class:

mWebView.addJavascriptInterface(this,"android");

Add the following methods in userlistactivity class:

public void user(String id) {

//Get ID and jump to activity.

}

In this way, when the page calls the onclick = "javascript: Android. User ('1 ')" statement, it can be mapped to the user () method of the userlistactivity object.

Here, the user method has a parameter that corresponds to the user ('1 ') of the JS statement.

All codes are attached below.

Code of Android part:

Resource file:

Local code of web page:

<img src="……" onclick="javascript:android.user('1')" />