WebView的簡單使用(yong)
時間:2018-09-26 來源:未知
有時候我們可(ke)能會碰到一些比較特殊(shu)的需求,比如說要求在應用程(cheng)序里展示一些網頁。相信(xin)每個(ge)人(ren)都知道,加(jia)載和(he)顯示網頁通常都是瀏(liu)覽(lan)(lan)器(qi)的任務,但是需求里又(you)明(ming)確指(zhi)出(chu),不(bu)允許打開(kai)系統瀏(liu)覽(lan)(lan)器(qi),而我們當(dang)然也不(bu)可(ke)能自己去編寫(xie)一個(ge)瀏(liu)覽(lan)(lan)器(qi)出(chu)來,這(zhe)時應該怎么辦呢(ni)?
不(bu)用(yong)擔心,Android 早(zao)就已(yi)經(jing)考慮到了這種需求,并提供(gong)了一(yi)個(ge) WebView控件,借助它(ta)我們就可(ke)以在自(zi)己(ji)的應用(yong)程序(xu)里嵌入(ru)一(yi)個(ge)瀏(liu)覽器,從而非常輕松地展示各(ge)種各(ge)樣(yang)的網頁。
一、WebView通過Url加載網頁
WebView是View的子類(lei),能夠(gou)讓一(yi)個網頁內容看起(qi)來(lai)像是你應(ying)用程(cheng)序的一(yi)部分一(yi)樣。它只提(ti)供(gong)頁面顯示的功能,默認(ren)情(qing)況下不提(ti)供(gong)瀏覽(lan)器應(ying)具備(bei)的導航等功能。
首先(xian)我們(men)來看一下WebView的簡單使用:
1、獲得WebView的實例(li);
2、調(diao)用WebView類(lei)中的loadUrl(String url)方法,加載指定(ding)的網址;
3、在(zai)工程的清(qing)單(dan)文件(jian)中添加上網權限
清(qing)單文件中的上網權限:
Java代碼(ma):
public class MainActivity extends Activity {
WebView vb;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vb = (WebView) findViewById(R.id.webView1);
vb.loadUrl("//www.baidu.com");
}
}
當(dang)運行上面的代(dai)碼后你會發現,程(cheng)序會啟動默認的瀏覽器來打開我(wo)們指(zhi)定的網(wang)址(zhi),但是(shi)(shi)我(wo)們所希望的是(shi)(shi)在當(dang)前(qian)的應(ying)用中顯示網(wang)頁,那下面給(gei)大家介紹(shao)WebViewClient這個類以及其(qi)中的一些(xie)常用方法。WebViewClient類主要是(shi)(shi)用來幫助WebView處(chu)理各(ge)種通知、請求(qiu)事件的,這其(qi)中有(you)一些(xie)常用方法:
(1) shouldOverrideUrlLoading(WebView view, String url),當加(jia)載的網(wang)頁需要(yao)重定向(xiang)的時候就會回調(diao)這個函(han)數(shu)。
參數1:WebView對象
參(can)數(shu)2:需(xu)要加載的url地址(zhi)
返(fan)回值:return true意味著主程序接管網頁加(jia)載,讓我們自己(ji)操作,如果返(fan)回false讓webview自己(ji)處理。
(2) onPageStarted(WebView view, String url, Bitmap favicon), 開始加載頁面的回(hui)調;
(3) onPageFinished(WebView view, String url), 加載完成的回調。
當我們(men)需(xu)要(yao)重寫上述方(fang)法(fa)時需(xu)要(yao)調用WebView中setWebViewClient (WebViewClient client)方(fang)法(fa),下(xia)面(mian)在原來(lai)代(dai)(dai)碼(ma)更(geng)改(gai)為用Webview控件顯示網頁,代(dai)(dai)碼(ma)如下(xia):
public class MainActivity extends Activity {
WebView vb;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vb = (WebView) findViewById(R.id.webView1);
//設置Webview
vb.setWebViewClient(new WebViewClient(){
@Override
//重寫shouldOverrideUrlLoading方法(fa)
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return false;
}
});
vb.loadUrl("//www.baidu.com");
}
}
運行(xing)效果如下:

二、WebView加載(zai)HTML字符串(chuan)
有時(shi)候我們(men)的webview可能只是(shi)html片段(duan),而不是(shi)一個完(wan)整的網頁,事(shi)實上(shang)絕大多數(shu)時(shi)候都(dou)是(shi)如此,完(wan)整的網頁無需(xu)做成(cheng)應(ying)用,而直接在(zai)瀏覽器訪問。
這種情況我們使(shi)用(yong) LoadData 或者(zhe) loadDataWithBaseURL方(fang)法,后者(zhe)用(yong)的多,這里需要(yao)調用(yong)WebView中的loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)方(fang)法:
參(can)數1:作(zuo)為該網(wang)頁的base page。可設置為null。
參數2:html字符串
參數3:類型,html數據需(xu)要設置為“text/html”
參數4:字符集,如果有中文需要設置為“utf-8”
參數(shu)5:歷史(shi)網頁的url,可設置為null。
下面是一個簡單的(de)實例,代碼如下:
public class MainActivity extends ActionBarActivity {
WebView wb;
String data = "" +
"" +
"敢問路在何方,路就在腳下" +
"";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wb = (WebView) findViewById(R.id.webView1);
wb.loadDataWithBaseURL(null, data, "text/html", "utf-8", null);
}
}
運行結(jie)果如下:

