android API Guides 之 web app --------------Building Web Apps in WebView（WebView與頁面的綁定）

標籤：webview   android應用   web應用   webview與頁面綁定   js綁定   

如果你要在手機端實現一個web app或在app裡載入一個web頁面，那麼你就要用到WebView控制項。這WebView類是View類的擴充子類，它允許web頁面作為應用布局的一部分來展示。它是不具備一個完整的瀏覽器的那些特性，例如WebView沒有導覽列，地址欄等。WebView的預設功能就是去找事WebView。

當你在你的app裡面加一些以後可能跟新的資訊時（例如使用者協議或使用者指南），你是用WebView那是非常有協助的。在你的應用裡，你可以建立一個帶有WebView的activity，然後展示的你的線上文檔資訊。

使用WebView比較適合的另一種情況是，當你給使用者提供資料的時候總是需要串連伺服器去檢索資料，例如郵件。你會發現使用webView 在應用裡去使用網頁展示使用者資料相對於每次都去請求網路然後在解析資料然後展示在layout裡面更容易簡單一些。你可以針對Android裝置設計web頁面然後在你的Android應用裡使用WebView載入它們。

這片文章是展示了如何去開始使用WebView和用它做一些額外的事情。例如在你的Android應用裡去處理頁面導航和把你頁面中的js綁定到用戶端代碼中。

 

Adding a WebView to Your Application

在你layout布局中添加<WebView>就可以把WebView添加到你的應用裡了。例如下面就是一個鋪滿整個螢幕的WebView.

 <?xml version="1.0" encoding="utf-8"?> <WebView  xmlns:android="http://schemas.android.com/apk/res/android"       android:id="@+id/webview"      android:layout_width="fill_parent"       android:layout_height="fill_parent" />

載入頁面使用loadUrl()方法，例如

WebView myWebView = (WebView) findViewById(R.id.webview);

 myWebView.loadUrl("http://www.example.com");

要注意，你必須在manifest file裡設定INTERNET許可權，它才能使用。

<manifest ... >     <uses-permission android:name="android.permission.INTERNET" />     ... </manifest>

這是WebView去展示頁面所需要的最基本的幾個方面。

Using JavaScript in WebView（在WebView中使用js）

 如果你WebView裡面載入的頁面要使用js，那你需要在你的WebView裡面啟用js。一旦你啟用了js，你還可以在你的應用代碼和js代碼之間穿件介面。

Enabling JavaScript

在WebView中js預設的是無法使用的，你可應通過WebSettings去設定你的WebView，使它能夠使用js。你可以通過使用WebView的getSettings()方法得到WebSettings的返回值，然後調用WebSettings的setJavaScriptEnabled()方法來設定使用js。

例如

WebView myWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = myWebView.getSettings(); webSettings.setJavaScriptEnabled(true);

WebSettings提供各種各樣的你認為有用的設定許可權。如果你在你的應用中使用WebView去開發設計一個Web app，你可以通過使用setUserAgentString()去設定一個使用者代理程式字串，然後在你的web頁面查詢這個使用者代理程式頭驗證這個這個頁面請求確實是你的app應用。

來自Android SDK工具/目錄中

Binding JavaScript code to Android code

當你在你的app應用裡使用WebView開發web應用，你能夠在js代碼和用戶端代碼之間去建立介面。例如，js代碼去調用你的Android裡面的一個方法，去彈出彈框來去替代使用js的alter。

通過調用addJavascriptInterface()方法，可以在js代碼和Android代碼之間綁定一個介面，它可以把一個執行個體綁定到js，js可以通過這個介面的名字去調用這可執行個體。

例如下面：

public class WebAppInterface {    Context mContext;      /** Instantiate the interface and set the context */     WebAppInterface(Context c) {         mContext = c;     }      /** Show a toast from the web page */    @JavascriptInterface     public void showToast(String toast) {         Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();     } }

警告：如果你sdk的版本是17或者是更高，你必須在你想在js中調用的任何方法前添加@JavascriptInterface 注釋（這方法必須是public的）。如果你沒有提供這個註解，那麼這方法就會在4.2或是更高版本上無法運行。

