WebView 使用總結

首先我們來看一個簡單的效果:

Uri uri = Uri.parse("http://www.csdn.net/");
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
startActivity(intent);
WebView webView = new WebView(MainActivity.this);
setContentView(webView);    

csdn
很簡單就可以實現一個web頁的嵌套,不過這種方式不具有很好的人機交互功能,如果只是閱讀網頁內容,是一種不錯的選擇。

WebView加載網頁方式

  1. webview.loadUrl();
  2. webview.loadData();
  3. loadDataWithBaseURL();
    注意:
    (1)loadUrl,可以分爲load網絡url和本地url:
    webView.loadUrl(“http://www.csdn.net/“);
    webView.loadUrl(“file:///android_asset/XX.html”); 本地文件存放在:assets文件中.
    (2)loadData()與loadDataWithBaseURL()的區別,webView.loadData(data, mimeType, encoding);與 webView.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, historyUrl);中相差了兩個參數”baseUrl”,”historyUrl”;當我們load的數據data中,如果有些數據的路徑爲相對路徑,使用loadDataWithBaseURL()方法將baseUrl參數加上,相對路徑加載不到數據的問題就可以得到解決。“historyUrl”可以指定資源的歷史路徑。

WebSettings中常用方法

拿到一個實例WebSettings settings = webView.getSettings();
1.支持javaScript
settings.setJavaScriptEnabled(true);
2.自適應屏幕
settings.setUseWideViewPort(true);//設置此屬性,可任意比例縮放
settings.setLoadWithOverviewMode(true);
3.支持頁面縮放
settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
4.支持數據緩存
數據緩存分爲兩種:AppCache和DOM Storage(Web Storage)
AppCache使我們能夠有選擇的緩衝web瀏覽器中所有的東西,從頁面、圖片到腳本、css等等。尤其在涉及到應用於網站的多個頁面上的CSS和JavaScript文件的時候非常有用。其大小目前通常是5M。在Android上需要手動開啓(setAppCacheEnabled),並設置路徑(setAppCachePath)和容量(setAppCacheMaxSize);如果需要存儲一些簡單的用key/value對即可解決的數據,DOM Storage是非常完美的方案。根據作用範圍的不同,有Session Storage和Local Storage兩種,分別用於會話級別的存儲(頁面關閉即消失)和本地化存儲(除非主動刪除,否則數據永遠不會過期)。在Android中可以手動開啓DOM Storage(setDomStorageEnabled),設置存儲路徑(setDatabasePath)
5.設置可以訪問文件
setAllowFileAccess(true);
6.支持自動加載圖片
setLoadsImagesAutomatically(true);
……

WebChromeClient的常用方法

WebChromeClient用於處理界面發生的一些事件,例如進度更新,js的alert等等。下面給出他的應用例子:
1.加載進度

// Let's display the progress in the activity title bar, like the browser app does.
final Activity activity = this;
webView.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress) {
                // Activities and WebViews measure progress with different scales.
                // The progress meter will automatically disappear when we reach 100%
                Log.i("progress", progress + "");
                activity.setProgress(progress * 1000);
            }
        });

2.彈出alert
java代碼:

@Override
public boolean onJsAlert(WebView view, String url, String message,JsResult result) {
        final AlertDialog.Builder builder = new AlertDialog.Builder(view.getContext());
        builder.setTitle("對話框").setMessage(message)
        .setPositiveButton("確定", null);
        builder.setCancelable(false);
        AlertDialog dialog = builder.create();
        dialog.show();
        // 因爲沒有綁定事件,需要強行confirm,否則頁面會變黑顯示不了內容。
        result.confirm();
        return true;

html代碼:

<!DOCTYPE html>
<html>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<h1>測試alert</h1>
<p>
JavaScript 能夠對事件作出反應。比如對按鈕的點擊:
</p>
<button type="button" onclick="alert('我來自js!')">點擊這裏</button>
</body>
</html>

效果:
alert測試
當然WebChromeClient,還有很多其他的方法,詳情請查閱API.

WebViewClient的常用方法

WebViewClient主要用於處理通知、請求事件。
1. 在網頁開始時調用

@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
    super.onPageStarted(view, url, favicon);
}

2.在網頁加載完成時調用

@Override
public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);
}

3.當加載的網頁需要重定向的時候就會調這個方法告知我們應用程序是否需要接管控制網頁加載,如果應用程序接管,並且return true意味着主程序接管網頁加載,如果返回false讓webview自己處理。如果是post請求,方法將不會被調用。

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    return super.shouldOverrideUrlLoading(view, url);
}

注意:當我們訪問的地址需要我們應用程序自己處理的時候,可以在這裏截獲,比如我們發現跳轉到的是一個market的鏈接,那麼我們可以直接跳轉到應用市場。

4.當瀏覽器訪問網址發生錯誤時通知我們的應用程序。

