Android调用JS方法有2种
- 使用webView的loadUrl()方法
- 使用webView的evaluateJavascript()方法
JS调用Android的方法有3种
- 通过WebView的addJavascriptInterface（）进行对象映射
- 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
- 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息
Android调用JS
- 使用webview.loadUrl()方法
//打开交互权限
webSettings.setJavaScriptEnabled(true);
- 不传参
这是一段js代码,function是一个alert弹框
// 文本名：javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson_Ho</title>
// JS代码
<script>
// Android需要调用的方法
function javaCallJs(){
alert("Android调用了JS的方法");
}
</script>
</head>
</html>
Java中使用webView直接loadUrl()
webView.loadUrl("javascript:javaCallJs()");
- 传参
// 文本名：javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson_Ho</title>
// JS代码
<script>
// Android需要调用的方法
function callJsWithParams(int type,String path){
alert("Android调用了JS的方法");
}
</script>
</head>
</html>
注意: 使用webView调用js代码时,注意js需要的参数拼接格式,双引号后面外层要包一层单引号
javascript:callJsWithParams('" + type + "','" + filePath + "')";
- 使用webview.evaluateJavascript()方法,注意这个方法是4.4以上才支持
// 只需要将第一种方法的loadUrl()换成下面该方法即可
mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
}
});
}
JS调用Android代码
- 使用webView.addJavascriptInterface()方法实现JS调用Android
- 在webView中将JSTest的对象映射到js的Android对象上,这一步必须要这么写,至于后面的"Android",这个是跟JS后台约定好的需要映射的对象名称
//打开交互权限
webSettings.setJavaScriptEnabled(true);
// 在webView中添加如下代码
mWebView.addJavascriptInterface(new webAppInterface(), "Android")
- 在webView中创建这个类,并在方法上使用@JavascriptInterface注解,注意这个回调需要在子线程
public class webAppInterface{
@JavascriptInterface
public void JSTest() {
webView.post(() -> //js调用Android的回调);
}
js代码, 注意:window.Android就是约定好的映射的对象名称,JSTest是js调用的方法名称,这两个不能乱写,否则Android就不能响应JS的事件,这个坑,做项目的时候在这里一度懵逼了很久,果然细节决定成败...
function doJsTest(type) {
console.log(type);
window.Android.JSTest(type);
}
其他几个方法后续更新...
网友评论