三、WebView中JavaScript與Andorid中java方法互調(diao)
隨著h5在移(yi)動端的(de)(de)普(pu)及,移(yi)動端對(dui)webview的(de)(de)使用(yong)越(yue)來(lai)越(yue)平凡,有的(de)(de)界面也不僅僅局(ju)限(xian)于(yu)網頁(ye)的(de)(de)顯示,很多時候就(jiu)要(yao)涉及到webview與javascript代碼之間的(de)(de)交互(hu),這對(dui)于(yu)移(yi)動端工程師(shi)和web端工程師(shi)都是一個挑(tiao)戰(zhan),下(xia)面來(lai)總結下(xia)它們之間的(de)(de)交互(hu)和注(zhu)意事項。
先說JavaScript中(zhong)調(diao)用android代碼,默認情況下(xia),從WebView的(de)界面(mian)中(zhong)無法觸發html中(zhong)的(de)JavaScript腳(jiao)本,我(wo)們需(xu)要使(shi)能(neng)JavaScript功能(neng),這樣(yang)WebView才有(you)能(neng)力(li)處理(li)html中(zhong)的(de)JavaScript腳(jiao)本。使(shi)能(neng)JavaScript對(dui)應(ying)的(de)方法為setJavaScriptEnabled(boolean flag),該方法并不是WebView類中(zhong)方法,它的(de)使(shi)用過程如下(xia):
(1)調用(yong)WebView中getSettings()方法獲(huo)取WebSettings對象;
(2)調(diao)用(yong)WebSettings對象的(de)實例(li)方法(fa)setJavaScriptEnabled。
當參數設置為true時(shi),表(biao)示(shi)使能JavaScript。
要想完成(cheng)JavaScript調用android代碼(ma),還需介紹一個方法,WebView類(lei)中的(de)addJavascriptInterface(Object object, String name),
參數1:供JavaScript調(diao)用的對象
參數2:在JavaScript中使用的名字
該方法是這里的重點,將(jiang)一個java對象(xiang)綁(bang)定到一個javascript對象(xiang)中,javascript對象(xiang)名就(jiu)是interfaceName,作用域是Global。
我們可以(yi)在JavaScript中(zhong)調用(yong)Java中(zhong)的(de)函數的(de)步驟如下(xia):
(1)創建WebView對(dui)象
(2)使能WebView對(dui)象的JavaScript功能
(3)創(chuang)建類(lei),該類(lei)作為JavaScript調用Java代碼(ma)的接口
(4)在(zai)該(gai)類(lei)中暴露方法,供JavaScript調用,注意:API 17之后的版本需 要添加注解@JavascriptInterface。
(5)將接口類對象添加給(gei)WebView
addJavascriptInterface(Object, String)
(6)在html中添加JavaScript代(dai)碼,調用Java對象中暴露的方法。
具體(ti)代碼如(ru)下:
MainActivity:
public class MainActivity extends ActionBarActivity {
WebView wb;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wb = (WebView) findViewById(R.id.webView1);
//使能JavaScript
wb.getSettings().setJavaScriptEnabled(true);
//綁定對(dui)(dui)應(ying)java對(dui)(dui)象到JavaScript
wb.addJavascriptInterface(new MyJavaScript(this), "MyJavaScript");
//加載本地(di)文件
wb.loadUrl("file:///android_asset/my.html");
}
}
本地文件放在asset目錄下,調用時路徑格式為file:///android_asset/xx。
自定義JavaScript調(diao)用java的(de)類:
public class MyJavaScript {
Context context;
public MyJavaScript(Context context) {
super();
this.context = context;
}
//供JavaScript調用(yong)的java方(fang)法(fa)(fa),此處須與(yu)JavaScript中script標簽中調用(yong)的方(fang)法(fa)(fa)名一致
public void ShowToast(String str){
Toast.makeText(context, str, Toast.LENGTH_SHORT).show();
}
}
本地HTML文件(jian):
//輸出內容有中文時(shi)加上
type="button" id="button1" onclick="callAndroid();" >
點(dian)擊js調用java代碼
該(gai)HTML文(wen)件(jian)顯(xian)示的頁面只有(you)一個“點(dian)擊(ji)js調(diao)(diao)用(yong)(yong)java代(dai)碼”的按鈕,點(dian)擊(ji)該(gai)按鈕后會(hui)觸發script中(zhong)定(ding)義的點(dian)擊(ji)事件(jian)方法callAndroid(),該(gai)方法會(hui)調(diao)(diao)用(yong)(yong)java代(dai)碼中(zhong)相對應的方法,從而實現JavaScript中(zhong)調(diao)(diao)用(yong)(yong)android代(dai)碼。運(yun)行效(xiao)果如(ru)下,點(dian)擊(ji)按鈕后會(hui)彈出一個Toast:
