android WebView總結（轉）

u022731189發表於2013-05-16
AndroidWebView

轉載自：http://blog.csdn.net/chenshijun0101/article/details/7045394

 

瀏覽器控制元件是每個開發環境都具備的，這為馬甲神功提供了用武之地，windows的有webbrowser，android和ios都有webview。只是其引擎不同，相對於微軟的webbrowser，android及ios的webview的引擎都是webkit，對Html5提供支援。本篇主要介紹android的webview之強大。

A.    webview元件如何使用

 

1)       新增許可權：AndroidManifest.xml中必須使用許可"android.permission.INTERNET",否則會出Web page not available錯誤。

2)       在要Activity中生成一個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)       設定WebView基本資訊：
          如果訪問的頁面中有Javascript，則webview必須設定支援Javascript。
          webview.getSettings().setJavaScriptEnabled(true);  
          觸控焦點起作用
          requestFocus();
          取消滾動條
          this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);

 

4)       設定WevView要顯示的網頁：
          網際網路用：webView.loadUrl("http://www.google.com"); 
          本地檔案用：webView.loadUrl("file:///android_asset/XX.html");  本地檔案存放在：assets檔案中

5)       如果希望點選連結由自己處理，而不是新開Android的系統browser中響應該連結。給WebView新增一個事件監聽物件（WebViewClient)並重寫其中的一些方法：
 shouldOverrideUrlLoading：對網頁中超連結按鈕的響應。當按下某個連線時WebViewClient會呼叫這個方法，並傳遞引數：按下的url。比如當webview內嵌網頁的某個數字被點選時，它會自動認為這是一個電話請求，會傳遞url：tel:123,如果你不希望如此可通過重寫shouldOverrideUrlLoading函式解決： 

 public boolean shouldOverrideUrlLoading(WebView view,String url){

         if(url.indexOf("tel:")<0){//頁面上有數字會導致連線電話

             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; } 

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

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

這個事件就是開始載入頁面呼叫的，通常我們可以在這設定一個loading的頁面，告訴使用者程式在等待網路響應。
 
通過這幾個事件，我們可以很輕鬆的控制程式操作，一邊用著瀏覽器顯示內容，一邊監控著使用者操作實現我們需要的各種顯示方式，同時可以防止使用者產生誤操作。
      

6)       如果用webview點連結看了很多頁以後，如果不做任何處理，點選系統“Back”鍵，整個瀏覽器會呼叫finish()而結束自身，如果希望瀏覽的網頁回退而不是退出瀏覽器，需要在當前Activity中處理並消費掉該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強大所在，也是馬甲精神能夠徹底執行的基礎保障。

首先，webview可以定義一個在其內嵌頁面中可以觸發的事件

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

private 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+")");
             }
         });
     }
}

 通過以上程式碼，即可實現在其內嵌網頁中觸發window.demo.clickOnAndroid(str)事件並傳引數str給webview。Webview接收到str之後，可以通過以上程式碼觸發其內嵌頁面中的js函式wave(str)。這樣就可以實現網頁觸發webview的事件並傳引數，webview接收引數並呼叫js函式。

下面看我的Html指令碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/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>這是一個html頁面
    <br/>
 輸入一個字串：<br/>
  <input id="val" />
        <input type="submit" value="點選提交給客戶端"
        onclick="toclient();"/>
      <br /> 
        顯示返回：<label id="fromclient"></label>
    </body>
</html>

 通過指令碼看到wave（str）函式是負責將原來傳給webview的資料重新拿回頁面，效果圖如下：

 

 

另外，如果你想獲取頁面的一些處理資料並交給webview客戶端處理，可在wave函式裡將資料alert，然後webview中重寫WebChromeClient的onJsAlert函式，具體程式碼如下

 

wv.setWebChromeClient(new MyWebChromeClient());

final  class MyWebChromeClient extends WebChromeClient{

    @Override

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

//message就是wave函式裡alert的字串，這樣你就可以在android客戶端裡對這個資料進行處理

                result.confirm();        

              } 

 return true;  
        }

 

相關文章