Android 与js 交互的方法
2019-02-27 本文已影响0人
androidfan
原生页面虽然有着天然优势，但是在一些复杂页面和混排页面上，却没有网页来的快，所以在实际项目中，很多情况下都是原生页面掺杂着webView 加载js的网页的，这就涉及到两者之间的交互以及传值问题，很久以前就碰到这样的需求了，当时做出来了，今天再次碰到，感觉是时候提出来写一下，方便以后查看。
先来看Android调用js的代码
方法一共是两种
- 使用WebView 的loadUrl（）方法
- 使用WebView的evaluateJavascript（）
loadurl 方法既可以是一个本地地址也可以是一个网址,我们就以本地网页为示例吧
- 首先可以在android 的asset资源文件下存放网页
<html>
<head>
<meta charset="utf-8">
<title>Carson_Ho</title>
// JS代码
<script>
// Android需要调用的方法
function AndroidcallJS(){
alert("Android调用了JS的AndroidcallJS方法");
}
</script>
</head>
</html>
然后在Activity里设置webView的属性
WebSettings webSettings = mWebView.getSettings();
// 设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
// 设置允许JS弹窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
// 格式规定为:file:///android_asset/文件名.html
mWebView.loadUrl("file:///android_asset/javascript.html");
然后在你需要的地方，设置一个监听事件
mClick.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 通过Handler发送消息
mWebView.post(new Runnable() {
@Override
public void run() {
// 注意调用的JS方法名要对应上
// 调用javascript的callJS()方法
mWebView.loadUrl("javascript:AndroidcallJS()");
}
});
}
});
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
AlertDialog.Builder mDialog= new AlertDialog.Builder(MainActivity.this);
mDialog.setTitle("弹窗");
mDialog.setMessage(message);
mDialog.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
mDialog.setCancelable(false);
mDialog.create().show();
return true;
}
})；
}
}
这样就可以了，但是好像这种方法是有一个坑的，就是一定要在webview页面加载完成之后
我们再来看第二种方法 evaluateJavascript（）
这种方法是更加简洁和高效的。以上网页资源文件不变，把loadUrl 换成这个方法调用就可以了
mWebView.evaluateJavascript（"javascript:AndroidcallJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
}
});
}
该方法也是只能在android 4.4以上才能使用
我们再来看一下js 调用Android方法
有3种：
- 通过WebView的addJavascriptInterface（）进行对象映射
- 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
- 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息
这里我着重讲第一种吧，因为第一种用过的比较多一点
首先我们要在自己的Activity里创建一个接口
internal inner class JS {
@JavascriptInterface
fun jsCallOCWithArgument() {
var isLogIn = SPUtils.get(SPConstants.IS_LOGIN, false) as Boolean
if (isLogIn) {
var intent = Intent(this@PackageInfoActivity,
if (is_self == 3) ToShopComsumeActivity::class.java else BuyTicketActivity::class.java)
intent.putExtra("productId", productId)
startActivity(intent)
} else {
startActivity(Intent(this@PackageInfoActivity, LoginActivity::class.java))
}
}
}
在Activity里还是这样调用就好了
// 设置与Js交互的权限
setting.javaScriptEnabled = true
// 设置允许JS弹窗
setting.javaScriptCanOpenWindowsAutomatically = true
setting.defaultTextEncodingName = "utf-8"
setting.cacheMode = WebSettings.LOAD_NO_CACHE//不使用缓存，只从网络获取数据.
webView.loadUrl(webUrl)
webView.addJavascriptInterface(JS(), "android")
webView.webChromeClient = object : WebChromeClient() {
override fun onReceivedTitle(view: WebView, title: String?) {
super.onReceivedTitle(view, title)
if (title != null) {
firstTitle.text = title
}
}
}
}
就先说到这里吧，来任务了，要去码项目了
