android使用者介面-組件Widget-網路視圖WebView

來源:互聯網
上載者:User

一個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對象。

mWebView.setWebViewClient(new WebViewClient(){       
                    public boolean shouldOverrideUrlLoading(WebView view, String url) {       
                        view.loadUrl(url);       
                        return true;       
                    }       
        });  
mWebView.setWebViewClient(new WebViewClient(){    
                    public boolean shouldOverrideUrlLoading(WebView view, String url) {    
                        view.loadUrl(url);    
                        return true;    
                    }    
        }); 

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

public boolean onKeyDown(int keyCode, KeyEvent event) {       
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {       
            mWebView.goBack();       
                   return true;       
        }       
        return super.onKeyDown(keyCode, event);       
    }    
public boolean onKeyDown(int keyCode, KeyEvent event) {    
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {    
            mWebView.goBack();    
                   return true;    
        }    
        return super.onKeyDown(keyCode, event);    
    }  
 

下一步讓我們來瞭解一下android中webview是如何支援javascripte自訂對象的,在w3c標準中js有 window,history,document等標準對象,同樣我們可以在開發瀏覽器時自己定義我們的對象調用手機系統功能來處理,這樣使用js就可以 為所欲為了。

  看一個執行個體:

view plaincopy to clipboardprint?
public class WebViewDemo extends Activity {        
    private WebView mWebView;       
    private Handler mHandler = new Handler();       
       
    public void onCreate(Bundle icicle) {       
        super.onCreate(icicle);       
        setContentView(R.layout.webviewdemo);       
        mWebView = (WebView) findViewById(R.id.webview);       
        WebSettings webSettings = mWebView.getSettings();       
        webSettings.setJavaScriptEnabled(true);       
        mWebView.addJavascriptInterface(new Object() {       
            public void clickOnAndroid() {       
                mHandler.post(new Runnable() {       
                    public void run() {       
                        mWebView.loadUrl("javascript:wave()");       
                    }       
                });       
            }       
        }, "demo");       
        mWebView.loadUrl("file:///android_asset/demo.html");       
    }       
}  
public class WebViewDemo extends Activity {     
    private WebView mWebView;    
    private Handler mHandler = new Handler();    
    
    public void onCreate(Bundle icicle) {    
        super.onCreate(icicle);    
        setContentView(R.layout.webviewdemo);    
        mWebView = (WebView) findViewById(R.id.webview);    
        WebSettings webSettings = mWebView.getSettings();    
        webSettings.setJavaScriptEnabled(true);    
        mWebView.addJavascriptInterface(new Object() {    
            public void clickOnAndroid() {    
                mHandler.post(new Runnable() {    
                    public void run() {    
                        mWebView.loadUrl("javascript:wave()");    
                    }    
                });    
            }    
        }, "demo");    
        mWebView.loadUrl("file:///android_asset/demo.html");    
    }    

我們看addJavascriptInterface(Object obj,String interfaceName)這個方法,該方法將一個java對象綁定到一個javascript對象中,javascript對象名就是 interfaceName(demo),範圍是Global。這樣初始化webview後,在webview載入的頁面中就可以直接通過 javascript:window.demo訪問到綁定的java對象了。來看看在html中是怎樣調用的。

<html>       
        <mce:script language="javascript"><!--     
       
                function wave() {       
                    document.getElementById("droid").src="android_waving.png";       
                }       
             
// --></mce:script>       
        <body>       
            <a onClick="window.demo.clickOnAndroid()">       
                                <img id="droid" src="android_normal.png" mce_src="android_normal.png"/><br>       
                                Click me!       
            </a>       
        </body>       
</html>     
<html>    
        <mce:script language="javascript"><!--  
    
                function wave() {    
                    document.getElementById("droid").src="android_waving.png";    
                }    
          
// --></mce:script>    
        <body>    
            <a onClick="window.demo.clickOnAndroid()">    
                                <img id="droid" src="android_normal.png" mce_src="android_normal.png"/><br>    
                                Click me!    
            </a>    
        </body>    
</html>    

這樣在javascript中就可以調用java對象的clickOnAndroid()方法了,同樣我們可以在此對象中定義很多方法(比 如發簡訊,調用連絡人清單等手機系統功能。),這裡wave()方法是java中調用javascript的例子。

這裡還有幾個知識點:

1)為了讓WebView從apk檔案中載入assets,Android SDK提供了一個schema,首碼為"file:///android_asset/"。WebView遇到這樣的schema,就去當前包中的 assets目錄中找內容。如上面的"file:///android_asset/demo.html"
2)addJavascriptInterface方法中要綁定的Java對象及方法要運行另外的線程中,不能運行在構造他的線程中,這也是使用 Handler的目的。

 

 

 

總結:

1、添加許可權:AndroidManifest.xml中必須使用許可"android.permission.INTERNET",否則會出Web page not available錯誤。
    2、在要Activity中產生一個WebView組件:WebView webView = new WebView(this);
    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
                onLoadResource   
                onPageStart  
                onPageFinish  
                onReceiveError
                onReceivedHttpAuthRequest
         

    6、如果用webview點連結看了很多頁以後,如果不做任何處理,點擊系統“Back”鍵,整個瀏覽器會調用finish()而結束自身,如果希望瀏覽的網頁回退而不是退出瀏覽器,需要在當前Activity中處理並消費掉該Back事件。
       覆蓋Activity類的onKeyDown(int keyCoder,KeyEvent event)方法。

  1.   public boolean onKeyDown(int keyCoder,KeyEvent event){
  2.                         if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){
  3.                                 webview.goBack();   //goBack()表示返回webView的上一頁面
  4.                                 return true;
  5.                         }
  6.                         return false;
  7.                 }
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.