A detailed explanation of the problem with WebView using custom JavaScript for callbacks based on Android _android

First of all, why we need to discuss this issue.

Now a lot of mobile applications, may be directly embedded in a Web page. The benefits: one is the function of the update convenient, easy to maintain, only need to maintain the server page, do not need to update the client; the other is versatile, not only Android, but also iOS can be used, Symbian can also be used directly.

So why is it that many mobile apps aren't web-style now? There are many reasons. One is a relatively weak web presentation capabilities, if the application of the aesthetic degree of demand is higher, you can not use the web; one is the web mode is relatively slow, the user experience will be affected; one is the current flow or relatively valuable, Web mode traffic is relatively large Another is that there are some features that can't be implemented using the Web (about this, now many open source projects can realize some of the mobile phone's hardware functions, such as photos, get the Address book Ah, are available, interested can search for phonegap.) But from the current feedback, the speed is slower, the experience is poor.

For the above reasons, many projects now make some of the functionality web-style, and some of the functionality is written with other controls. This requires a Web page to interact with other controls. How to interact is to take advantage of custom JavaScript.

Below is a virtual scene.

Now there is a feature that shows the current user's buddy list, buddy list page is the Web way, click on a friend's avatar, enter the friend's details page, and this page, for some reason, did not make the web way.

Let's say the Buddy list page is userlistactivity and contains a webview. The Buddy Detail page is userdetailactivity and contains many controls and business logic.

We use IDs to uniquely label users. Friends List page, click on each friend Avatar, will call:

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

A JS statement like this. Because this article mainly introduces Android, not web development content, so specifically no longer detailed, familiar with web development students are easy to understand.

What we need to do now is to display the user list page, then after the user clicks the avatar, responds to the specific JS request, jumps to this friend detail page.

Here's a look at the approximate implementation.

JavaScript is not available by default in WebView. You can use the following code:

Copy Code code as follows:

WebView Mywebview = (webview) Findviewbyid (R.id.webview);

WebSettings websettings = Mywebview.getsettings ();

Websettings.setjavascriptenabled (TRUE);

Make JavaScript functionality available. This part of the code is placed in the OnCreate () method in the userlistactivity.

Then register the JS interface. First look at a method of WebView.

public void Addjavascriptinterface (Object obj, String InterfaceName)

SINCE:API Level 1

Use the ' This function ' to ' bind ' object to ' JavaScript so ' methods can be accessed from JavaScript.

IMPORTANT:

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

· The Java object is bound runs into another thread and not in the thread, it was constructed in.

Parameters

Obj	The class instance to bind to JavaScript, NULL instances are ignored.
InterfaceName	The name to used to expose the instance in JavaScript.

We add the following statement to the OnCreate () method of the Userlistactivity class:

Mwebview.addjavascriptinterface (This, "Android");

Add the following methods to the Userlistactivity class:

Public void user (String ID) {

Get ID, jump activity.

}

This allows you to map to the user () method of the Userlistactivity object when the page calls the onclick= "Javascript:android.user (' 1 ')" statement.

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

All code is attached below.

Code for the Android section:

Copy Code code as follows:

Package com.arui.framework.android.js;


Import android.app.Activity;

Import android.content.Intent;

Import Android.os.Bundle;

Import Android.view.View;

Import android.webkit.WebSettings;

Import Android.webkit.WebView;



Import COM.ARUI.FRAMEWORK.R;

Import com.arui.framework.android.js.UserDetailActivity;



public class Userlistactivity extends activity {



Private WebView Mwebview;



@Override

public void OnCreate (Bundle savedinstancestate) {



Super.oncreate (savedinstancestate);



Setcontentview (r.id.userlist);



Mwebview = (webview) Findviewbyid (R.id.mywebview);

WebSettings websetting = Mwebview.getsettings ();

Set JS available

Websetting.setjavascriptenabled (TRUE);

Add JS Call interface

Mwebview.addjavascriptinterface (This, "Android");

Load a specific web address

Mwebview.loadurl ("Http://jb51.net");

Mwebview.setvisibility (view.visible);

Mwebview.requestfocus ();

}



public void User (String id) {

Jump activity

Intent Intent = new Intent (this, userdetailactivity.class);

Intent.putextra ("id", id);

StartActivity (Intent);

}

}

Resource file:

Copy Code code as follows:

<?xml version= "1.0" encoding= "Utf-8"?>

<linearlayout

Xmlns:android= "Http://schemas.android.com/apk/res/android"

android:orientation= "Vertical"

Android:layout_width= "Fill_parent"

android:layout_height= "Fill_parent" >

<webview

Android:id= "@+id/mywebview"

Android:layout_width= "Fill_parent"

android:layout_height= "Fill_parent"

android:visibility= "Gone"/>

</LinearLayout>

Local code for Web pages: