美文网首页
Android WebView使用记录

Android WebView使用记录

作者: 蓝家彬 | 来源:发表于2020-07-02 11:33 被阅读0次

    前言

    最近做一个简单的应用,使用到了一些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<br />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使用记录

          本文链接:https://www.haomeiwen.com/subject/fmwlqktx.html