在Android开发中,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的javascript进行交互,Android也对交互做了很好的封装,所以很容易实现例如:点击网页中的按钮Android调用原生对话框,点击网页中的电话号码调用Android拨号APP。这篇给大家介绍下如何实现Android与HTML+JS的交互。
有的人可能不理解什么是javascript,可以简单理解为它在HTML中的作用就相当于你在java中写的函数(方法)差不多。
本篇主要实现的功能点:
Android 调用HTML中的javascript脚本 HTML中的javascript脚本调用Android本地代码 Android 调用HTML中的javascript脚本并传递参数 HTML中的javascript脚本调用Android本地代码并传递参数实现Android调用JS脚本是非常简单的,直接Webview调用loadUrl方法,里面是JS的方法名,并可以传入参数,javascript:xxx()方法名需要和JS方法名相同
1
|
<code
class
=
"hljs avrasm"
> contentWebView.loadUrl(
"javascript:javacalljs()"
);</code>
|
HTML代码
<img alt="这里写图片描述" src="http://www.2cto.com/uploadfile/Collfiles/20160317/2016031709153343.png" title="" kf="" ware="" vc="" "="" target="_blank" class="keylink" style="border-width: 0px; padding: 0px; margin: 0px auto; list-style: none; display: block; width: 450px; height: 111px;">vcWxvs2ouf3V4rj2vdO/2sC0tffTw2phdmG0+sLro6wgtdrSu7j2ss7K/crH19S2qNLlwOC21M/zo6zTs8nks8lKU7bUz/OjrNXiwO/O0taxvdO0q3RoaXOjrLXatv649rLOyv3Kx7Hww/ujrEpTvcWxvs2ouf3V4rj2sfDD+8C0tffTw2phdmG1xLe9t6ijrNXiuPax8MP7uPpIVE1MtPrC69bQ0rLKx7bU06a1xKGjPC9lbT48L3A+DQo8cHJlIGNsYXNzPQ=="brush:java;">contentWebView.addJavascriptInterface(MainActivity.this,"android");
HTML代码
先看一下效果图,上面是2个原生Button View 下面是一个WebView
下面是具体的实现步骤:
先建立一个HTML文件,很简单,里面主要有两个按钮,两个JS方法
1
|
|
JAVA调用了JS的无参函数"; } function javacalljswith(arg){ document.getElementById("content").innerHTML = ("
"+arg); } </script>
HTML 内容显示
内容显示
需要把这个HTML文件放到assets文件夹中 注意文件夹位置
添加权限
1
|
<code
class
=
"hljs xml"
><uses-permission android:name=
"android.permission.INTERNET"
></uses-permission></code>
|
布局文件
1
2
3
4
5
6
7
8
9
10
11
|
<code
class
=
"hljs xml"
><!--?xml version=
"1.0"
encoding=
"utf-8"
?-->
<linearlayout android:layout_height=
"match_parent"
android:layout_width=
"match_parent"
android:orientation=
"vertical"
tools:context=
".MainActivity"
xmlns:android=
"http://schemas.android.com/apk/res/android"
xmlns:tools=
"http://schemas.android.com/tools"
>
<textview android:layout_height=
"wrap_content"
android:layout_width=
"wrap_content"
android:text=
"Android"
><button android:background=
"@color/colorAccent"
android:id=
"@+id/button"
android:layout_height=
"wrap_content"
android:layout_margin=
"8dp"
android:layout_width=
"match_parent"
android:text=
"调用JS"
android:textcolor=
"#ffffff"
></button></textview></linearlayout></code><button android:background=
"@color/colorAccent"
android:id=
"@+id/button2"
android:layout_height=
"wrap_content"
android:layout_margin=
"8dp"
android:layout_width=
"match_parent"
android:text=
"调用有参JS"
android:textcolor=
"#ffffff"
><code
class
=
"hljs xml"
>
<textview android:layout_height=
"wrap_content"
android:layout_margintop=
"8dp"
android:layout_width=
"wrap_content"
android:text=
"WebView"
>
<webview android:id=
"@+id/webview"
android:layout_height=
"match_parent"
android:layout_width=
"match_parent"
>
</webview></textview></code></button>
|
Activity 的java类
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<code
class
=
"hljs java"
>
public
class
MainActivity
extends
AppCompatActivity {
private
WebView contentWebView;
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
contentWebView = (WebView) findViewById(R.id.webview);
// 启用javascript
contentWebView.getSettings().setJavaScriptEnabled(
true
);
// 从assets目录下面的加载html
contentWebView.addJavascriptInterface(MainActivity.
this
,
"android"
);
//Button按钮 无参调用HTML js方法
findViewById(R.id.button).setOnClickListener(
new
View.OnClickListener() {
@Override
public
void
onClick(View v) {
// 无参数调用 JS的方法
contentWebView.loadUrl(
"javascript:javacalljs()"
);
}
});
//Button按钮 有参调用HTML js方法
findViewById(R.id.button2).setOnClickListener(
new
View.OnClickListener() {
@Override
public
void
onClick(View v) {
// 传递参数调用JS的方法
}
});
}
//由于安全原因 targetSdkVersion>=17需要加 @JavascriptInterface
//JS调用Android JAVA方法名和HTML中的按钮 onclick后的别名后面的名字对应
@JavascriptInterface
public
void
startFunction(){
runOnUiThread(
new
Runnable() {
@Override
public
void
run() {
Toast.makeText(MainActivity.
this
,
"show"
,
3000
).show();
}
});
}
@JavascriptInterface
public
void
startFunction(
final
String text){
runOnUiThread(
new
Runnable() {
@Override
public
void
run() {
new
AlertDialog.Builder(MainActivity.
this
).setMessage(text).show();
}
});
}
}</code>
|
Ok 这样一个简单的Android与HTML+JS的交互就完成了,有什么问题也可以在下方留言。