Android webview與js互動

標籤：lis   asc   content   讀取   UI   連結   外掛程式   open   ide   

項目要用到Webview和js互動，查了查以前的項目感覺還是有必要整理下的。
簡單描述下項目中用到的地方，比如說在web頁需要用到登入的地方點擊登入跳轉到APP原生登入介面去登入，點擊web頁的撥打到電話彈出原生dialog詢問是否撥打，點擊web頁裡面的圖片進行放大處理。針對於上述的需求我們通用的方式大概有兩種，一是監聽a標籤，在shouldOverrideUrlLoading根據URL進行判斷，二是js代碼注入，找到我們想要處理的元素進行js代碼注入。下面就這兩種方式簡單的進行描述
首先需要初始化WebView以及設定支援JavaScript，常用的配置屬性有一下幾種，可以在項目中根據需求添加

 WebSettings webSetting = webView.getSettings(); // 支援JavaScript webSetting.setJavaScriptEnabled(true); // 設定可以訪問檔案s webSetting.setAllowFileAccess(true); // 告訴javascript來自動開啟的視窗。這適用於JavaScript函數的視窗，open()。 webSetting.setJavaScriptCanOpenWindowsAutomatically(true); // 支援縮放 webSetting.setSupportZoom(true); // 是否禁止是網路載入資料 webSetting.setBlockNetworkLoads(false); // 設定是否支援多視窗 webSetting.setSupportMultipleWindows(true); // 是否開啟本地DOM儲存 webSetting.setDomStorageEnabled(true); // 設定不緩衝 webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE); // 阻塞載入圖片 webSetting.setBlockNetworkImage(false); // 支援啟用外掛程式 webSetting.setPluginState(WebSettings.PluginState.ON); // 設定任意比較縮放為真 webSetting.setUseWideViewPort(true); // 設定WebView載入頁面的模式 webSetting.setLoadWithOverviewMode(true); // 控制頁面顯示布局 // NARROW_COLUMNS：可能的話使所有列的寬度不超過螢幕寬度 // NORMAL：正常顯示不做任何渲染 // SINGLE_COLUMN：把所有內容放大webview等寬的一列中 webSetting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS); //禁止用地理定位 webSetting.setSaveFormData(true); // 是否啟動地理定位 webSetting.setGeolocationEnabled(true); // 設定定位的資料庫路徑 webSetting.setGeolocationDatabasePath("/data/data/org.itri.html5webview/databases/");

接下來就是WebView互動中非常重要的兩個類WebViewClient和WebChromeClient。WebViewClient就是協助WebView處理各種通知、請求事件的，具體來說包括以下常用方法：

onLoadResource() // 在載入頁面資源時會調用，每一個資源（比片）的載入都會調用一次。    shouldOverrideUrlLoading //在點擊請求的是連結是才會調用，重寫此方法返回true表明點擊網頁裡面的連結還是在當前的webview裡跳轉，不跳到瀏覽器那邊。這個函數我們可以做很多操作，比如我們讀取到某些特殊的URL，於是就可以不開啟地址，取消這個操作，進行預先定義的其他動作，這對一個程式是非常必要的。onPageStart   //這個事件就是開始載入頁面調用的，通常我們可以在這設定一個loading的頁面，告訴使用者程式在等待網路響應。 onPageFinish  //在頁面載入結束時調用。同樣道理，我們知道一個頁面載入完成，於是我們可以關閉loading 條，切換程式動作。 onReceiveError  // (報告錯誤資訊) onReceivedHttpAuthRequest   )//（擷取返回資訊授權請求） 

WebChromeClient是輔助WebView處理Javascript的對話方塊，網站表徵圖，網站title，載入進度等 ，常用方法有以下幾個:

onCloseWindow()   //關閉WebViewonCreateWindow()   onJsAlert //WebView上alert是彈不出來東西的，需要定製你的WebChromeClient處理彈出)  onJsPrompt   onJsConfirm   onProgressChanged  //可以根據載入進度設定進度條onReceivedIcon  //可以擷取URL icononReceivedTitle  //可以擷取URL title

一、監聽a標籤
這種實現方式比較簡單，我們可以在shouldOverrideUrlLoading中根據URL進行判斷，比如說介面中有一個撥打到電話的功能，其js代碼如下

這裡我們可以通過如下方式進行彈出原生dialog

 public boolean shouldOverrideUrlLoading(WebView view, String url) {            if (TextUtils.isEmpty(url))                return true;            if (url.startsWith("tel:")) {                PhoneDialog callDialog = new PhoneDialog(WebViewActivity.this, url);                callDialog.disDialog();                callDialog.callPhone();                callDialog.show();                return true;            }           return true;        }

二、通過js代碼
查了下常用的注入方式有兩種，第一種是當webview載入完之後，讀取整個js檔案中的內容，然後將整個檔案內容以字串的形式，通過webview.loadUrl(“javascript:fileContentString”)注入，不過我好像沒怎麼用到過這個方式，一般都是用第二種，即通過給特定標籤設定事件來滿足業務需求。
比如說我們給所有的圖片設定一個點擊事件來擷取圖片，進行一些列放大儲存等操作，我們可以通過如下代碼來實現。

 // 注入js函數監聽    private void addImageClickListner() {        // 這段js函數的功能就是，遍曆所有的img幾點，並添加onclick函數，函數的功能是在圖片點擊的時候調用本地java介面並傳遞url過去        webView.loadUrl("javascript:(function(){" +                "var objs = document.getElementsByTagName(\"img\"); " +                "for(var i=0;i<objs.length;i++)  " +                "{"                + "    objs[i].onclick=function()  " +                "    {  "                + "        window.imagelistner.openImage(this.src);  " +                "    }  " +                "}" +                "})()");    }// js通訊介面    public class JavascriptInterface {        private Context context;        public JavascriptInterface(Context context) {            this.context = context;        }        @android.webkit.JavascriptInterface        public void openImage(String img) {            Toast.makeText(context,img,Toast.LENGTH_SHORT).show();        }    }//上述兩個方法實現了給圖片添加點擊事件，我們還需要對webview進行設定以及注入 @SuppressLint({"JavascriptInterface", "NewApi"})        @Override        public void onPageFinished(WebView view, String url) {            view.getSettings().setJavaScriptEnabled(true);            super.onPageFinished(view, url);            addImageClickListner();// 頁面載入完成之後，添加監聽圖片的點擊js函數          }//對WebView進行設定webView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");

上述實現方式有以下幾點需要注意：1、注意這裡的方法名imagelistener要和輸入的js代碼裡面的方法一致，2、自訂的方法openImage一定要註明@android.webkit.JavascriptInterface，否則不起作用。
可以看到我們注入的js代碼是通過getElementsByTagName擷取所有的img元素然後設定點擊事件，如果我們相對某一特定的元素進行設定也可以通過getElementById擷取單獨的元素，或者還可以通過getElementsByTagName根據TAG擷取元素。

這是我現階段知道的方式，如果還有其它比較好的實現方式可以一起討論下。

Android webview與js互動