Android就業面試技巧系列-技術篇5 (WebView和JS交互)

Android就業面試技巧系列-技術篇(WebView和JS交互)

WebView：

    一個絕對佈局容器，用來展示或渲染Web頁面。這個類是你可以滾動自己的Web瀏覽器或在你的Activity中簡單地顯示一些在線內容的基礎。它使用了WebKit渲染引擎來顯示網頁，包括向前和向後導航的方法（通過歷史記錄），放大和縮小，執行文本搜索等。

WebView相關的幾個類：

    WebSettings：一個抽象類，包含對WebView的設置方法。用來對WebView進行設置，比如支持JS、緩存模式等。

    WebViewClient：這個類的方法有一個特點，就是參數的第一項就是WebView，其他項是事件或數據信息。WebView通過該類對外通知頁面加載相關的消息用來在頁面加載的各個階段進行業務處理，處理加載錯誤情況，攔截頁面內和頁面外的請求。

    WebChromeClientWebView：WebView通過該類，通知獲取到站點圖標、標題、加載進度，以及JS對話框等，用來更好地展示頁面和交互。

    瞭解了WebView相關的一下基礎概念後，我們來看一下具體的應用。

    WebView簡單設置：

[Java] 純文本查看 複製代碼

?

1 2 3 4 5 6 7

WebSettings settings = webview.getSettings();         settings.setJavaScriptEnabled(true);// 這樣網頁就可加載JavaScript了         settings.setJavaScriptCanOpenWindowsAutomatically(true);         webview.setWebViewClient(newWebViewClient());// 設置點擊網頁中的鏈接不會打開android內置的瀏覽器，默認情況下點擊鏈接會打開android內置的瀏覽器         settings.setBuiltInZoomControls(true);// 顯示放大縮小按鈕         settings.setSupportZoom(true);// 允許放大縮小         settings.setSupportMultipleWindows(true);

WebView在默認情況下會記錄訪問過的page，這樣可以實現訪問過的網頁的向前和向後瀏覽
setWebViewClient時，可以自定義WebViewClient，重寫裏面的方法shouldOverrideUrlLoading。

[Java] 純文本查看 複製代碼

?

01 02 03 04 05 06 07 08 09 10 11 12

privateclass MyWebViewClient extendsWebViewClient {      @Override      publicboolean shouldOverrideUrlLoading(WebView view, String url) {          if(Uri.parse(url).getHost().equals("blog.csdn.net")) {              // This is my web site, so do not override; let my WebView load the pagereturn false;          }          // Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs          Intent intent = newIntent(Intent.ACTION_VIEW, Uri.parse(url));          startActivity(intent);          returntrue;      } }

獲取WebView所加載的網頁的title，通過webview.setWebChromeClient，它有兩個方法是獲取title和icon

[Java] 純文本查看 複製代碼

?

01 02 03 04 05 06 07 08 09 10 11

webview.setWebChromeClient(newWebChromeClient(){             @Override             publicvoid onReceivedTitle(WebView view, String title) { // 獲取到Title                 super.onReceivedTitle(view, title);             }               @Override             publicvoid onReceivedIcon(WebView view, Bitmap icon) { // 獲取到圖標                 super.onReceivedIcon(view, icon);             }         });

第二種方式，通過webview和js交互來獲取title和icon

[Java] 純文本查看 複製代碼

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16

publicvoid getTitle(WebView wv) {         wv.addJavascriptInterface(newGetTitle(), "getTitle");// 向webview註冊一個本地接口         wv.setWebViewClient(newWebViewClient() {             @Override             publicvoid onPageFinished(WebView view, String url) {                 view.loadUrl("javascript:window.getTitle.onGetTitle("                         +"document.getElementsByTagName('title')[0].innerHTML"+ ");");                 super.onPageFinished(view, url);             }         });     }       classGetTitle {         publicvoid onGetTitle(String title) {             // ...參數title即爲網頁的標題，可在這裏面進行相應的title的處理        }     }

WebView和JS交互（WebView應用HTML5）:

WebView中應用HTML5主要有三種常用情況:

>>1.HTML5本地存儲

[Java] 純文本查看 複製代碼

?

1 2 3 4

String dir = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath(); settings.setDatabaseEnabled(true); settings.setDatabasePath(dir);// 設置數據庫路徑 settings.setDomStorageEnabled(true);// 使用LocalStorage則必須打開

>>2.HTML5地理位置服務，需要在設置中進行設置，另外還需要重寫WebChromeClient的允許獲取地理位置的方法；

[Java] 純文本查看 複製代碼

?

1 2	settings.setGeolocationEnabled(true);// 啓用地理定位 settings.setGeolocationDatabasePath(dir);// 設置定位的數據庫路徑

重寫WebChromeClient的onGeolocationPermissionsShowPrompt方法，用於允許瀏覽器獲取地下位置；

[Java] 純文本查看 複製代碼

?

1 2 3 4 5

@Override publicvoid onGeolocationPermissionsShowPrompt(String origin, Callback callback) {     super.onGeolocationPermissionsShowPrompt(origin, callback);     callback.invoke(origin,true,false); }

下面是callback.invoke方法的描述

[Java] 純文本查看 複製代碼

?

1 2 3 4 5 6 7 8 9

*/publicinterface Callback {     /**      * Sets the Geolocation permission state for the supplied origin.      *      * @param origin the origin for which permissions are set      * @param allow 是否讓origin也就是web站點獲取地理位置      * @param retain 是否保持此權限      */publicvoid invoke(String origin, booleanallow, booleanretain); };

>>3.HTML5離線存儲

[Java] 純文本查看 複製代碼

?

1 2 3 4 5 6

settings.setAppCacheEnabled(true);// 開啓應用程序緩存 String cache_dir = this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath(); settings.setAppCachePath(cache_dir);// 設置應用緩存的路徑 settings.setCacheMode(WebSettings.LOAD_DEFAULT);// 設置緩存的模式 settings.setAppCacheMaxSize(1024* 1024* 8);// 設置應用緩存的最大尺寸 settings.setAllowFileAccess(true);// 可以讀取文件緩存(manifest生效)

>>4.HTML5處理網頁中的對話框，需要重寫下面的三個方法，分別是{"警告","確認","提示"}

[Java] 純文本查看 複製代碼

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17

@Override// 可以顯示一個帶確認的按鈕並監聽事件    publicboolean onJsAlert(WebView view, String url, String message,            JsResult result) {        returnsuper.onJsAlert(view, url, message, result);    }      @Override// 可以顯示一個帶確定/取消按鈕的對話框並監聽用戶的操作    publicboolean onJsConfirm(WebView view, String url,            String message, JsResult result) {        returnsuper.onJsConfirm(view, url, message, result);    }      @Override    publicboolean onJsPrompt(WebView view, String url, String message,            String defaultValue, JsPromptResult result) {        returnsuper.onJsPrompt(view, url, message, defaultValue, result);    }

>>5.有時候希望使本地存儲或離線存儲的空間更大，需要擴展存儲空間，需要重寫WebChromeClient的onExceededDatabasseQuota方法；

[Java] 純文本查看 複製代碼

?

1 2 3 4 5 6 7 8 9

@Override       publicvoid onExceededDatabaseQuota(String url,               String databaseIdentifier, longquota,               longestimatedDatabaseSize, longtotalQuota,               QuotaUpdater quotaUpdater) {           super.onExceededDatabaseQuota(url, databaseIdentifier, quota,                   estimatedDatabaseSize, totalQuota, quotaUpdater);           quotaUpdater.updateQuota(estimatedDatabaseSize * 2);// 此方法擴展存儲空間爲默認的2倍       }