随着前端技术的发展与H5的广泛使用，移动端采用native+h5的方式越来越多了，对于Android来说就涉及到java与js的交互，相互调用传参等。下面就来看一下java与js交互的简单demo。
方式
实现js调用java有四种方式：
1.JavascriptInterface
2.WebViewClient.shouldOverrideUrlLoading()
3.WebChromeClient.onConsoleMessage()
4.WebChromeClient.onJsPrompt()
JavascriptInterface
这种方式是Android官方提供的Javascript与Native通信的解决方案。
java中创建接口
public class DemoInteface {
@android.webkit.JavascriptInterface
public void fromJs(String toast) {
Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();
}
}
将接口添加到WebView中
webView = (WebView) findViewById(R.id.wb);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/test.html");
webView.addJavascriptInterface(new DemoInteface(), "demo");
将接口添加到WebView中
<body>
<a href="javascript:;" class="m-btn" onclick="showToast('js的问候送达')">Toast</a>
<script language="javascript">
function showToast(toast) {
javascript:demo.fromJs(toast);
};
</script>
</body>
注意js中的javascript:demo.fromJs(toast); 其中类名（dmeo）要与 webView.addJavascriptInterface(new DemoInteface(), “demo”);中第二个参数一致，方法名要与接口中方法的名称一致
WebViewClient.shouldOverrideUrlLoading()
这个方法是拦截webview中所有的url跳转，根据url来判断是否拦截，来执行不同的操作
java代码
public class CustomWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.contains("toast")) {
Log.e("yue", url);
Toast.makeText(MainActivity.this, "拦截成功了", Toast.LENGTH_SHORT).show();
return true;
}
return super.shouldOverrideUrlLoading(view, url);
}
}
webView.setWebViewClient(new CustomWebViewClient());
js代码
<a href="https://www.baidu.com/?=toast" class="m-btn">Toast2</a>
1
WebChromeClient.onConsoleMessage()
这是Android提供给Javascript调试在Native代码里面打印日志信息的API。
java
public class CustomWebChromeClient extends WebChromeClient {
@Override
public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
super.onConsoleMessage(consoleMessage);
String msg = consoleMessage.message();//Javascript输入的Log内容
Log.d("fromjs",msg);
return true;
}
}
webView.setWebChromeClient(new CustomWebChromeClient());
js代码
<a href="javascript:;" class="m-btn" onclick="log()">log</a>
function log(){
console.log('log info from js');
}
WebChromeClient.onJsPrompt()
除了WebChromeClient.onJsPrompt()，还有WebChromeClient.onJsAlert()和WebChromeClient.onJsConfirm()。顾名思义，这三个Javascript给Native代码的回调接口的作用分别是提示展示提示信息，展示警告信息和展示确认信息。因为极少会用这几种，所以这里就不多做介绍
实现java调用js：
上面说了js调用java有很多方式，常用也是官方推荐的就是前两种，而java调用js就只有一种方式，WebView.loadUrl()，androi 4.4（api 19）以上出现了WebView.evaluateJavascript()来代替loadUrl。
java代码
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (android.os.Build.VERSION.SDK_INT >= 19) {
webView.evaluateJavascript("javascript:wave()", null);
} else {
webView.loadUrl("javascript:wave('')");
}
}
});
js代码
var flag = false;
function wave() {
if(!flag){
flag = true;
document.getElementById("droid").src="testb.png";
}else{
flag = false;
document.getElementById("droid").src="testa.png";
}
}
以上就是一些简单的js与java的交互。要想实现复杂的交互逻辑，可以使用jsBridge这一第三方框架，吓篇博客讲会介绍这一框架的使用及原理。
代码下载： http://download.csdn.net/detail/qq_27942511/9832172