@Override
public void onReceivedError(WebView view, int errorCode,String description, String failingUrl) {
    super.onReceivedError(view, errorCode, description, failingUrl);
}

5.當網頁加載資源過程中發現SSL錯誤會調用此方法。我們應用程序必須做出響應,是取消請求handler.cancel(),還是繼續請求handler.proceed();內核的默認行爲是handler.cancel();

@Override
public void onReceivedSslError(WebView view,SslErrorHandler handler, SslError error) {
    super.onReceivedSslError(view, handler, error);
}

注意:
1.內核會記住本次選擇,如果下次還有相同的錯誤,內核會直接執行之前選擇的結果。
2.在訪問https SSL證書網頁時,如果有些手機訪問不了,需要在onReceivedSslError添加SSL支持, 不要使用super。

6.通知webView加載指定的資源

@Override
public void onLoadResource(WebView view, String url) {
    super.onLoadResource(view, url);
}

根據需求選擇方法來寫代碼就可以了。
……

WebView與JS進行交互

js調java代碼

  1. 添加WebView的addJavascriptInterface()方法。
    mWebView.addJavascriptInterface(getHtmlObject(), “dcObj”);
  2. 在Object實例中,給對應的java方法添加註解 “@JavascriptInterface“,其原理是通過反射實現的。
 @JavascriptInterface
 public String JscallJava(){  
   return "Js call Java";  
 }
  1. 在對應的html的js代碼中可通過window對象調用addJavascriptInterface()方法的第二個參數“dcObj”來調用java中的方法。
function showJscallJava(){  
        var str = window.dcObj.JscallJava();  
        alert(str);  
}  

通過以上三步就可以實現在html中調用java代碼了。

java調js代碼

相對js調用java代碼,java調用js代碼就很簡單了,在需要調用js的地方只需要再調用mWebView.loadUrl(“javascript: 方法名”)方法就可以了。
例如在點擊的時候調用js的showFromHtml2( param )方法。

@Override
    public void onClick(View v) {
        mWebView.loadUrl("javascript: showFromHtml2('Java調js有參數')");
    }

* js與java交互,完整代碼如下:*

java代碼

/*
 * author zyc
 */
public class MainActivity extends Activity implements OnClickListener {

    private WebView mWebView;
    private Button bt_call_js1;
    private Button bt_call_js2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        showWebView();
    }

    private void showWebView() {
        try {
            setContentView(R.layout.activity_main);
            mWebView = (WebView) findViewById(R.id.wv);
            bt_call_js1 = (Button) findViewById(R.id.bt_call_js1);
            bt_call_js1.setOnClickListener(this);
            bt_call_js2 = (Button) findViewById(R.id.bt_call_js2);
            bt_call_js2.setOnClickListener(this);
            mWebView.requestFocus();
            mWebView.setWebChromeClient(new WebChromeClient());
            WebSettings webSettings = mWebView.getSettings();
            webSettings.setJavaScriptEnabled(true);
            webSettings.setDefaultTextEncodingName("utf-8");
            mWebView.addJavascriptInterface(getHtmlObject(), "dcObj");
            mWebView.loadUrl("file:///android_asset/test.html");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private Object getHtmlObject() {
        Object obj = new Object() {
            @JavascriptInterface
            public String HtmlcallJava() {
                return "Js call Java";
            }

            @JavascriptInterface
            public String HtmlcallJava2(final String param) {
                return "Js call Java : " + param;
            }

        };
        return obj;
    }

    @Override
    public void onClick(View v) {
        if (v.getId() == R.id.bt_call_js1) {
            mWebView.loadUrl("javascript: showFromHtml()");
        }
        if (v.getId() == R.id.bt_call_js2) {
            mWebView.loadUrl("javascript: showFromHtml2('Java調js有參數')");
        }
    }
}

test.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>jsjavatest</title>  
<script type="text/javascript" language="javascript">   
    function showJscallJava(){  
        var str = window.dcObj.HtmlcallJava();  
        alert(str);  
    }  
    function showJscallJava2(){  
        var str = window.dcObj.HtmlcallJava2("js調java");  
        alert(str);  
    }  
    function showFromHtml(){  
        document.getElementById("id_input").value = "Java call Js";  
    }  
    function showFromHtml2( param ){  
        document.getElementById("id_input2").value = "Java call Js : " + param;   
    }  
</script>  
</head>  
<body>  
js java Test
<br/>
<br/>
<input type="button" value="JscallJava" onclick="showJscallJava()" />  
<br>  
<input type="button" value="JscallJava2" onclick="showJscallJava2()" />  
<input id="id_input" style="width: 90%" type="text" value="null" />  
<br>  
<input id="id_input2" style="width: 90%" type="text" value="null" />  
<br>  
</body>  
</html>  

效果圖如下:
jsjava


以上就是自己總結的webView資料了,以後還會不斷完善的。望廣大網友提出寶貴的意見,一起討論,一起進步。最後附上源碼。
點擊下載

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章