守住心底那最美风景，成为一种风度，宁静而致远；守住记忆里最美风景，成为一种境界，悠然而豁达；守住生命中最美风景，成为一种睿智，淡定而从容。
WebView是移动端用来加载网页的控件，而应用要想直接与加载好的网页进行交互，可以通过js也就是JavaScript脚本来完成，所谓交互是指网页可以调用应用内方法（Java方法），应用也可以添加或调用网页相应内容。那么具体该如何实现呢？
要想让WebView支持JavaScript，要添加以下属性：
//设置WebView支持JavaScript
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
首先看看交互的网页tel.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="theme-color" content="#2932e1">
<title>爱书客</title>
<style type="text/css">
#hideElem {
position: absolute;
top: 25%;
left: 50%;
}
#telElem {
position: absolute;
top: 30%;
left: 50%;
cursor: pointer;
text-decoration: none;
}
#mobileElem {
position: absolute;
top: 35%;
left: 50%;
cursor: pointer;
text-decoration: none;
}
</style>
</head>
<body>
<span id="hideElem">隐藏内容</span>
<a id="telElem" href="tel:10086" title="拨号10086">10086</a>
<a id="mobileElem" href="javascript:;" onclick="mobile()">移动端调用</a>
</body>
<script>
// 获取电话号码
function getTel() {
return document.getElementById('telElem').innerHTML;
};
// 移动设备调用
function mobile() {
var tel = document.getElementById('telElem').innerHTML;
// 调用android本地方法
window.jsObj.clickOnAndroid(tel);
};
</script>
</html>
网页部分我写了三个标签，id分别是为hideElem，telElem，mobileElem。通过操作hideElem实现应用向网页添加JavaScript功能，通过操作telElem实现应用调用网页JavaScript功能，通过操作mobileElem实现网页调用应用Java方法。
这里为了演示，将以上网页引入本地文件assets，通过操作本地网页来说明WebView是如何通过JavaScript实现交互。
WebView.loadUrl("file:///android_asset/tel.html");
注意1：本地文件放在assets文件中，assets文件是main的子文件，与res文件同级。
注意2：设置WebView支持加载本地文件。
WebSettings webSettings = webView.getSettings();
// 允许加载Assets和resources文件
webSettings.setAllowFileAccess(true);
这里不再对WebView的基础使用进行介绍，有兴趣可以去看这篇文章【Android】移动端WebView的使用（一）初体验了解更多。
一、应用向网页添加JavaScript
功能要求：当网页加载完成后，应用通过向网页添加JavaScript实现id为hideElem的标签隐藏。
通过实现WebView的WebViewClient属性，可以实现网页加载完成后进行相应的逻辑操作。
webView.setWebViewClient(new WebViewClient() {
// 页面加载结束
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
// 编写javaScript方法-执行修改样式
String javascript = "javascript:function hide() {" +
"document.getElementById('hideElem').style.display='none';" +
"}";
// 网页添加方法
view.loadUrl(javascript);
// 执行方法
view.loadUrl("javascript:hide();");
}
});
其实添加JavaScript只需要三步：
1、编写JavaScript，注意js语法规则即可。
String javascript = "javascript:function hide() {" +
"document.getElementById('hideElem').style.display='none';" +
"}";
2、网页添加JavaScript，通过loadUrl(js)方法进行添加。
view.loadUrl(javascript);
3、执行JavaScript，通过javascript:方法。
view.loadUrl("javascript:hide();");
二、应用调用网页JavaScript
功能要求：调用网页中getTel()方法，实现拨号功能。
分析：网页中getTel()方法，返回要拨打的电话号码，那么只要执行getTel()并获取该方法的返回值，之后跳转到拨号页面即可。
那么该如何获取网页中JavaScript方法的返回值呢？
方式一：在Android SDK4.4以上版本提供evaluateJavascript()方法来获取返回值。
webView.setWebViewClient(new WebViewClient() {
// 页面加载结束
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
// 支持4.4以上的版本
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
view.evaluateJavascript("javascript:getTel()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.d("JsonResult", value);
// 实现拨号功能
}
});
}
}
});
但是该方法只支持4.4以上版本，那个该如何解决低版本的问题呢？
方式二：WebView同时提供onJsAlert方法来监听网页中的alert方法，可以利用这一点来实现。
首先向网页中添加JavaScript脚本方法，让该方法能够实现alert(getTel())。
webView.setWebViewClient(new WebViewClient() {
// 页面加载结束
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
// 编写javaScript方法-执行网页js
String script = "javascript:function addMethod() {" +
"document.getElementById('telElem').setAttribute('href','javascript:;');" +
// "document.getElementById('customerTel').href='javascript:;';" +
"document.getElementById('telElem').onclick = function() {alert(getTel());}" +
"}";
view.loadUrl(script);
view.loadUrl("javascript:addMethod();");
}
});
最后通过监听alert方法来获取电话号码，并实现拨号功能。
webView.setWebChromeClient(new WebChromeClient() {
// 监听网页alert方法
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
result.confirm();
// 执行拨号
Intent intent = new Intent(Intent.ACTION_DIAL, Uri.parse("tel:" + message));
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(intent);
return true;
}
});
三、网页调用应用Java方法
功能要求：网页通过调用应用中的Java方法，将需要拨号的电话号码传递过来，之后由应用实现拨号。
实现网页调用Java方法其实很简单，只需要三步即可。
1、WebView添加addJavascriptInterface。
webView.addJavascriptInterface(new Object() {
@JavascriptInterface
public void clickOnAndroid(String result) {
Toast.makeText(WebViewActivity.this, result, Toast.LENGTH_LONG).show();
// 执行相应的逻辑操作-拨号
}
}, "jsObj");
2、网页中添加JavaScript方法进行调用。
// 移动设备调用
function mobile() {
var tel = document.getElementById('telElem').innerHTML;
// 调用android本地方法
window.jsObj.clickOnAndroid(tel);
};
3、执行JavaScript方法。
<a id="mobileElem" href="javascript:;" onclick="mobile()">移动端调用</a>
注意：
A、WebView添加JavaScriptInterface的时候要设置名称，在本例中为“jsObj”。
B、在JavaScriptInterface调用方法中添加@JavascriptInterface才能生效。
C、网页中是通过window.jsObj.方法，来实现调用的。
通常为了解决WebView与JavaScript混淆问题，需要将JavaScriptInterface封装。以上代码可以修改成：
public class JavaScriptMixUpEvent {
private Context context;
public JavaScriptMixUpEvent(Context context) {
this.context = context;
}
@JavascriptInterface
public void clickOnAndroid(String result) {
Toast.makeText(context, result, Toast.LENGTH_LONG).show();
// 执行相应的逻辑操作
}
}
webView.addJavascriptInterface(new JavaScriptMixUpEvent(this), "jsObj");
微信公众号：伴职创作