在Android开发中不可避免的会出现，使用一个WebView来显示一个h5页面。如果仅仅只是显示h5页面,这不需要特殊的处理，但是很多情况下会出现，js和WebView的交互。比如：将html表单中的数据，传递到Activity中，在Activity中对数据校验，再上传到服务器。
那么js和WebView如何进行的交互的呢？
创建AndroidHtml项目。主要代码如下：
MainActivity.java:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
private
WebView mWebView;
public
static
final
String URL_TEST=
"file:///android_asset/index.html"
;
@SuppressLint
(
"JavascriptInterface"
)
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webView);
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(
true
);
mWebView.loadUrl(URL_TEST);
mWebView.addJavascriptInterface(
this
,
"zzh"
);
}
@JavascriptInterface
public
void
callAndroidNativeMethod(String str){
Log.d(
"MainActivity"
,
"---方法被执行了！！！-"
);
Toast.makeText(
this
,
"---"
+str, Toast.LENGTH_LONG).show();
}
|
注解@JavascriptInterface注解在Android版本4.2之上必须要加上。Google官方的解释是
Caution: If you've set your targetSdkVersion to 17 or higher, you must add the @JavascriptInterface annotation to any method that you want available to your JavaScript (the method must also be public). If you do not provide the annotation, the method is not accessible by your web page when running on Android 4.2 or higher.
index.html:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<
HTML
lang
=
"zh-CN"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
script
type
=
"text/javascript"
language
=
"javascript"
>
function callAndroidNativeMethod(){
window.zzh.callAndroidNativeMethod("js中的数据传递到了Android中了");
}
</
script
>
</
head
>
<
body
>
<
button
onclick
=
"callAndroidNativeMethod()"
>点击调用Java代码</
button
>
</
body
>
</
HTML
>
|
activity_main.xml中的布局是：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
RelativeLayout
xmlns:android
=
"http://schemas.android.com/apk/res/android"
xmlns:tools
=
"http://schemas.android.com/tools"
android:id
=
"@+id/activity_main"
android:layout_width
=
"match_parent"
android:layout_height
=
"match_parent"
tools:context
=
"com.zzh.androidhtml.MainActivity"
>
<
Button
android:id
=
"@+id/button"
android:text
=
"Java调用js方法"
android:layout_width
=
"match_parent"
android:layout_height
=
"wrap_content"
/>
<
WebView
android:id
=
"@+id/webView"
android:layout_below
=
"@+id/button"
android:layout_width
=
"match_parent"
android:layout_height
=
"match_parent"
></
WebView
>
</
RelativeLayout
>
|
好了，上面就是js中如何调用Android Native方法。下面来说说Android Native中怎么调用js方法（要注意Native中调用js方法来处理Android中的业务逻辑的效率差，不建议使用此方式处理Android业务逻辑，但是也要知道如何使用）。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
private
WebView mWebView;
public
static
final
String URL_TEST=
"file:///android_asset/index.html"
;
@SuppressLint
(
"JavascriptInterface"
)
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webView);
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(
true
);
mWebView.loadUrl(URL_TEST);
mWebView.addJavascriptInterface(
this
,
"zzh"
);
findViewById(R.id.button).setOnClickListener(
new
View.OnClickListener() {
@Override
public
void
onClick(View view) {
mWebView.loadUrl(
"javascript:callJavaScriptMethod()"
);
}
});
}
@JavascriptInterface
public
void
callAndroidNativeMethod(String str){
Log.d(
"MainActivity"
,
"---方法被执行了！！！-"
);
Toast.makeText(
this
,
"---"
+str, Toast.LENGTH_LONG).show();
}
|
index.html文件比较简单
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<
HTML
lang
=
"zh-CN"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
script
type
=
"text/javascript"
language
=
"javascript"
>
function callAndroidNativeMethod(){
window.zzh.callAndroidNativeMethod("js中的数据传递到了Android中了");
}
function callJavaScriptMethod(){
document.getElementById("content").innerHTML += "<
br
\>java调用了js函数";
}
</
script
>
</
head
>
<
body
>
<
button
onclick
=
"callAndroidNativeMethod()"
>点击调用Java代码</
button
>
<
div
id
=
"content"
></
div
>
</
body
>
</
HTML
>
|
示例比较简单，注释也写的比较清楚不做过多的讲解，全凭自己领悟。
本文转自 墨宇hz 51CTO博客，原文链接:http://blog.51cto.com/zzhhz/1861256
