前言最近做一個簡單的應用，使用到了一些WebView的相關知識，這裡做一些總結。為WebView中的輸入框賦值讀取WebView控制項中的值執行WebView中網頁的方法註入一段js代碼，為一個控制項賦值一個點擊方法讀取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方法。註入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);

編程中我們會遇到多少挫折？表放棄，沙漠盡頭必是綠洲。

Android WebView使用記錄

前言