Android WebView實(shí)例詳解

一、什么是webkit ?

Android手機(jī)中內(nèi)置了一款高性能webkit內(nèi)核瀏覽器，在SDK中封裝為一個(gè)叫做WebView組件。 WebKit是Mac OS X v10.3及以上版本所包含的軟件框架（對v10.2.7及以上版本也可通過軟件更新獲?。?。 同時(shí)，WebKit也是Mac OS X的Safari網(wǎng)頁瀏覽器的基礎(chǔ)。WebKit是一個(gè)開源項(xiàng)目，主要由KDE的KHTML修改而來并且包含了一些來自蘋果公司的一些組件。 
WebKit了解更多http://baike.baidu.com/view/1510583.htm

二、Android實(shí)現(xiàn)WebView有以下兩種不同的方法：
第一種方法的步驟：
1、在要Activity中實(shí)例化WebView組件：WebView webView = new WebView(this);
2、調(diào)用WebView的loadUrl()方法，設(shè)置WevView要顯示的網(wǎng)頁：
  互聯(lián)網(wǎng)用：webView.loadUrl("http://www.");
  本地文件用：webView.loadUrl("file:// android_asset/XX.html"); 本地文件存放在：assets 文件中

3、調(diào)用Activity的setContentView( )方法來顯示網(wǎng)頁視圖
4、用WebView點(diǎn)鏈接看了很多頁以后為了讓WebView支持回退功能，需要覆蓋覆蓋Activity類的onKeyDown()方法，如果不做任何處理，點(diǎn)擊系統(tǒng)回退剪鍵，整個(gè)瀏覽器會(huì)調(diào)用finish()而結(jié)束自身，而不是回退到上一頁面
5、需要在AndroidManifest.xml文件中添加權(quán)限，否則會(huì)出現(xiàn)Web page not available錯(cuò)誤。
  <uses-permission android:name="android.permission.INTERNET" />

第二種方法的步驟：
1、在布局文件中聲明WebView
2、在Activity中實(shí)例化WebView
3、調(diào)用WebView的loadUrl( )方法，設(shè)置WevView要顯示的網(wǎng)頁
4、為了讓WebView能夠響應(yīng)超鏈接功能，調(diào)用setWebViewClient( )方法，設(shè)置  WebView視圖
5、用WebView點(diǎn)鏈接看了很多頁以后為了讓WebView支持回退功能，需要覆蓋覆蓋Activity類的onKeyDown()方法，如果不做任何處理，點(diǎn)擊系統(tǒng)回退剪鍵，整個(gè)瀏覽器會(huì)調(diào)用finish()而結(jié)束自身，而不是回退到上一頁面
6、需要在AndroidManifest.xml文件中添加權(quán)限，否則出現(xiàn)Web page not available錯(cuò)誤。
<uses-permission android:name="android.permission.INTERNET"/>

三、常用屬性、狀態(tài)描述:
WebSettings常用方法：
setAllowFileAccess 啟用或禁止WebView訪問文件數(shù)據(jù)
setBlockNetworkImage 是否顯示網(wǎng)絡(luò)圖像
setBuiltInZoomControls 設(shè)置是否支持縮放
setCacheMode 設(shè)置緩沖的模式
setDefaultFontSize 設(shè)置默認(rèn)的字體大小
setDefaultTextEncodingName 設(shè)置在解碼時(shí)使用的默認(rèn)編碼
setFixedFontFamily 設(shè)置固定使用的字體
setJavaSciptEnabled 設(shè)置是否支持Javascript
setLayoutAlgorithm 設(shè)置布局方式
setLightTouchEnabled 設(shè)置用鼠標(biāo)激活被選項(xiàng)
setSupportZoom 設(shè)置是否支持變焦

WebViewClient常用方法：
doUpdate VisitedHistory 更新歷史記錄
onFormResubmission 應(yīng)用程序重新請求網(wǎng)頁數(shù)據(jù)
onLoadResource 加載指定地址提供的資源
onPageFinished 網(wǎng)頁加載完畢
onPageStarted 網(wǎng)頁開始加載
onReceivedError 報(bào)告錯(cuò)誤信息
onScaleChanged WebView發(fā)生改變
shouldOverrideUrlLoading 控制新的連接在當(dāng)前WebView中打開

WebChromeClient常用方法：
onCloseWindow 關(guān)閉WebView
onCreateWindow 創(chuàng)建WebView
onJsAlert 處理Javascript中的Alert對話框
onJsConfirm處理Javascript中的Confirm對話框
onJsPrompt處理Javascript中的Prompt對話框
onProgressChanged 加載進(jìn)度條改變
onReceivedlcon 網(wǎng)頁圖標(biāo)更改
onReceivedTitle 網(wǎng)頁Title更改
onRequestFocus WebView顯示焦點(diǎn)
 

四、Android webView開發(fā)過程中相關(guān)知識： 

    1、AndroidManifest.xml中必須使用許可"android.permission.INTERNET",否則會(huì)出Web page not available錯(cuò)誤。
    2、如果訪問的頁面中有Javascript，則webview必須設(shè)置支持Javascript。
        webview.getSettings().setJavaScriptEnabled(true);  
    3、如果頁面中鏈接，如果希望點(diǎn)擊鏈接繼續(xù)在當(dāng)前browser中響應(yīng)，而不是新開Android的系統(tǒng)browser中響應(yīng)該鏈接，必須覆蓋 webview的WebViewClient對象。
    4、下面的代碼通過loadUrl方法設(shè)置當(dāng)前webView需要訪問的網(wǎng)址：
mWebView=(WebView) findViewById(R.id.WebView01);
mWebView.loadUrl(“http://www./thread-940-1-1.html”);
    5、在android中專門通過WebSettings來設(shè)置WebView的一些屬性、狀態(tài)等。在創(chuàng)建WebView時(shí)，系統(tǒng)有一個(gè)默認(rèn)的設(shè)置，我們可以通過WebView.getSettings來得到這個(gè)設(shè)置：
WebSettings webSettings=mWebView.getSettings();//取得對象
WebSettings和WebView都在同一個(gè)生命周期中存在，當(dāng)WebView被銷毀后，如果再使用WebSettings，則會(huì)拋出異常。
    6、使用WebViewClient來完成在應(yīng)用程序中自定義網(wǎng)頁瀏覽程序：
WebViewClient是輔助WebView處理各種通知、請求等事件的類。通過WebView的setWebViewClient方法指定WebViewClient對象。
WebView可以通過覆蓋WebViewClient方法來輔助WebView瀏覽網(wǎng)頁：
public Boolean shouldOverrideUrlLoading
(WebView view,String url){view .loadUrl(url);return true;}
 

五、Android webView實(shí)例講解

A. webview組件如何使用

1)添加權(quán)限：

AndroidManifest.xml中必須使用許可"android.permission.INTERNET",否則會(huì)出Web page not available錯(cuò)誤。

2)在要Activity中生成一個(gè)WebView組件：WebView webView = new WebView(this);或者可以在activity的layout文件里添加webview控件：

<WebView  android:id="@+id/wv"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:text="@string/hello"

    />

3)設(shè)置WebView基本信息：
    如果訪問的頁面中有Javascript，則webview必須設(shè)置支持Javascript。
          webview.getSettings().setJavaScriptEnabled(true);  
          觸摸焦點(diǎn)起作用
          requestFocus();
          取消滾動(dòng)條
          this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);

4)設(shè)置WevView要顯示的網(wǎng)頁：
     互聯(lián)網(wǎng)用：webView.loadUrl("http://www.google.com"); 
      本地文件用：webView.loadUrl("file:///android_asset/XX.html");  \本地文件存放在：assets文件中

5)如果希望點(diǎn)擊鏈接由自己處理，而不是新開Android的系統(tǒng)browser中響應(yīng)該鏈接。給WebView添加一個(gè)事件監(jiān)聽對象（WebViewClient)并重寫其中的一些方法：
 shouldOverrideUrlLoading：對網(wǎng)頁中超鏈接按鈕的響應(yīng)。當(dāng)按下某個(gè)連接時(shí)WebViewClient會(huì)調(diào)用這個(gè)方法，并傳遞參數(shù)：按下的url。比如當(dāng)webview內(nèi)嵌網(wǎng)頁的某個(gè)數(shù)字被點(diǎn)擊時(shí)，它會(huì)自動(dòng)認(rèn)為這是一個(gè)電話請求，會(huì)傳遞url：tel:123,如果你不希望如此可通過重寫shouldOverrideUrlLoading函數(shù)解決：

public boolean shouldOverrideUrlLoading(WebView view,String url){  

     if(url.indexOf("tel:")<0){//頁面上有數(shù)字會(huì)導(dǎo)致連接電話  

         view.loadUrl(url);  

     }  

     return true;            

}

另外還有其他一些可重寫的方法 
1，接收到Http請求的事件
onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm) 

2，打開鏈接前的事件
public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } 

這個(gè)函數(shù)我們可以做很多操作，比如我們讀取到某些特殊的URL，于是就可以不打開地址，取消這個(gè)操作，進(jìn)行預(yù)先定義的其他操作，這對一個(gè)程序是非常必要的。
 
3，載入頁面完成的事件
public void onPageFinished(WebView view, String url){ } 

同樣道理，我們知道一個(gè)頁面載入完成，于是我們可以關(guān)閉loading條，切換程序動(dòng)作。
 
