Android開發--玩轉WebView

標籤：android   網路   

在Android開發當中，進行網路訪問載入一個網頁的時候就需要用到一個WebView來進行顯示，這樣可以使得我們的App更為靈活。今天來介紹一下Android中WebView的幾種用法。

基本用法

1.WebView帶載入進度條顯示：

mProgressBar.setMax(100);mWebView.getSettings().setJavaScriptEnabled(true);// 設定WebViewClient用來接收不同的通知和請求mWebView.setWebViewClient(new WebViewClient() {    @Override    public boolean shouldOverrideUrlLoading(WebView view, String url) {        // TODO Auto-generated method stub                return false;    }    //在開始載入的方法中顯示進度條    @Override    public void onPageStarted(WebView view, String url, Bitmap favicon) {        // TODO Auto-generated method stub        super.onPageStarted(view, url, favicon);        mProgressBar.setVisibility(View.VISIBLE);    }    //在結束載入的方法中設定進度條不可見    @Override    public void onPageFinished(WebView view, String url) {        // TODO Auto-generated method stub        super.onPageFinished(view, url);        mProgressBar.setVisibility(View.INVISIBLE);    }});mWebView.setWebChromeClient(new WebChromeClient() {    //得到載入進度，newProgress為100表示載入完成    @Override    public void onProgressChanged(WebView view, int newProgress) {        // TODO Auto-generated method stub        super.onProgressChanged(view, newProgress);        mProgressBar.setProgress(newProgress);    }});mWebView.loadUrl("http://m.baidu.com");

2.攔截載入錯誤資訊：

mWebview.setWebViewClient(new WebViewClient() {   public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {     Toast.makeText(activity, "Oh no! " + description, Toast.LENGTH_SHORT).show();   } });

3.使WebView支援縮放：

mWebView.getSettings().setBuiltInZoomControls(true);

4.使WebView支援回退：
通過複寫Activity的onBackPressed方法，如果WebView可以回退則首先調用WebView的回退方法；

