WebView的簡(jiǎn)單使用
有時(shí)候我們可能會(huì)碰到一些比較特殊的需求,比如說(shuō)要求在應(yīng)用程序里展示一些網(wǎng)頁(yè)。相信每個(gè)人都知道,加載和顯示網(wǎng)頁(yè)通常都是瀏覽器的任務(wù),但是需求里又明確指出,不允許打開(kāi)系統(tǒng)瀏覽器,而我們當(dāng)然也不可能自己去編寫(xiě)一個(gè)瀏覽器出來(lái),這時(shí)應(yīng)該怎么辦呢?
不用擔(dān)心,Android 早就已經(jīng)考慮到了這種需求,并提供了一個(gè) WebView控件,借助它我們就可以在自己的應(yīng)用程序里嵌入一個(gè)瀏覽器,從而非常輕松地展示各種各樣的網(wǎng)頁(yè)。
一、WebView通過(guò)Url加載網(wǎng)頁(yè)
WebView是View的子類(lèi),能夠讓一個(gè)網(wǎng)頁(yè)內(nèi)容看起來(lái)像是你應(yīng)用程序的一部分一樣。它只提供頁(yè)面顯示的功能,默認(rèn)情況下不提供瀏覽器應(yīng)具備的導(dǎo)航等功能。
首先我們來(lái)看一下WebView的簡(jiǎn)單使用:
1、獲得WebView的實(shí)例;
2、調(diào)用WebView類(lèi)中的loadUrl(String url)方法,加載指定的網(wǎng)址;
3、在工程的清單文件中添加上網(wǎng)權(quán)限
清單文件中的上網(wǎng)權(quán)限:
Java代碼:
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("http://www.baidu.com");
}
}
當(dāng)運(yùn)行上面的代碼后你會(huì)發(fā)現(xiàn),程序會(huì)啟動(dòng)默認(rèn)的瀏覽器來(lái)打開(kāi)我們指定的網(wǎng)址,但是我們所希望的是在當(dāng)前的應(yīng)用中顯示網(wǎng)頁(yè),那下面給大家介紹WebViewClient這個(gè)類(lèi)以及其中的一些常用方法。WebViewClient類(lèi)主要是用來(lái)幫助WebView處理各種通知、請(qǐng)求事件的,這其中有一些常用方法:
(1) shouldOverrideUrlLoading(WebView view, String url),當(dāng)加載的網(wǎng)頁(yè)需要重定向的時(shí)候就會(huì)回調(diào)這個(gè)函數(shù)。
參數(shù)1:WebView對(duì)象
參數(shù)2:需要加載的url地址
返回值:return true意味著主程序接管網(wǎng)頁(yè)加載,讓我們自己操作,如果返回false讓webview自己處理。
(2) onPageStarted(WebView view, String url, Bitmap favicon), 開(kāi)始加載頁(yè)面的回調(diào);
(3) onPageFinished(WebView view, String url), 加載完成的回調(diào)。
當(dāng)我們需要重寫(xiě)上述方法時(shí)需要調(diào)用WebView中setWebViewClient (WebViewClient client)方法,下面在原來(lái)代碼更改為用Webview控件顯示網(wǎng)頁(yè),代碼如下:
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);
//設(shè)置Webview
vb.setWebViewClient(new WebViewClient(){
@Override
//重寫(xiě)shouldOverrideUrlLoading方法
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return false;
}
});
vb.loadUrl("http://www.baidu.com");
}
}
運(yùn)行效果如下:
二、WebView加載HTML字符串
有時(shí)候我們的webview可能只是html片段,而不是一個(gè)完整的網(wǎng)頁(yè),事實(shí)上絕大多數(shù)時(shí)候都是如此,完整的網(wǎng)頁(yè)無(wú)需做成應(yīng)用,而直接在瀏覽器訪(fǎng)問(wèn)。
這種情況我們使用 LoadData 或者 loadDataWithBaseURL方法,后者用的最多,這里需要調(diào)用WebView中的loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)方法:
參數(shù)1:作為該網(wǎng)頁(yè)的base page??稍O(shè)置為null。
參數(shù)2:html字符串
參數(shù)3:類(lèi)型,html數(shù)據(jù)需要設(shè)置為“text/html”
參數(shù)4:字符集,如果有中文需要設(shè)置為“utf-8”
參數(shù)5:歷史網(wǎng)頁(yè)的url,可設(shè)置為null。
下面是一個(gè)簡(jiǎn)單的實(shí)例,代碼如下:
public class MainActivity extends ActionBarActivity {
WebView wb;
String data = "" +
"" +
"敢問(wèn)路在何方,路就在腳下" +
"";
@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);
}
}
運(yùn)行結(jié)果如下:
三、WebView中JavaScript與Andorid中java方法互調(diào)
隨著h5在移動(dòng)端的普及,移動(dòng)端對(duì)webview的使用越來(lái)越平凡,有的界面也不僅僅局限于網(wǎng)頁(yè)的顯示,很多時(shí)候就要涉及到webview與javascript代碼之間的交互,這對(duì)于移動(dòng)端工程師和web端工程師都是一個(gè)挑戰(zhàn),下面來(lái)總結(jié)下它們之間的交互和注意事項(xiàng)。
先說(shuō)JavaScript中調(diào)用android代碼,默認(rèn)情況下,從WebView的界面中無(wú)法觸發(fā)html中的JavaScript腳本,我們需要使能JavaScript功能,這樣WebView才有能力處理html中的JavaScript腳本。使能JavaScript對(duì)應(yīng)的方法為setJavaScriptEnabled(boolean flag),該方法并不是WebView類(lèi)中方法,它的使用過(guò)程如下:
(1)調(diào)用WebView中g(shù)etSettings()方法獲取WebSettings對(duì)象;
(2)調(diào)用WebSettings對(duì)象的實(shí)例方法setJavaScriptEnabled。
當(dāng)參數(shù)設(shè)置為true時(shí),表示使能JavaScript。
要想完成JavaScript調(diào)用android代碼,還需介紹一個(gè)方法,WebView類(lèi)中的addJavascriptInterface(Object object, String name),
參數(shù)1:供JavaScript調(diào)用的對(duì)象
參數(shù)2:在JavaScript中使用的名字
該方法是這里的重點(diǎn),將一個(gè)java對(duì)象綁定到一個(gè)javascript對(duì)象中,javascript對(duì)象名就是interfaceName,作用域是Global。
我們可以在JavaScript中調(diào)用Java中的函數(shù)的步驟如下:
(1)創(chuàng)建WebView對(duì)象
(2)使能WebView對(duì)象的JavaScript功能
(3)創(chuàng)建類(lèi),該類(lèi)作為JavaScript調(diào)用Java代碼的接口
(4)在該類(lèi)中暴露方法,供JavaScript調(diào)用,注意:API 17之后的版本需 要添加注解@JavascriptInterface。
(5)將接口類(lèi)對(duì)象添加給WebView
addJavascriptInterface(Object, String)
(6)在html中添加JavaScript代碼,調(diào)用Java對(duì)象中暴露的方法。
具體代碼如下:
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);
//綁定對(duì)應(yīng)java對(duì)象到JavaScript
wb.addJavascriptInterface(new MyJavaScript(this), "MyJavaScript");
//加載本地文件
wb.loadUrl("file:///android_asset/my.html");
}
}
本地文件放在asset目錄下,調(diào)用時(shí)路徑格式為file:///android_asset/xx。
自定義JavaScript調(diào)用java的類(lèi):
public class MyJavaScript {
Context context;
public MyJavaScript(Context context) {
super();
this.context = context;
}
//供JavaScript調(diào)用的java方法,此處須與JavaScript中script標(biāo)簽中調(diào)用的方法名一致
public void ShowToast(String str){
Toast.makeText(context, str, Toast.LENGTH_SHORT).show();
}
}
本地HTML文件:
//輸出內(nèi)容有中文時(shí)加上
type="button" id="button1" onclick="callAndroid();" >
點(diǎn)擊js調(diào)用java代碼
該HTML文件顯示的頁(yè)面只有一個(gè)“點(diǎn)擊js調(diào)用java代碼”的按鈕,點(diǎn)擊該按鈕后會(huì)觸發(fā)script中定義的點(diǎn)擊事件方法callAndroid(),該方法會(huì)調(diào)用java代碼中相對(duì)應(yīng)的方法,從而實(shí)現(xiàn)JavaScript中調(diào)用android代碼。運(yùn)行效果如下,點(diǎn)擊按鈕后會(huì)彈出一個(gè)Toast。