前言
随着前端技术的发展与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>
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这一第三方框架,吓篇博客讲会介绍这一框架的使用及原理。