android WebView組件使用總結(jié)
更新時間：2012年12月28日 16:27:56 作者：
瀏覽器控件是每個開發(fā)環(huán)境都具備的，這為馬甲神功提供了用武之地，windows的有webbrowser，android和ios都有webview;本篇主要介紹android的webview之強(qiáng)大,感興趣的朋友可以研究下
瀏覽器控件是每個開發(fā)環(huán)境都具備的，這為馬甲神功提供了用武之地，windows的有webbrowser，android和ios都有webview。只是其引擎不同，相對于微軟的webbrowser，android及ios的webview的引擎都是webkit，對Html5提供支持。本篇主要介紹android的webview之強(qiáng)大。
webview組件如何使用
1)添加權(quán)限：AndroidManifest.xml中必須使用許可"android.permission.INTERNET",否則會出Web page not available錯誤。
2)在要Activity中生成一個WebView組件：WebView webView = new WebView(this);或者可以在activity的layout文件里添加webview控件：
<WebView
android:id="@+id/wv"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="@string/hello"
/>
3)設(shè)置WebView基本信息：
如果訪問的頁面中有Javascript，則webview必須設(shè)置支持Javascript。
webview.getSettings().setJavaScriptEnabled(true);
觸摸焦點(diǎn)起作用
requestFocus();
取消滾動條
this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);
4)設(shè)置WevView要顯示的網(wǎng)頁：
互聯(lián)網(wǎng)用：webView.loadUrl("http://www.google.com");
本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets文件中。
5)如果希望點(diǎn)擊鏈接由自己處理，而不是新開Android的系統(tǒng)browser中響應(yīng)該鏈接。給WebView添加一個事件監(jiān)聽對象（WebViewClient)并重寫其中的一些方法：
shouldOverrideUrlLoading：對網(wǎng)頁中超鏈接按鈕的響應(yīng)。當(dāng)按下某個連接時WebViewClient會調(diào)用這個方法，并傳遞參數(shù)：按下的url。比如當(dāng)webview內(nèi)嵌網(wǎng)頁的某個數(shù)字被點(diǎn)擊時，它會自動認(rèn)為這是一個電話請求，會傳遞url：tel:123,如果你不希望如此可通過重寫shouldOverrideUrlLoading函數(shù)解決：
public boolean shouldOverrideUrlLoading(WebView view,String url){
if(url.indexOf("tel:")<0){//頁面上有數(shù)字會導(dǎo)致連接電話
view.loadUrl(url);
}
return true;
}
另外還有其他一些可重寫的方法
1，接收到Http請求的事件
onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm)
2，打開鏈接前的事件
public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; }
這個函數(shù)我們可以做很多操作，比如我們讀取到某些特殊的URL，于是就可以不打開地址，取消這個操作，進(jìn)行預(yù)先定義的其他操作，這對一個程序是非常必要的。
3，載入頁面完成的事件
public void onPageFinished(WebView view, String url){ }
同樣道理，我們知道一個頁面載入完成，于是我們可以關(guān)閉loading條，切換程序動作。
4，載入頁面開始的事件
public void onPageStarted(WebView view, String url, Bitmap favicon) { }
這個事件就是開始載入頁面調(diào)用的，通常我們可以在這設(shè)定一個loading的頁面，告訴用戶程序在等待網(wǎng)絡(luò)響應(yīng)。
通過這幾個事件，我們可以很輕松的控制程序操作，一邊用著瀏覽器顯示內(nèi)容，一邊監(jiān)控著用戶操作實(shí)現(xiàn)我們需要的各種顯示方式，同時可以防止用戶產(chǎn)生誤操作。
6)如果用webview點(diǎn)鏈接看了很多頁以后，如果不做任何處理，點(diǎn)擊系統(tǒng)“Back”鍵，整個瀏覽器會調(diào)用finish()而結(jié)束自身，如果希望瀏覽的網(wǎng)頁回退而不是退出瀏覽器，需要在當(dāng)前Activity中處理并消費(fèi)掉該Back事件。
覆蓋Activity類的onKeyDown(int keyCoder,KeyEvent event)方法。
public boolean onKeyDown(int keyCoder,KeyEvent event){
if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){
webview.goBack(); //goBack()表示返回webView的上一頁面
return true;
}
return false;
}
Webview與js交互
Webview與js的雙向交互才是android的webview強(qiáng)大所在，也是馬甲精神能夠徹底執(zhí)行的基礎(chǔ)保障。
首先，webview可以定義一個在其內(nèi)嵌頁面中可以觸發(fā)的事件
wv.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
private final class DemoJavaScriptInterface
{
DemoJavaScriptInterface(){}
public void clickonAndroid( final String order){
mHandler.post(newRunnable(){
@Override
public void run(){
jsonText="{"name":""+order+""}";
wv.loadUrl("javascript:wave("+jsonText+")");
}
});
}
}
通過以上代碼，即可實(shí)現(xiàn)在其內(nèi)嵌網(wǎng)頁中觸發(fā)window.demo.clickOnAndroid(str)事件并傳參數(shù)str給webview。Webview接收到str之后，可以通過以上代碼觸發(fā)其內(nèi)嵌頁面中的js函數(shù)wave(str)。這樣就可以實(shí)現(xiàn)網(wǎng)頁觸發(fā)webview的事件并傳參數(shù)，webview接收參數(shù)并調(diào)用js函數(shù)。
下面看我的Html腳本：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
function toclient()
{
var order=$("#val").val();
window.demo.clickonAndroid(order);
}
function wave(str){
//alert(str.name);
$("#fromclient").text(str.name);
}
</script>
</head>
<body>這是一個html頁面
<br/>
輸入一個字符串：<br/>
<input id="val" />
<input type="submit" value="點(diǎn)擊提交給客戶端"
onclick="toclient();"/>
<br />
顯示返回：<label id="fromclient"></label>
</body>
</html>
通過腳本看到wave（str）函數(shù)是負(fù)責(zé)將原來傳給webview的數(shù)據(jù)重新拿回頁面，效果圖如下：
另外，如果你想獲取頁面的一些處理數(shù)據(jù)并交給webview客戶端處理，可在wave函數(shù)里將數(shù)據(jù)alert，然后webview中重寫WebChromeClient的onJsAlert函數(shù)，具體代碼如下
wv.setWebChromeClient(new MyWebChromeClient());
final class MyWebChromeClient extends WebChromeClient{
@Override
public booleanonJsAlert(WebView view, String url, String message, final JsResult result) {
//message就是wave函數(shù)里alert的字符串，這樣你就可以在android客戶端里對這個數(shù)據(jù)進(jìn)行處理
result.confirm();
}
return true;
}
webview組件如何使用
1)添加權(quán)限：AndroidManifest.xml中必須使用許可"android.permission.INTERNET",否則會出Web page not available錯誤。
2)在要Activity中生成一個WebView組件：WebView webView = new WebView(this);或者可以在activity的layout文件里添加webview控件：
復(fù)制代碼 代碼如下:
<WebView
android:id="@+id/wv"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="@string/hello"
/>
3)設(shè)置WebView基本信息：
如果訪問的頁面中有Javascript，則webview必須設(shè)置支持Javascript。
webview.getSettings().setJavaScriptEnabled(true);
觸摸焦點(diǎn)起作用
requestFocus();
取消滾動條
this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);
4)設(shè)置WevView要顯示的網(wǎng)頁：
互聯(lián)網(wǎng)用：webView.loadUrl("http://www.google.com");
本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets文件中。
5)如果希望點(diǎn)擊鏈接由自己處理，而不是新開Android的系統(tǒng)browser中響應(yīng)該鏈接。給WebView添加一個事件監(jiān)聽對象（WebViewClient)并重寫其中的一些方法：
shouldOverrideUrlLoading：對網(wǎng)頁中超鏈接按鈕的響應(yīng)。當(dāng)按下某個連接時WebViewClient會調(diào)用這個方法，并傳遞參數(shù)：按下的url。比如當(dāng)webview內(nèi)嵌網(wǎng)頁的某個數(shù)字被點(diǎn)擊時，它會自動認(rèn)為這是一個電話請求，會傳遞url：tel:123,如果你不希望如此可通過重寫shouldOverrideUrlLoading函數(shù)解決：
復(fù)制代碼 代碼如下:
public boolean shouldOverrideUrlLoading(WebView view,String url){
if(url.indexOf("tel:")<0){//頁面上有數(shù)字會導(dǎo)致連接電話
view.loadUrl(url);
}
return true;
}
另外還有其他一些可重寫的方法
1，接收到Http請求的事件
onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm)
2，打開鏈接前的事件
public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; }
這個函數(shù)我們可以做很多操作，比如我們讀取到某些特殊的URL，于是就可以不打開地址，取消這個操作，進(jìn)行預(yù)先定義的其他操作，這對一個程序是非常必要的。
3，載入頁面完成的事件
public void onPageFinished(WebView view, String url){ }
同樣道理，我們知道一個頁面載入完成，于是我們可以關(guān)閉loading條，切換程序動作。
4，載入頁面開始的事件
public void onPageStarted(WebView view, String url, Bitmap favicon) { }
這個事件就是開始載入頁面調(diào)用的，通常我們可以在這設(shè)定一個loading的頁面，告訴用戶程序在等待網(wǎng)絡(luò)響應(yīng)。
通過這幾個事件，我們可以很輕松的控制程序操作，一邊用著瀏覽器顯示內(nèi)容，一邊監(jiān)控著用戶操作實(shí)現(xiàn)我們需要的各種顯示方式，同時可以防止用戶產(chǎn)生誤操作。
6)如果用webview點(diǎn)鏈接看了很多頁以后，如果不做任何處理，點(diǎn)擊系統(tǒng)“Back”鍵，整個瀏覽器會調(diào)用finish()而結(jié)束自身，如果希望瀏覽的網(wǎng)頁回退而不是退出瀏覽器，需要在當(dāng)前Activity中處理并消費(fèi)掉該Back事件。
覆蓋Activity類的onKeyDown(int keyCoder,KeyEvent event)方法。
復(fù)制代碼 代碼如下:
public boolean onKeyDown(int keyCoder,KeyEvent event){
if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){
webview.goBack(); //goBack()表示返回webView的上一頁面
return true;
}
return false;
}
Webview與js交互
Webview與js的雙向交互才是android的webview強(qiáng)大所在，也是馬甲精神能夠徹底執(zhí)行的基礎(chǔ)保障。
首先，webview可以定義一個在其內(nèi)嵌頁面中可以觸發(fā)的事件
復(fù)制代碼 代碼如下:
wv.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
private final class DemoJavaScriptInterface
{
DemoJavaScriptInterface(){}
public void clickonAndroid( final String order){
mHandler.post(newRunnable(){
@Override
public void run(){
jsonText="{"name":""+order+""}";
wv.loadUrl("javascript:wave("+jsonText+")");
}
});
}
}
通過以上代碼，即可實(shí)現(xiàn)在其內(nèi)嵌網(wǎng)頁中觸發(fā)window.demo.clickOnAndroid(str)事件并傳參數(shù)str給webview。Webview接收到str之后，可以通過以上代碼觸發(fā)其內(nèi)嵌頁面中的js函數(shù)wave(str)。這樣就可以實(shí)現(xiàn)網(wǎng)頁觸發(fā)webview的事件并傳參數(shù)，webview接收參數(shù)并調(diào)用js函數(shù)。
下面看我的Html腳本：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
function toclient()
{
var order=$("#val").val();
window.demo.clickonAndroid(order);
}
function wave(str){
//alert(str.name);
$("#fromclient").text(str.name);
}
</script>
</head>
<body>這是一個html頁面
<br/>
輸入一個字符串：<br/>
<input id="val" />
<input type="submit" value="點(diǎn)擊提交給客戶端"
onclick="toclient();"/>
<br />
顯示返回：<label id="fromclient"></label>
</body>
</html>
通過腳本看到wave（str）函數(shù)是負(fù)責(zé)將原來傳給webview的數(shù)據(jù)重新拿回頁面，效果圖如下：
另外，如果你想獲取頁面的一些處理數(shù)據(jù)并交給webview客戶端處理，可在wave函數(shù)里將數(shù)據(jù)alert，然后webview中重寫WebChromeClient的onJsAlert函數(shù)，具體代碼如下
wv.setWebChromeClient(new MyWebChromeClient());
復(fù)制代碼 代碼如下:
final class MyWebChromeClient extends WebChromeClient{
@Override
public booleanonJsAlert(WebView view, String url, String message, final JsResult result) {
//message就是wave函數(shù)里alert的字符串，這樣你就可以在android客戶端里對這個數(shù)據(jù)進(jìn)行處理
result.confirm();
}
return true;
}
您可能感興趣的文章:
- Android使用原生組件WebView加載網(wǎng)頁和數(shù)據(jù)的方法
- iOS中UIWebView網(wǎng)頁加載組件的基礎(chǔ)及使用技巧實(shí)例
- Android WebView組件用法詳解
- Android開發(fā)之WebView組件的使用解析
- 微信小程序webview實(shí)現(xiàn)長按點(diǎn)擊識別二維碼功能示例
- android實(shí)現(xiàn)用戶體驗(yàn)超棒的微信WebView進(jìn)度條
- 微信小程序webview組件交互,內(nèi)聯(lián)h5頁面并網(wǎng)頁實(shí)現(xiàn)微信支付實(shí)現(xiàn)解析
相關(guān)文章
Android仿網(wǎng)易新聞圖片詳情下滑隱藏效果示例代碼
這篇文章主要給大家介紹了關(guān)于利用Android如何仿網(wǎng)易新聞圖片詳情下滑隱藏效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
這篇文章主要介紹了Android開發(fā)中的單例模式應(yīng)用,結(jié)合實(shí)例形式詳細(xì)分析了Android開發(fā)中常用單例模式的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2018-01-01
超簡單實(shí)現(xiàn)Android自定義Toast示例（附源碼）
本篇文章主要介紹了超簡單實(shí)現(xiàn)Android自定義Toast示例（附源碼），具有一定的參考價值，有興趣的可以了解一下。2017-02-02
這篇文章主要介紹了flutter 自定義card陰影效果及card使用，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
Android判斷touch事件點(diǎn)是否在view范圍內(nèi)的方法
這篇文章主要介紹了Android判斷touch事件點(diǎn)是否在view范圍內(nèi)的方法,涉及Android事件響應(yīng)與view屬性操作的相關(guān)技巧,需要的朋友可以參考下2016-03-03
詳解Android中的ActivityThread和APP啟動過程
ActivityThread就是我們常說的主線程或UI線程，ActivityThread的main方法是整個APP的入口，本篇深入學(xué)習(xí)下ActivityThread，順便了解下APP和Activity的啟動過程。2021-06-06
這篇文章主要為大家詳細(xì)介紹了Android拋物線下載動畫制作過程,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Android編程實(shí)現(xiàn)canvas繪制柱狀統(tǒng)計(jì)圖功能【自動計(jì)算寬高及分度值、可左右滑動】
這篇文章主要介紹了Android編程實(shí)現(xiàn)canvas繪制柱狀統(tǒng)計(jì)圖功能,具備自動計(jì)算寬高及分度值及左右滑動的功能,涉及Android canvas繪圖操作相關(guān)技巧,需要的朋友可以參考下2017-01-01
Android自定義Span實(shí)現(xiàn)文字漸變效果
Android提供一些Span設(shè)置文本樣式外，開發(fā)者若希望實(shí)現(xiàn)一些新特性也是能自定義開發(fā)實(shí)現(xiàn)的。本文就將自定義Span實(shí)現(xiàn)文字漸變效果，感興趣的可以嘗試一下2022-06-06
解決Kotlin 類在實(shí)現(xiàn)多個接口,覆寫多個接口中相同方法沖突的問題
這篇文章主要介紹了解決Kotlin 類在實(shí)現(xiàn)多個接口,覆寫多個接口中相同方法沖突的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03