Android Hybrid app开发之java与js交互

Hybrid app开发

Posted by Mio4kon on 2015-04-16

js调用java代码

android代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
...
{
webView = (WebView) findViewById (R.id.webview);
webView.getSettings ().setJavaScriptEnabled (true);
webView.addJavascriptInterface (new WebAppInterface (this), "Android"); //第二参数在js代码中用到,类似标示
webView.loadUrl ("file:///android_asset/index.html");
}
public static class WebAppInterface{
Activity activity;
WebAppInterface(Activity activity){
this.activity = activity;
}
//提供给js调用的接口
@JavascriptInterface
public void showToast(String toast){
Toast.makeText (activity,toast,Toast.LENGTH_SHORT).show ();
}
}

html代码

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
<html>
<head>
<meta content="text/html;charset=utf-8 " http-equiv="content-type">
<title>js调用java代码</title>
</head>
<body>
<P>
<input type="text" id="username" placeholder="username"/>
</P>
<P>
<input type="button" id="enter" value="调用native方法显示Toast" onclick="showAndroidToast();"/>
</P>
</body>
<script>
function showAndroidToast(){
//获取网页内容的数据
var username = document.getElementById("username").value;
//调用java代码(这里的Android就是之前第二个参数)
Android.showToast("username:"+username);
}
</script>
</html>

成果展示:

java调用js代码

其实很简单:

webView.loadUrl ("javascript:jsfunction()");

但是如何知道这段js调用成功呢?可以再利用js调用java代码通知client调用成功.

js代码

1
2
3
4
5
6
7
8
<script>
function jsfunction(){
//...这里是一段js代码
Android.setResult("调用js方法成功")
}
</script>

java代码

1
2
3
4
5
@JavascriptInterface
public void setResult(String result){
Toast.makeText (activity,"处理的结果是:"+result,Toast.LENGTH_SHORT).show ();
}

成果展示:

总结

以上就是基本的js与java交互的基本方法,如果java调用多个js函数都无法直接获得返回值再利用js调用java改多麻烦啊!而且addJavascriptInterface方法存在安全漏洞.在API<17(4.2)的时候,可以通过addJavascriptInterface方法穿透性的控制android机器,即通过反射来利用java的exec执行shell命令.那么如何才能解决这些问题呢?

Reference