@Overridepublic void onBackPressed() {    // TODO Auto-generated method stub    if (mWebView != null && mWebView.canGoBack()) {        mWebView.goBack();    } else {        super.onBackPressed();    }}

利用WebView進行Java與JS互動

1.首先設定WebView支援javascript：

mWebView.getSettings().setJavaScriptEnabled(true);

2.在JS中調用Java方法：通過WebView的addJavaScriptInterface(Object, String)方法；該String值表示在JS中調用的類名。
3.在Java中調用JS方法：WebView.loadUrl(“javascript:+方法名(方法參數)”);
4.注意：在JS中調用Java方法可以獲得傳回值，在Java中調用JS方法不能得到傳回值。

樣本：在下面的代碼中我們首先在載入完成後，在Java中調用了JS的call_js方法顯示一個網頁對話方塊，接著在網頁中當我們點擊按鈕時會調用Java的send方法。顯示效果如下：

package com.example.webviewtest;import android.annotation.SuppressLint;import android.app.Activity;import android.graphics.Bitmap;import android.os.Bundle;import android.view.View;import android.webkit.WebChromeClient;import android.webkit.WebView;import android.webkit.WebViewClient;import android.widget.ProgressBar;import android.widget.Toast;public class TestJSActivity extends Activity {    private ProgressBar mProgressBar;    private WebView mWebView;    private static final String url = "file:///android_asset/index.html";    @SuppressLint({ "SetJavaScriptEnabled", "JavascriptInterface" })    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_testjs);        mWebView = (WebView) findViewById(R.id.js_webView);        mProgressBar = (ProgressBar) findViewById(R.id.js_progress);        mProgressBar.setMax(100);        mWebView.getSettings().setJavaScriptEnabled(true);        mWebView.setWebViewClient(new WebViewClient() {            @Override            public boolean shouldOverrideUrlLoading(WebView view, String url) {                // TODO Auto-generated method stub                return false;            }            public void onReceivedError(WebView view, int errorCode,                    String description, String failingUrl) {                Toast.makeText(TestJSActivity.this, "Error: " + description,                        Toast.LENGTH_SHORT).show();            }            @Override            public void onPageStarted(WebView view, String url, Bitmap favicon) {                // TODO Auto-generated method stub                super.onPageStarted(view, url, favicon);                mProgressBar.setVisibility(View.VISIBLE);            }            @Override            public void onPageFinished(WebView view, String url) {                // TODO Auto-generated method stub                super.onPageFinished(view, url);                mProgressBar.setVisibility(View.INVISIBLE);                // 在Java中調用js方法，無法取得方法傳回值                mWebView.loadUrl("javascript:call_js(‘call js in android‘)");            }        });        // 在JS中調用Java方法，第二個參數表示了在JS方法中調用的類名        mWebView.addJavascriptInterface(new Object() {            public void send(String message) {                Toast.makeText(TestJSActivity.this, message, Toast.LENGTH_SHORT)                        .show();            }        }, "WebViewObject");        mWebView.setWebChromeClient(new WebChromeClient() {            @Override            public void onProgressChanged(WebView view, int newProgress) {                // TODO Auto-generated method stub                super.onProgressChanged(view, newProgress);                mProgressBar.setVisibility(View.VISIBLE);                mProgressBar.setProgress(newProgress);            }        });        mWebView.loadUrl(url);    }}

JS的代碼：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/html"><head>    <title></title></head><body>    <input type="button" value="webview_js" onclick="sendToAndroid(‘call java in js‘)"> </input>    <script type="text/javascript">        function sendToAndroid(message){            WebViewObject.send(message);        }        function call_js(message){            window.alert(message);        }    </script></body></html>

WebView中的緩衝策略

一、網頁緩衝

1.緩衝策略：
LOAD_CACHE_ONLY: 不使用網路，唯讀取本機快取資料
LOAD_DEFAULT: 根據cache-control決定是否從網路上取資料。
LOAD_CACHE_NORMAL: API level 17中已經廢棄, 從API level 11開始作用同LOAD_DEFAULT模式
LOAD_NO_CACHE: 不使用緩衝，只從網路擷取資料.
LOAD_CACHE_ELSE_NETWORK，只要本地有，無論是否到期，或者no-cache，都使用緩衝中的資料。（如果網頁資料發生變化，它依然顯示老資料）

2.緩衝的儲存位置
/data/data/package_name/cache/
/data/data/package_name/database/webview.db
/data/data/package_name/database/webviewCache.db

3.設定開啟緩衝

// 設定緩衝模式mWebView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT); // 開啟 DOM storage 功能mWebView.getSettings().setDomStorageEnabled(true);// 開啟 database storage 功能mWebView.getSettings().setDatabaseEnabled(true);

4.清空緩衝：mWebView.clearCache(true); 如果為false，只有RAM中的緩衝被清。

5.設定快取資料庫目錄：

mWebView.getSettings().setDatabasePath(dataFilePath);

二、H5緩衝

設定Html5離線緩衝，開發Html離線應用，需要伺服器支援

1.設定開啟：

mWebView.getSettings().setAppCacheEnabled(true);//允許讀取檔案快取(manifest生效)mWebView.getSettings().setAllowFileAccess(true);

2.設定最大容量：

mWebView.getSettings().setAppCacheMaxSize(10 * 1024 * 1024);//10M

3.設定緩衝路徑：

mWebView.getSettings().setAppCachePath(appCaceDir);

對於一個App來說WebSettings.setAppCachePath()只能被設定一次

4.清空緩衝：
WebStorage.getInstance().deleteOrigin()和WebStorage.getInstance().deleteAllData()方法似乎只能清除運行記憶體的緩衝，不能刪除硬碟緩衝

直接刪除緩衝路徑的檔案夾來清理硬碟緩衝。

WebView中儲存App中的Cookie保持登入狀態

參考以下博文：關於cookie 和session 的理解

Android開發--玩轉WebView