4，載入頁面開始的事件
public void onPageStarted(WebView view, String url, Bitmap favicon) { } 

這個(gè)事件就是開始載入頁面調(diào)用的，通常我們可以在這設(shè)定一個(gè)loading的頁面，告訴用戶程序在等待網(wǎng)絡(luò)響應(yīng)。
 
通過這幾個(gè)事件，我們可以很輕松的控制程序操作，一邊用著瀏覽器顯示內(nèi)容，一邊監(jiān)控著用戶操作實(shí)現(xiàn)我們需要的各種顯示方式，同時(shí)可以防止用戶產(chǎn)生誤操作。
      

6)  如果用webview點(diǎn)鏈接看了很多頁以后，如果不做任何處理，點(diǎn)擊系統(tǒng)“Back”鍵，整個(gè)瀏覽器會(huì)調(diào)用finish()而結(jié)束自身，如果希望瀏覽的網(wǎng)頁回退而不是退出瀏覽器，需要在當(dāng)前Activity中處理并消費(fèi)掉該Back事件。
       覆蓋Activity類的onKeyDown(int keyCoder,KeyEvent event)方法。

public boolean onKeyDown(int keyCoder,KeyEvent event){  

    if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){          webview.goBack();   //goBack()表示返回webView的上一頁面  

          return true;  

    }  

    return false;  

}  

B. Webview與js交互

Webview與js的雙向交互才是android的webview強(qiáng)大所在，也是馬甲精神能夠徹底執(zhí)行的基礎(chǔ)保障。

首先，webview可以定義一個(gè)在其內(nèi)嵌頁面中可以觸發(fā)的事件

wv.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");  

rivate final class DemoJavaScriptInterface  

   {  

nbsp;DemoJavaScriptInterface(){}  

    public void clickonAndroid( final String order){  

        mHandler.post(newRunnable(){  

            @Override  

            public void run(){  

                      jsonText="{"name":""+order+""}";  

               wv.loadUrl("javascript:wave("+jsonText+")");  

            }  

        });  

    }  

通過以上代碼，即可實(shí)現(xiàn)在其內(nèi)嵌網(wǎng)頁中觸發(fā)

window.demo.clickOnAndroid(str)事件并傳參數(shù)str給webview。Webview接收到str之后，可以通過以上代碼觸發(fā)其內(nèi)嵌頁面中的js函數(shù)wave(str)。這樣就可以實(shí)現(xiàn)網(wǎng)頁觸發(fā)webview的事件并傳參數(shù)，webview接收參數(shù)并調(diào)用js函數(shù)。

下面看我的Html腳本：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""

http://www./TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery.js"></script>

<script>

function toclient()

{

    var order=$("#val").val();

window.demo.clickonAndroid(order);

    }

    function wave(str){

       //alert(str.name);

       $("#fromclient").text(str.name);

    }

</script>

</head>

    <body>這是一個(gè)html頁面

    <br/>

 輸入一個(gè)字符串：<br/>

  <input id="val" />

        <input type="submit" value="點(diǎn)擊提交給客戶端"

        onclick="toclient();"/>

      <br /> 

        顯示返回：<label id="fromclient"></label>

    </body>

</html>

通過腳本看到wave（str）函數(shù)是負(fù)責(zé)將原來傳給webview的數(shù)據(jù)重新拿回頁面，效果圖如下：

另外，如果你想獲取頁面的一些處理數(shù)據(jù)并交給webview客戶端處理，可在wave函數(shù)里將數(shù)據(jù)alert，然后webview中重寫WebChromeClient的onJsAlert函數(shù)，具體代碼如下

wv.setWebChromeClient(new MyWebChromeClient());  

final class MyWebChromeClient extends WebChromeClient{ 

    @Override  

    public booleanonJsAlert(WebView view, String url, String message, final JsResult result) {   

//message就是wave函數(shù)里alert的字符串，這樣你就可以在android客戶端里對這個(gè)數(shù)據(jù)進(jìn)行處理  

      result.confirm();          

    }   

      return true;    

} 

六、更多文檔參考：

Android WebView實(shí)例詳解
http://www./thread-947-1-1.html 

Android安卓Web開發(fā)框架 mobl

http:///forum.php?mod=viewthread&tid=345

Android開發(fā)之WebView組件的使用詳解

http://developer.51cto.com/art/201008/216488.htm

Android WebView使用

http://www.cnblogs.com/oakpip/archive/2011/04/08/2009800.html

Android和js的互調(diào)

http://www.cnblogs.com/oakpip/archive/2011/04/10/2011165.html

Android開發(fā)學(xué)習(xí)筆記：淺談WebView

http://www./kf/201108/101518.html

android WebView總結(jié)

http://blog.csdn.net/chenshijun0101/article/details/7045394