Web交互即 webview与js的交互
Webview调用JS
// 文本名：javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson_Ho</title>
<script>
// Android需要调用的方法
function callJS(){
alert("Android调用了JS的callJS方法");
}
</script>
</head>
</html>
loadUrl()
mWebView.loadUrl("javascript:callJS()");
evaluateJavascript()
mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
}
});
}
JS调用Webview
addJavascriptInterface（）进行对象映射
mWebView.addJavascriptInterface(new AndroidtoJs(WebViewActivity.this), "index");
public class AndroidtoJs extends Object {
// 定义JS需要调用的方法
// 被JS调用的方法必须加入@JavascriptInterface注解
@JavascriptInterface
public boolean register() {
Logger.e("xxx");
return false;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson</title>
<script>
function callAndroid(){
// 由于对象映射，所以调用test对象等于调用Android映射的对象
index.register();
}
</script>
</head>
<body>
//点击按钮则调用callAndroid函数
<button type="button" id="button1" onclick="callAndroid()"></button>
</body>
</html>
通过WebViewClient的shouldOverrideUrlLoading ()拦截 url
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson_Ho</title>
<script>
function callAndroid(){
/*修改url为约定的url协议为：js://webview?arg1=111&arg2=222*/
document.location = "js://webview?arg1=111&arg2=222";
}
</script>
</head>
<!-- 点击按钮则调用callAndroid（）方法 -->
<body>
<button type="button" id="button1" onclick="callAndroid()">点击调用Android代码</button>
</body>
</html>
点击按钮改变url ，webviewclient可以拿到这个url
Uri uri = Uri.parse(url);
if ( uri.getScheme().equals("js")) {
if (uri.getAuthority().equals("webview")) {
HashMap<String, String> params = new HashMap<>();
Set<String> collection = uri.getQueryParameterNames();
//拿到协议中的参数转而执行android里的函数
}
}
通过WebChromeClient 的方法回调拦截JS对话框
onJsAlert()、onJsConfirm()、onJsPrompt（）对应
alert()、confirm()、prompt（） 消息
推荐使用onJsPrompt（）
因为只有prompt（）可以返回任意类型的值
<script>
function clickprompt(){
// 调用prompt（）
var result=prompt("js://demo?arg1=111&arg2=222");
alert("demo " + result);
}
</script>
<body>
<button type="button" id="button1" onclick="clickprompt()">点击调用Android代码</button>
</body>
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
//拿到message（传来的url）解析
}
}
总结
android调用js的两种方法比较
第二种api要求高 但是页面无需刷新 且可以拿js的返回值
js调用android比较
第一种对象映射比较简单灵活 但是会有安全漏洞问题
第二种第三种都是一种拦截url解析方式 使用复杂 但没有漏洞问题
总结
网友评论