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.网页的代码


2.执行方法

由上面得知,input控件的id为 system_capacity
所以这样来得到这个数据

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


代码中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() {
            @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);

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