Android WebView使用记录

前言

最近做一个简单的应用，使用到了一些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方法。注入jsString 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);

编程中我们会遇到多少挫折？表放弃，沙漠尽头必是绿洲。

Android WebView使用记录心怡科技、 俄罗斯灰色清关、 epa认证、 今天520，娶个做跨境电商的女生为妻的20个理由！（下篇）、 Socialbook告诉你为什么你的网红不带货？、 注意：4月1日后开出的每一笔16%、10%发票都要严查！、 珠海免费旅游景点大全、 珠海市拓展公司、 珠海市拓展公司、