2025-02-09

WebView是一個專門用來顯示網頁的View子類。它使用WebKit渲染引擎來顯示網頁,並且支持包括前進,後退,放大,縮小,文本搜索等多種功能。
WebView有一個輔助類叫WebSettings,它管理WebView的設置狀態。該類的對象可以通過WebView.getSettings()方法獲得。下面我們介紹幾個常用的WebSettings設置:
view plainprint?
//得到WebView對象 
WebView mWebView = (WebView) findViewById(R.id.wv1); 
 
//通過WebView得到WebSettings對象 
WebSettings mWebSettings = mWebView.getSettings(); 
 
//設置支持Javascript的參數 
mWebSettings.setJavaScriptEnabled(true); 
 
//設置可以支持縮放 
mWebSettings.setSupportZoom(true); 
 
//設置出現縮放工具 
mWebSettings.setBuiltInZoomControls(true); 
 
//設置默認縮放方式尺寸是far 
mWebSettings.setDefaultZoom(WebSettings.ZoomDensity.FAR); 
 
//設置允許訪問文件數據 
mWebSettings.setAllowFileAccess(true); 
 
//設置是否保存密碼 
mWebSettings.setSavePassword(true); 
  
//設置網頁默認編碼 
Settings.setDefaultTextEncodingName(encoding); 
有關WebSettings更多的設置選項,請參考Android SDK的幫助文檔。
下面我們結合實例,簡單介紹下通過WebView訪問網頁的三種常用方法:loadUrl、loadData以及loadDataWithBaseURL。
1、public void loadUrl(String url)
loadUrl方法很簡單,隻需要提供一個參數,即url地址,就可以進行自動加載。
該方法適用於加載網頁、網頁圖片、本地網頁以及本地圖片。具體參考如下:
view plainprint?
WebView wv = (WebView) findViewById(R.id.wv1); 
wv.requestFocus(); //請求焦點 
wv.getSettings().setJavaScriptEnabled(true); //設置是否支持JavaScript 
wv.getSettings().setSupportZoom(true); //設置是否支持縮放 
wv.getSettings().setBuiltInZoomControls(true); //設置是否顯示內建縮放工具 
wv.getSettings().setSavePassword(true); //設置是否保存密碼 
wv.loadUrl("http://www.baidu.com/");    //加載在線網頁 
wv.loadUrl("/wp-content/images1/20181004/20110930020727775272.jpg"); //加載在線圖片  
wv.loadUrl("file:///mnt/sdcard/Google.html"); //加載本地網頁(SD卡根目錄下) 
wv.loadUrl("/wp-content/images1/20181004/20110930021037759273.jpg");  //加載本地圖片(SD卡根目錄下) 
註:1、後面四句包含“loadUrl”的語句分別對應加載在線網頁/在線圖片/本地網頁/本地圖片四中情況,每種情況下隻取其一。
2、對於sdcard中的本地網頁和圖片等資源,一般url地址以 “file:///mnt/sdcard/”開頭;
3、對於android項目中assets目錄下的本地網頁和圖片等資源, 一般url地址以 “ file:///android_asset/ "開頭;

2、public void loadData(String data, String mimeType, String encoding)
loadData將指定的data加載到WebView中。由於本身機制的原因,該方法不能加載來自網絡的內容。其中,data內的html代碼中若含有以下四種字符'#', '%', '\', '?',則應該依次替換為%23, %25, %27, %3f 。 參數mimeType,即MIME Type,也就是該資源的媒體類型,可以取值text/html, image/jpeg等。參數 encoding為網頁編碼,可以取值utf-8, base64等。具體參考如下:
view plainprint?
final String mimeType = "text/html";   // image/jpeg  etc 
final String encoding = "utf-8";   //base64  etc 
String data = null; 
 
WebView wv = (WebView) findViewById(R.id.wv7); 
data = "<a href ='http://www.baidu.com/'>百度</a>";  //加載本地網頁Html代碼 
data = "loadData方法加載本地圖片<img src ='/wp-content/images1/20181004/20110930021037759273.jpg' />";   //加載本地圖片(SD卡根目錄下) 
wv.requestFocus(); 
wv.getSettings().setDefaultTextEncodingName(encoding);  //對於data中含有中文字符的,必須加上這個設置,否則會亂碼。 
wv.loadData(data, mimeType, encoding); 
註:1、中間兩個data字段分別對應加載本地網頁代碼和本地圖片的情況;
2、經過實際操作,發現前面文本超級鏈接的html代碼可以正常顯示。點擊超級鏈接,調用外部web瀏覽器打開鏈接。
3、經過實際操作,發現後面的本地圖片其實加載不上來,無法顯示。
4、loadData方法中,如果data含有中文字符,則需要調用 setDefaultTextEncodingName方法來設置WebView的text指定編碼。詳情請點擊閱讀:《關於WebView的loadData方法》

