android 之 WebView詳解


在Android手機中內置了一款高性能webkit內核瀏覽器,在SDK中封裝為一個叫做WebView組件。 

什么是webkit
 

WebKit是Mac OS X v10.3及以上版本所包含的軟件框架(對v10.2.7及以上版本也可通過軟件更新獲取)。 同時,WebKit也是Mac OS X的Safari網頁瀏覽器的基礎。WebKit是一個開源項目,主要由KDE的KHTML修改而來並且包含了一些來自蘋果公司的一些組件。
 

傳統上,WebKit包含一個網頁引擎WebCore和一個腳本引擎JavaScriptCore,它們分別對應的是KDE的KHTML和KJS。不過, 隨着JavaScript引擎的獨立性越來越強,現在WebKit和WebCore已經基本上混用不分(例如Google Chrome和Maxthon 3采用V8引擎,卻仍然宣稱自己是WebKit內核)。
 

這里我們初步體驗一下在android是使用webview瀏覽網頁,在SDK的Dev Guide中有一個WebView的簡單例子 。
 

在開發過程中應該注意幾點:
 
    1.AndroidManifest.xml中必須使用許可"android.permission.INTERNET",否則會出Web page not available錯誤。
    2.如果訪問的頁面中有Javascript,則webview必須設置支持Javascript。
        webview.getSettings().setJavaScriptEnabled(true);  
    3.如果頁面中鏈接,如果希望點擊鏈接繼續在當前browser中響應,而不是新開Android的系統browser中響應該鏈接,必須覆蓋 webview的WebViewClient對象。

    4. 調用本地html:  webView.loadUrl("file:///android_asset/android.html") ;

 

 
  1. mWebView.setWebViewClient(new WebViewClient(){       
  2.                     public boolean shouldOverrideUrlLoading(WebView view, String url) {       
  3.                         view.loadUrl(url);       
  4.                         return true;       
  5.                     }       
  6.         });   

 

 

 4.如果不做任何處理,瀏覽網頁,點擊系統“Back”鍵,整個Browser會調用finish()而結束自身,如果希望瀏覽的網 頁回退而不是推出瀏覽器,需要在當前Activity中處理並消費掉該Back事件。

 

 

 
  1. public boolean onKeyDown(int keyCode, KeyEvent event) {       
  2.         if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {       
  3.             mWebView.goBack();       
  4.                    return true;       
  5.         }       
  6.         return super.onKeyDown(keyCode, event);       
  7.     }     

 

 

上面是基本的WebView 操作。

 

2.  public void addJavascriptInterface (Object object, String name)    此方法的主要作用是JS調用Java代碼。原理為:將WebView與一個任意對象綁定,並賦予此對象一個名字,

    此時可以在這個對象里加入任意方法,執行你想要的操作,比如方法名為goBaidu();  這時就可以在html中調用這個方法了,調用代碼為在javascript的function中 window.name.goBaidu();

    下面是示例代碼:

     Activity中:

   

    webView.addJavascriptInterface(new Object() {
            public void closeThisPage() {
                Toast.makeText(WebViewActivity.this, "JavascriptInterface is clicking", Toast.LENGTH_LONG).show();
                WebViewActivity.this.finish();
            }

            public void goToBaidu() {
                Toast.makeText(WebViewActivity.this, "JavascriptInterface is clicking", Toast.LENGTH_LONG).show();
                webView.loadUrl("http://www.baidu.com");
            }

        }, "huihui");

       Html中:

     

<html>
<head>
    <meta charset="utf-8" content="text/html" http-equiv="Content-Type"/>    //!!!charset
    <script type="text/javascript" language="javascript">
        function xixi(){
        window.huihui.closeThisPage();    //核心代碼
        }
        function haha(){
        window.huihui.goToBaidu();      //核心代碼
        }

    </script>
</head>
<body>
<a href="" onclick="haha()">Go to baidu page...</a>
<br/>
<a href="" onclick="xixi()">Close</a>
</body>
</html>

 

3.  Java調用JS :核心代碼 

Java中:

webview.loadUrl("javascript:method()");       //如果要傳參數到Js中,注意參數形式。簡單的String類型,參數兩個都需要加上“’”表示字符串

JS:

<script type="text/javascript" language="javascript">

function method(){

alert("From  java code....");

}

</script>

 

 

4.  WebView 的 public void setWebChromeClient (WebChromeClient client)。此方法用處很多,我覺得里面的onJsAlert() onJsConfirm() onJsPrompt() 方法很好。

     在WebChromeClient類里可以重寫這三個方法,此時WebView中加載的html中如果執行alert("alert....");    confirm("confirm...");  prompt("prompt...", "defaultValue");

     這三個方法,該類就會監聽到執行對應的三個方法。我們可以讓這三個方法的返回值為true ,即自定義此方法。在里面寫入自己定義的Dialog,便可實現html與Activity交互。

     注意 JsResult 此類需要在操作時,如果操作則 result.cofirm(). 取消則 result.cancel();    還必須這每一個方法中寫入 dialog.setOnkeyListener(); 方法來監聽Back鍵,listener中        要寫 result.cancel();   否則系統沒有消費這個事件,會出錯。

 

     下面就一個寫onJsPrompt()的示例代碼吧:

     Activity中:

     @Override
        public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) {
            Log.e("onJsPrompt", "url:" + url + " and message:" + message + " and defaultValue:" + defaultValue);
            final Dialog dialog = new Dialog(WebViewActivity.this);
            dialog.setContentView(R.layout.prompt);  //自定義layout
            dialog.setTitle("This is prompt...");
            final EditText editText = (EditText) dialog.findViewById(R.id.editText);
            editText.setText(defaultValue);
            Button btnOk = (Button) dialog.findViewById(R.id.btnOK);
            btnOk.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(WebViewActivity.this, "You click the ok button.." + " and The editText content is:" + editText.getText().toString(), Toast.LENGTH_LONG).show();
                    result.confirm(editText.getText().toString());
                    dialog.cancel();
                }
            });
            Button btnCancel = (Button) dialog.findViewById(R.id.btnCancel);
            btnCancel.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(WebViewActivity.this, "You click the cancel button..", Toast.LENGTH_LONG).show();
                    result.cancel();
                    dialog.cancel();
                }
            });
            dialog.show();

    //需要監聽dialog的back事件 ,否則會出錯
         dialog.setOnKeyListener(new DialogInterface.OnKeyListener() {
                @Override
                public boolean onKey(DialogInterface dialogInterface, int i, KeyEvent keyEvent) {
                    if (i == KeyEvent.KEYCODE_BACK) {
                        dialog.cancel();
                        result.cancel();
                        return true;
                    }
                    return false;
                }
            });
            return true;                       //此處必須返回 ture ,否則會彈出 html的 對話框。需要消費事件
          // return super.onJsPrompt(view, url, message, defaultValue, result);
        }

   

 Html 中:

  <html>
<head>
    <script type="text/javascript" language="javascript">
        function jsAlert(){
        alert("This is jsAlert...");
        }
        function jsConfirm(){
            confirm("This is confirm...");
        }
        function jsPrompt(){
            prompt("This is prompt", "lianghui");
        }
    </script>
</head>
<body>
<input onclick="jsAlert()" value="Alert" type="button" />
<br />
<input onclick="jsConfirm()" value="Confirm" type="button" />
<br />
<input type="button" value="Prompt" onclick="jsPrompt()" />
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM