当前的Android开发中,会使用大量的h5(html5+css3+js)
,甚至出现了混合开发模式(Hybrid),使用Hybrid开发,h5页面开发效率高和移植便利性为主。
但在一些地方使用h5开发的确会不太容易实现,这个时候就需要调用Java原生方法来完成,就会遇到JavasSript和Java相互调用,用Java原生方法实现那些Javascript代码不容易实现的功能,比如,异步线程,调用数据库等….. 然后再暴露给JavaScript调用。
JavascriptInterface
在Android 4.2
之前使用addjavascriptinterface
可以把原生的Java方法,给JavaScript调用,但是这种方案却存在安全风险,在页面中执行一些不可信的Javascript代码即有可能控制用户的手机,详情见:WebView中接口隐患与手机挂马利用Android 4.2
之后提供了@JavascriptInterface
对象注解的方式建立Javascript对象和android原生对象的绑定,提供给JavaScript调用的方法必须带有@JavascriptInterface
。
当前4.0及4.0之前的系统市场占有量已经很低了,因此可以考虑使用minSdkVersion
为17,只支持4.2版本以上的手机,低版本的系统不再支持了。
下面就看下Java和Javascript是如何通信的。
加载本地html
为了方便使用,下面使用的示例,不会使用server,所以就需要在webview
中使用本地的html文件,为了方便把html文件都放在assets
文件夹中,使用本地加载的方式,这样就不需要服务器的支持了。
先定义一个html
文件:
<!DOCTYPE html>
<html>
<body>
<h1>this is html</h1>
</body>
</html>
使用file:///android_asset/index.html
加载到webview中:
private void initView() {
webView = (WebView) findViewById(R.id.webView);
webView.loadUrl("file:///android_asset/index.html");
}
下面就可以在index.html
中试用Java和JavaScript的调用了。
Javascript调用Java方法
以Android的Toast
的为例,下面看下如何从Javascript代码中调用系统的Toast
。
先定义一个AndroidToast
的Java类,它有一个show的方法用来显示Toast:
public class AndroidToast {
@JavascriptInterface
public void show(String str) {
Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
}
}
再对WebView进行设置,开启JavaScipt
,注册JavascriptInterface
的方法:
private void initView() {
webView = (WebView) findViewById(R.id.webView);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDefaultTextEncodingName("UTF-8");
webView.addJavascriptInterface(new AndroidToast(), "AndroidToast");
webView.loadUrl("file:///android_asset/index.html");
}
addJavascriptInterface
的作用是把AndroidToast
类映射为Javascript中的AndroidToast
。这样就可以在JavaScript中调用Java中的方法了。
在Javascript中调用Java代码:
function toastClick(){
window.AndroidToast.show('from js');
}
通过window属性
可以找到映射的对象AndroidToast
,直接调用它的show方法即可。
注意这里传输的数据只能是基本数据类型和string
,可以传输string就意味着可以使用json
传输结构化数据。
这里调用的方法并没有返回值,如果需要在JavaScript中需要得到返回值怎么办呢?
JavaScript调用Java有返回值
如果想从Javascript调的方法里面获取到返回值,只需要定义一个带返回值的@JavascriptInterface
方法即可:
public class AndroidMessage {
@JavascriptInterface
public String getMsg() {
return "form java";
}
}
添加Javascript的映射:
webView.addJavascriptInterface(new AndroidMessage(), "AndroidMessage");
在JavaScript直接调用:
function showAlert(){
var str=window.AndroidMessage.getMsg();
console.log(str);
}
这样就完成了有返回值的方法调用。还有一种场景是,在Java中主动触发JavaScript方法,就需要在Java中调用JavaScript方法了。
Java调用JavaScript方法
Java在调用JavaScript方法的时候,需要使用WebView.loadUrl()
方法,它可以直接在页面里执行JavaScript方法。
首先定义一个JavaScript方法给Java调用:
function callFromJava(str){
console.log(str);
}
在Java中直接调用该方法:
public void javaCallJS(){
webView.loadUrl("javascript:callFromJava('call from java')");
}
可以在loadUrl
中给Javascript方法直接传参,如果JavaScript方法有返回值,使用WebView.loadUrl()
是无法获取到返回值的,需要JavaScript返回值给Java的话,可以定义一个Java方法提供给JavaScript调用,然后Java调用JavaScript之后,JavaScript触发该方法把返回值再传递给Java。
注意WebView.loadUrl()
必须在Ui线程
中运行,不然会会报错。