3、public void loadDataWithBaseURL(String baseUrl, String data,  String mimeType, String encoding, String historyUrl)
loadDataWithBaseURL方法也是將指定的data加載到WebView中。由於本身機制的原因,該方法不能加載來自網絡的內容。參數mimeType,即MIME Type,也就是該資源的媒體類型,可以取值text/html, image/jpeg等。參數 encoding為網頁編碼,可以取值utf-8, base64等。參數baseUrl為基礎目錄,data中的文件路徑可以是相對於基礎目錄的相對目錄。例如:文件/wp-content/images1/20181004/20110930021037759273.jpg,baseUrl為file:///mnt/sdcard/,那麼data中就可以直接引用圖片 Googles_13th_Birthday-2011-hp.jpg瞭。參數historyUrl用作歷史記錄的字段,可以設置為null。具體參考如下:
view plainprint?
final String mimeType = "text/html";   // image/jpeg  etc 
final String encoding = "utf-8";   //base64  etc 
 
String baseUrl = null; 
String data = null; 
 
WebView wv = (WebView) findViewById(R.id.wv9); 
baseUrl = "file:///mnt/sdcard/";   //網頁基礎目錄 
data = "<a href='Google.html'>谷歌</a>";  //加載本地網頁Html代碼(SD卡根目錄下) 
data = "<img src ='Googles_13th_Birthday-2011-hp.jpg' />";  //:加載本地圖片(SD卡根目錄下) 
wv.requestFocus();                 
wv.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, null); 
註:中間兩個data字段分別對應加載本地網頁和本地圖片的情況。經過測試,網頁和本地圖片都能正常加載。


下面我們進行實例代碼解析:
res-layout-webview_1.xml
view plainprint?
<?xml version="1.0" encoding="utf-8"?> 
 
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"  
    android:layout_height="wrap_content" 
    android:orientation="vertical"> 
     
    <!–一個線性垂直佈局,包含十個WebView對象 –> 
    <LinearLayout 
        android:orientation="vertical" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"> 
         
        <WebView android:id="@+id/wv1" 
            android:layout_height="wrap_content" 
            android:layout_width="match_parent" 
            /> 
             
        <WebView android:id="@+id/wv2" 
            android:layout_height="wrap_content" 
            android:layout_width="match_parent" 
            /> 
             
        <WebView android:id="@+id/wv3" 
            android:layout_height="wrap_content" 
            android:layout_width="match_parent" 
            /> 
             
        <WebView android:id="@+id/wv4" 
            android:layout_height="wrap_content" 
            android:layout_width="match_parent" 
            /> 
             
        <WebView android:id="@+id/wv5" 
            android:layout_height="wrap_content" 
            android:layout_width="match_parent" 
            /> 
             
        <WebView android:id="@+id/wv6" 
            android:layout_height="wrap_content" 
            android:layout_width="match_parent" 
            /> 
     
        <WebView android:id="@+id/wv7" 
            android:layout_height="wrap_content" 
            android:layout_width="match_parent" 
            /> 
             
        <WebView android:id="@+id/wv8" 
            android:layout_height="wrap_content" 
            android:layout_width="match_parent" 
            /> 
             
        <WebView android:id="@+id/wv9" 
            android:layout_height="wrap_content" 
            android:layout_width="match_parent" 
            /> 
             
        <WebView android:id="@+id/wv10" 
            android:layout_height="wrap_content" 
            android:layout_width="match_parent" 
            /> 
    </LinearLayout> 
         
 </ScrollView>         

src-com.example.android.apis.view-WebView1.java
view plainprint?
package com.example.android.apis.view; 
 
import android.app.Activity; 
import android.os.Bundle; 
import android.webkit.WebView; 
 
import com.example.android.apis.R; 
 
 
/**
 *<pre>WebView組件(mWebView)有一個輔助類叫WebSettings,它管理WebView的設置狀態。
 *該對象可以通過WebView.getSettings()方法獲得。
 
 *得到WebSettings對象,設置支持Javascript的參數
 *mWebView.getSettings().setJavaScriptEnabled(true);
 
 *設置可以支持縮放
 *mWebView.getSettings().setSupportZoom(true);
 
 *設置默認縮放方式尺寸是far
 *mWebView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
 
 *設置允許訪問文件數據
 *mWebView.getSettings().setAllowFileAccess(true);
 
 *設置是否保存密碼
 *mWebView.getSettings().setSavePassword(true);
  
 *設置網頁默認編碼
 *mWebView.getSettings().setDefaultTextEncodingName(encoding);
 
 *設置出現縮放工具
 *mWebView.getSettings().setBuiltInZoomControls(true);</pre>
 * 
 */ 