這個執行個體是WebAppInterface類允許WebView頁面用showToast方法去穿件一個Toast資訊。，你能用WebView的addJavascriptInterface()把這個類綁定帶你的js裡，並且這個介面的名字是"Android".例如：

 WebView webView = (WebView) findViewById(R.id.webview); webView.addJavascriptInterface(new WebAppInterface(this), "Android");

運行在WebView裡的js通過“Android”去調用這個建立的介面，這時，你的web app就可以訪問WebAppInterface類。例如，這裡是一些html代碼，當通過點擊按鈕，js調用這new interface介面去建立Toast。

  <input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />   <script type="text/javascript">      unction showAndroidToast(toast) {         Android.showToast(toast);      }  </script>

你不需要在js中初始化這“Android”介面。WebView會自動的使它能夠在web頁面裡使用。因此，點擊這個按鈕，這個showAndroidToast()將會使用Android 這個介面去調用WebAppInterface.showToast()方法。

注意：這個對象是被綁定在js上運行在另一個線程裡，不是在他被建立的線程裡。

 

警告：

使用這個addJavascriptInterface()方法之後，js就被允許控制你的Android應用。這即使非常有用的特性，又可能是非常危險的特性。在webview裡，html是靠不住的（例如，html的部分或是全部可能是通過一個不認識的人或程式被提供）。攻擊這可在你html裡執行你用戶端的代碼和選擇任何代碼。如果這樣的話，你就不能去使用addJavascriptInterface()，除非你WebView的html和js全是你自己寫的。你應該禁止使用者在WebView裡去跳轉到不是自己頁面的第三方其他頁面。（去代替這些，預設的使用者的瀏覽器可以開啟所有的url連結，因此如果你處理頁面跳轉，如果有下面所描述的情況，你就應該格外去小心注意）。

Handling Page Navigation（處理頁面跳轉）

 

當使用者從你webview裡點擊一個連結，預設的是去載入一個去處理url的應用，通常是預設的瀏覽器去開啟並載入這個url。然而，你能在webview裡去覆蓋這以預設行為，讓url在你自己的webview裡面開啟。然後你可以使用者向後或向前跳轉，通過webview維護的web頁面的訪問記錄。

用setWebViewClient().方法提供一個WebViewClient，讓使用者在自己的webView裡面開啟連結。

例子：

WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.setWebViewClient(new WebViewClient());

 

這樣做之後，所有的url都會在你的WebView裡面開啟了。

如果點選連結，你想做其他更多色事的話，你就需要去重寫WebViewClient的shouldOverrideUrlLoading()；

執行個體：

 private class MyWebViewClient extends WebViewClient {     @Override      public boolean shouldOverrideUrlLoading(WebView view, String url) {         if (Uri.parse(url).getHost().equals("www.example.com")) {             // This is my web site, so do not override; let my WebView load the page             return false;         }         // Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs          Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));         startActivity(intent);          return true;     } }

 

然後為WebView建立 WebViewClient 的一個執行個體

 

 WebView myWebView = (WebView) findViewById(R.id.webview);  myWebView.setWebViewClient(new MyWebViewClient());

現在，當你點選連結，系統就會去調用shouldOverrideUrlLoading()，檢查這個url的host是不是匹配特定的網域名稱（如上面）。如果不匹配這個方法就會返回false，為了不覆蓋url載入，如果url的不匹配，就會跳轉能預設載入這個URL的activity。

 

Navigating web page history（瀏覽曆史網頁）

 

 

當你的WebView複寫了url載入，他就會自己記錄訪問的曆史頁面。你能用goBack() 和goForward().方法，通過這個記錄向前或向後跳轉。

例如，這裡是一個點擊後退按鈕回退網頁的操作。

@Override  public boolean onKeyDown(int keyCode, KeyEvent event) {      // Check if the key event was the Back button and if there's history      if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {         myWebView.goBack();          return true;     }      // If it wasn't the Back key or there's no web page history, bubble up to the default      // system behavior (probably exit the activity)      return super.onKeyDown(keyCode, event);  }

如果使用者去訪問曆史頁面canGoBack()就會返回true，同樣的你也可以使用canGoForward()去訪問向前的曆史。如果不執行這個檢索，那麼當使用者一旦到達記錄的結束位置，goBack() 和goForward()不會做任何操作。

 

 

 

 

android API Guides 之 web app --------------Building Web Apps in WebView（WebView與頁面的綁定）