Android 與WebView中的js程式碼的互動記錄

  最近公司的專案用到原生和WebView的HTML中程式碼進行互動，遇到到不少問題，在這裡記錄一下，以後再用的時候方便。

- 首先說一下WebSettings的配置，它是用來管理WebView配置的類

WebSettings webSettings = webView.getSettings();//通過webView獲取WebSettings 
/*WebSettings常用方法*/
webSettings.setUseWideViewPort(true);// 設定此屬性，可任意比例縮放
webSettings.setSupportZoom(true);//設定是否支援縮放
webSettings.setBuiltInZoomControls(true);//顯示或不顯示縮放按鈕（wap網頁不支援）
webSettings.setJavaScriptEnabled(true);  //支援js
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);  /*設定 快取模式LOAD_DEFAULT：預設的快取使用模式。在進行頁面前進或後退的操作時，如果快取可用並未過期就優先載入快取，否則從網路上載入資料。這樣可以減少頁面的網路請求次數。
LOAD_CACHE_ELSE_NETWORK：只要快取可用就載入快取，哪怕它們已經過期失效。如果快取不可用就從網路上載入資料。
LOAD_NO_CACHE：不載入快取，只從網路載入資料。
LOAD_CACHE_ONLY：不從網路載入資料，只從快取載入資料*/
webSettings.setAppCacheEnabled(true);//啟用或禁用應用快取
webSettings.setAppCachePath(String appCachePath);//設定應用快取路徑，這個路徑必須是可以讓app寫入檔案的。該方法應該只被呼叫一次
webSettings.setBlockNetworkImage(true);//關閉載入網路圖片，在一開始載入的時候可以設定為true，當載入完網頁的時候再設定為false

• WebView的WebChromeClient中常用的方法的說明

webView.setWebChromeClient(new WebChromeClient(){

            //當頁面載入的進度發生改變時回撥，用來告知主程式當前頁面的載入進度。
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                // TODO Auto-generated method stub
                super.onProgressChanged(view, newProgress);
            }
            //用來接收web頁面的icon
            @Override
            public void onReceivedIcon(WebView view, Bitmap icon) {
                // TODO Auto-generated method stub
                super.onReceivedIcon(view, icon);
            }
            //用來接收web頁面的title
            @Override
            public void onReceivedTitle(WebView view, String title) {
                // TODO Auto-generated method stub
                super.onReceivedTitle(view, title);
            }
            //處理Javascript中的Alert對話方塊,返回為true，就是攔截html頁面不彈出 Alert，
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                // TODO Auto-generated method stub
                return super.onJsAlert(view, url, message, result);
            }
            //處理Javascript中的Prompt對話方塊
            @Override
            public boolean onJsPrompt(WebView view, String url, String message, String defaultValue,
                    JsPromptResult result) {
                // TODO Auto-generated method stub
                return super.onJsPrompt(view, url, message, defaultValue, result);
            }
            //處理Javascript中的Confirm對話方塊
            @Override
            public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
                // TODO Auto-generated method stub
                return super.onJsConfirm(view, url, message, result);
            }
        });

• WebView的WebViewClient中常用的方法的說明

webView.setWebViewClient(new WebViewClient(){

            //WebView載入資源呼叫，返回為true的話就在本app裡面呼叫，false就在外部瀏覽器中開啟。
            //這個方法還可以攔截到開啟的連結的地址，可以在此跟原生的做一些互動
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                // TODO Auto-generated method stub
                return true;
            }

            //該方法只在WebView完成一個頁面載入時呼叫一次
            @Override
            public void onPageFinished(WebView view, String url) {
                // TODO Auto-generated method stub
                super.onPageFinished(view, url);
            }
            //頁面發生錯誤時候呼叫，這些錯誤通常都是由無法與伺服器正常連線引起的，最常見的就是網路問題
            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                // TODO Auto-generated method stub
                super.onReceivedError(view, request, error);
            }

        });

• 在Activity中呼叫html的js方法

String data = "\"我是app\""
webView.loadUrl("javascript:queryRecomend(" + data  + ")");

呼叫js方法要特別注意一下,如果傳遞的是字串，就用引號把字串包裹起來，要不然資料就傳遞不成功。。。。

• 在html中js呼叫Activity的方法

android中的程式碼：
  /**
     * 注意第二個引數JsTest，這個是JS網頁呼叫Android方法的一個類似ID的東西  
     */
        mWebView.addJavascriptInterface(new JavaScriptinterface (this), "android");  
        public class JavaScriptinterface {
    Context context;
    public JavaScriptinterface(Context c) {
        context= c;
    }

    /**
     * 與js互動時用到的方法，在js裡直接呼叫的
     */
    @JavascriptInterface
    public void showToast(String ssss) {

        Toast.makeText(mContext, ssss, Toast.LENGTH_LONG).show();
    }
}


/**
*JS程式碼：注意這裡android.JsCallAndroid中的android和activity中的*addJavascriptInterface中的android名字要一樣
*/
<script type="text/javascript">   
function showToast() {       
    android.JsCallAndroid("哈哈啊哈 ");
     }
</script>

</head>
<body>
<input type="button" value="呼叫"
     onClick="showToast()"/>
</body>

注意：如果用shouldOverrideUrlLoading方法中通過返回的url來響應原生的一些方法時候（url中帶有特殊符號，比如：& = 等。。），html的url要通過encodeURIComponent（url）進行轉碼，手機端通過URLDecoder.decode(url)轉碼獲取都這個url，如果不轉碼進行傳送回收不到這個url（IOS是這樣的）。還有就是，在 原生呼叫JS的方法時候，傳遞的引數是字串，要用 \” 把這個字串包裹起來比如：（”\”我是app\”“），如果是數字就不必了，要不html識別不了這個字串。