public class WebView1 extends Activity { 
     
    @Override 
    public void onCreate(Bundle icicle) { 
        super.onCreate(icicle); 
         
        setContentView(R.layout.webview_1); 
         
        final String mimeType = "text/html";   // image/jpeg  etc 
        final String encoding = "utf-8";   //base64  etc 
 
        WebView wv = null; 
        String baseUrl = null; 
        String data = null; 
 
        //加載在線網頁 
        wv = (WebView) findViewById(R.id.wv1); 
        wv.requestFocus(); //請求焦點 
        wv.getSettings().setJavaScriptEnabled(true); //設置是否支持JavaScript 
        wv.getSettings().setSupportZoom(true); //設置是否支持縮放 
        wv.getSettings().setBuiltInZoomControls(true); //設置是否顯示內建縮放工具 
        wv.getSettings().setSavePassword(true); //設置是否保存密碼 
        wv.loadUrl("http://www.baidu.com/"); 
         
        //加載在線圖片        
        wv = (WebView) findViewById(R.id.wv2); 
        wv.requestFocus();         
        wv.loadUrl("/wp-content/images1/20181004/20110930020727775272.jpg"); 
      
        //加載本地網頁(SD卡根目錄下) 
        wv = (WebView) findViewById(R.id.wv3); 
        wv.requestFocus();                 
        wv.loadUrl("file:///mnt/sdcard/Google.html"); 
     
        //加載本地圖片(SD卡根目錄下) 
        wv = (WebView) findViewById(R.id.wv4); 
        wv.requestFocus();                 
        wv.loadUrl("/wp-content/images1/20181004/20110930021037759273.jpg"); 
 
        //加載在線網頁失敗,把網頁地址當作字符串處理 
        wv = (WebView) findViewById(R.id.wv5); 
        data = "http://www.baidu.com/"; 
        wv.requestFocus();                 
        wv.loadData(data, mimeType, encoding); 
        
        //加載在線圖片失敗,隻顯示一個默認圖片進行替換                
        wv = (WebView) findViewById(R.id.wv6); 
        data = "/wp-content/images1/20181004/20110930020727775272.jpg";  
        wv.requestFocus();                 
        wv.loadData(data, mimeType, encoding); 
 
        //加載本地網頁Html代碼,可以顯示超級鏈接。點擊,調用外部瀏覽器打開該鏈接。 
        wv = (WebView) findViewById(R.id.wv7); 
        data = "<a href ='http://www.baidu.com/'>百度</a>"; 
        wv.requestFocus(); 
        wv.getSettings().setDefaultTextEncodingName(encoding);  //對於data中含有中文字符的,必須加上這個設置,否則會亂碼。 
        wv.loadData(data, mimeType, encoding); 
    
        //加載本地圖片(SD卡根目錄下) 
        wv = (WebView) findViewById(R.id.wv8); 
        data = "loadData方法加載本地圖片<img src ='/wp-content/images1/20181004/20110930021037759273.jpg' />"; 
        wv.requestFocus();        
        wv.getSettings().setDefaultTextEncodingName(encoding); //對於data中含有中文字符的,必須加上這個設置,否則會亂碼。 
        wv.loadData(data, mimeType, encoding); 
         
        //loadDataWithBaseURL方法:加載本地網頁Html代碼(SD卡根目錄下),可以顯示超級鏈接。點擊直接顯示本地網頁內容。 
        wv = (WebView) findViewById(R.id.wv9); 
        baseUrl = "file:///mnt/sdcard/";   //網頁基礎目錄 
        data = "<a href='Google.html'>谷歌</a>";  //相對路徑,相對基礎目錄而言 
        wv.requestFocus();                 
        wv.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, null); 
         
        //loadDataWithBaseURL方法:加載本地圖片(SD卡根目錄下),默認直接顯示該圖片 
        wv = (WebView) findViewById(R.id.wv10); 
        baseUrl = "file:///mnt/sdcard/";  //網頁基礎目錄 
        data = "<img src ='Googles_13th_Birthday-2011-hp.jpg' />";  //相對路徑,相對基礎目錄而言 
        wv.requestFocus();                 
        wv.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, null);          
    } 

關於WebView更詳細的用法介紹,請點擊閱讀:《超好的webview學習資料》

預覽效果:

作者“snowdream”

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *