android WebView組件使用總結

來源:互聯網
上載者:User

瀏覽器控制項是每個開發環境都具備的,這為馬甲神功提供了用武之地,windows的有webbrowser,android和ios都有webview。只是其引擎不同,相對於微軟的webbrowser,android及ios的webview的引擎都是webkit,對Html5提供支援。本篇主要介紹android的webview之強大。

webview組件如何使用
1)添加許可權: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)設定WebView基本資料:
如果訪問的頁面中有Javascript,則webview必須設定支援Javascript。
webview.getSettings().setJavaScriptEnabled(true);
觸摸焦點起作用
requestFocus();
取消捲軸
this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);
4)設定WevView要顯示的網頁:
互連網用:webView.loadUrl("http://www.google.com");
本地檔案用:webView.loadUrl("file:///android_asset/XX.html"); 本地檔案存放在:assets檔案中。
5)如果希望點選連結由自己處理,而不是新開Android的系統browser中響應該連結。給WebView添加一個事件監聽對象(WebViewClient)並重寫其中的一些方法:
shouldOverrideUrlLoading:對網頁中超連結按鈕的響應。當按下某個串連時WebViewClient會調用這個方法,並傳遞參數:按下的url。比如當webview內嵌網頁的某個數字被點擊時,它會自動認為這是一個電話請求,會傳遞url:tel:123,如果你不希望如此可通過重寫shouldOverrideUrlLoading函數解決: 複製代碼 代碼如下:public boolean shouldOverrideUrlLoading(WebView view,String url){
if(url.indexOf("tel:")<0){//頁面上有數字會導致串連電話
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; }
這個函數我們可以做很多操作,比如我們讀取到某些特殊的URL,於是就可以不開啟地址,取消這個操作,進行預先定義的其他動作,這對一個程式是非常必要的。
3,載入頁面完成的事件
public void onPageFinished(WebView view, String url){ }
同樣道理,我們知道一個頁面載入完成,於是我們可以關閉loading條,切換程式動作。
4,載入頁面開始的事件
public void onPageStarted(WebView view, String url, Bitmap favicon) { }
這個事件就是開始載入頁面調用的,通常我們可以在這設定一個loading的頁面,告訴使用者程式在等待網路響應。
通過這幾個事件,我們可以很輕鬆的控製程序操作,一邊用著瀏覽器顯示內容,一邊監控著使用者操作實現我們需要的各種顯示方式,同時可以防止使用者產生誤操作。
6)如果用webview點連結看了很多頁以後,如果不做任何處理,點擊系統“Back”鍵,整個瀏覽器會調用finish()而結束自身,如果希望瀏覽的網頁回退而不是退出瀏覽器,需要在當前Activity中處理並消費掉該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強大所在,也是馬甲精神能夠徹底執行的基礎保障。
首先,webview可以定義一個在其內嵌頁面中可以觸發的事件 複製代碼 代碼如下: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+")");
}
});
}
}

通過以上代碼,即可實現在其內嵌網頁中觸發window.demo.clickOnAndroid(str)事件並傳參數str給webview。Webview接收到str之後,可以通過以上代碼觸發其內嵌頁面中的js函數wave(str)。這樣就可以實現網頁觸發webview的事件並傳參數,webview接收參數並調用js函數。
下面看我的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="點擊提交給用戶端"
onclick="toclient();"/>
<br />
顯示返回:<label id="fromclient"></label>
</body>
</html>

通過指令碼看到wave(str)函數是負責將原來傳給webview的資料重新拿回頁面,如下:
另外,如果你想擷取頁面的一些處理資料並交給webview用戶端處理,可在wave函數裡將資料alert,然後webview中重寫WebChromeClient的onJsAlert函數,具體代碼如下
wv.setWebChromeClient(new MyWebChromeClient()); 複製代碼 代碼如下:final class MyWebChromeClient extends WebChromeClient{
@Override
public booleanonJsAlert(WebView view, String url, String message, final JsResult result) {
//message就是wave函數裡alert的字串,這樣你就可以在android用戶端裡對這個資料進行處理
result.confirm();
}
return true;
}

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.