共计 4897 个字符，预计需要花费 13 分钟才能阅读完成。
前言
最近做一个简单的应用，使用到了一些 WebView 的相关知识，这里做一些总结。
- 为 WebView 中的输入框赋值
- 读取 WebView 控件中的值
- 执行 WebView 中网页的方法
- 注入一段 js 代码，为一个控件赋值一个点击方法
- 读取 WebView 网页中的表格.
一、为输入框赋值和取值
首先，加载网页的方法
// 加载初始网页
@SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"})
public void loadWebView() {mWebView.loadUrl(INDEX_URL); // INDEX_URL 网页地址
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true); // 允许 js 操作
/*
* 加入内部类，内部类为：InJavaScriptLocalObj
*/
mWebView.addJavascriptInterface(new IndexActivity.InJavaScriptLocalObj(), "java_obj");
// 监听连接
mWebView.setWebViewClient(new WebViewClient() {@RequiresApi(api = Build.VERSION_CODES.KITKAT)
@SuppressLint("SetTextI18n")
@Override
public void onPageFinished(WebView view, String url) {// 加载网页完成后执行}
});
}
// 内部类
// 接受数据的接口
public final class InJavaScriptLocalObj {
@JavascriptInterface
public void showDescription(String str, String tag) {
// str 读取到的数据
// tag 标记得到的数据
}
}案例
获得一个 input 的值
1. 网页的代码
<input autofocus=""onblur="return checkValue(this);"onfocus="return holdOldValue(this);"type="text"id="system_capacity"name="system_capacity"value="4"class="input"title="Allowable Range: 0.05 to 500,000"valtype="num"minval="0.05"maxval="500000"displayname="DC System Size"oldvalue="4">2. 执行方法
由上面得知，input 控件的 id 为 system_capacity
所以这样来得到这个数据<input> <select> 是一样的操作，取值和赋值都一样，<span> 则稍微有不同，主要是全部 js 操作，熟悉 js 操作就可以。
// 获得 system_capacity 值 <input> <select> 标签的值
mWebView.loadUrl("javascript:window.java_obj.showDescription("
+ "document.getElementById('system_capacity').value"
+ ",\'system_capacity\'"+");");
// 获得 maindesc 值 <span> 标签的值
mWebView.loadUrl("javascript:window.java_obj.showDescription("
+ "document.getElementById('maindesc').innerHTML"
+ ",\'maindesc\'"+");");3. 接收这个值
// 内部类
// 接受数据的接口
public final class InJavaScriptLocalObj {
@JavascriptInterface
public void showDescription(String str, String tag) {
// str 读取到的数据
// tag 标记得到的数据
if(str.equals("system_capacity")){Log.v("lanjiabin", "value=" + str + "tag=" + tag);
}
}
}4. 赋值
为一个输入框赋值，那就很简单了
执行方法：
String strJS = String.format("javascript:document.getElementById('system_capacity').value='%s';", city);
mWebView.evaluateJavascript(strJS, null); // null 这里传监听方法system_capacity 是 input 的 id，city 是要传进来的值，就是要赋值给 input 输入框的值
二、执行网页中的方法
// 执行一个控件 id 为 "go" 的 click 方法
String js = String.format("javascript:document.getElementById('go').click();");
// 执行一个原网页中的 "appNav('systeminfo','right')" 方法
String fo = String.format("javascript:appNav('systeminfo','right');");
mWebView.evaluateJavascript(js, null); // null 这里传监听方法三、注入一个 js，为控件增加点击事件
比如这一段网页代码
<input autofocus=""onblur="return checkValue(this);"onfocus="return holdOldValue(this);"type="text"id="system_capacity"name="system_capacity"value="4"class="input"title="Allowable Range: 0.05 to 500,000"valtype="num"minval="0.05"maxval="500000"displayname="DC System Size"oldvalue="4"> onblur="return checkValue(this);" 是 input 输入框失去焦点后执行的方法，以此来执行一个验证数据的方法，我们 android 不应该直接用手操作网页来失去焦点和得到焦点，那应该如何来执行这个方法呢？
刚开始的时候，我的确是这样的做的，也有效，就是通过代码来失去焦点和得到焦点。
看看这个方法：
// 得到焦点
// 1.mWebView 得到焦点
mWebView.requestFocus();
// 2. 网页 input 输入框得到焦点
String js1 = String.format("javascript:document.getElementById('system_capacity').focus();");
// 3. .... 进行为 input 赋值操作
// 4.input 失去焦点
String js2 = String.format("javascript:document.getElementById('system_capacity').blur();");
// 执行
mWebView.evaluateJavascript(js1, null);
mWebView.evaluateJavascript(js2, null);这样就经历了一个得到焦点，失去焦点的过程，方法 onblur="return checkValue(this);" 也顺利执行了，但这这样显得太过突兀了，又要显示网页，又到得到焦点和失去焦点。
我们应该转变思路：
我们应该把这个方法抽出来，添加为 input 的 onclick 方法，然后再执行就可以了。
首先，注入 js 来添加 onclick 方法：
// 把 onblur 中的方法转变为 onclick 方法。注入 js
String j1 = "javascript:document.getElementById('system_capacity').onclick=function(){checkValue(this)};";
// 然后执行这个 onclick 方法，就可以执行了验证数据的方法
String j2 = "javascript:document.getElementById('system_capacity').onclick();";四、WebView 读取网页中的表格数据
其实只要熟悉 js 代码基本可以做到对这个网页的完成操作，思路是这样的：
1. 写一个 js 读取表格的代码函数，也就是一个 js 函数，返回表格的数据
2. 注入这段 js 代码到 WebView
3. 执行这段 js 代码，并获得返回值
js 完整的读取表格的方法：
function getTableContent(){var mytable = document.getElementById("results1");
var data = new String();
for(var i=0,rows=mytable.rows.length; i<rows; i++){for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){data = data+"_"+mytable.rows[i].cells[j].innerHTML;
}
}
return data;
}代码中 results1 为表格的 id，我这里写实了，也可以通过参数的方式来传递表格 id，在 for 循环里面，可以看到，我用 ”_” 来连接每个表格中的数据，也可以换成自己喜欢的符号。
在安卓中的注入并执行
//js 代码
String results1 = "javascript:" + "(function(){var mytable = document.getElementById(\"results1\");\n" +
"\n" +
"var data = new String();\n" +
"\n" +
"for(var i=0,rows=mytable.rows.length; i<rows; i++){\n" +
"\n" +
"for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){\n" +
"\n" +
"data = data+\"_\"+mytable.rows[i].cells[j].innerHTML;\n" +
"\n" +
"}\n" +
"\n" +
"}\n" +
"\n" +
"return data;})()";
// 执行方法，并获得返回值
mWebView.evaluateJavascript(results1, new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
// 这里就可以得到返回的表格数据
// 数据的格式基本就是 value_value_value 一个个连接起来的
// 然后通过字符串截取和正则表达式就可以得到每个数据了
}
}
// 正则表达式截取数据
public String[] regPattern(String reg, String value) {Pattern pattern = Pattern.compile(reg);
Matcher matcher = pattern.matcher(value);
if (matcher.find()) {return matcher.group(1).split("_");
} else {return null;}
}
// 延迟 2 秒执行
new Handler().postDelayed(new Runnable() {public void run() {// 执行方法}
}, 2000);编程中我们会遇到多少挫折？表放弃，沙漠尽头必是绿洲。
正文完