天天看點

android webView 的常見問題與進階用法

        這幾天一直在研究webView控件的用法,現在就用這篇部落格來記載一下webview控件的一些常用的用法,以及我們在開發中遇到的一些問題。廢話少說直接進入正題。

一.webView 的介紹和用途

1.webView的介紹:在Android手機中内置了一款高性能webkit核心浏覽器,在SDK中封裝成名為WebView的元件,總之浏覽器可以幹的事,你都可以通過webview來實作。

二.webView 的一些基本用法

通過上面的介紹你可能對webview的一些常用的功能的用法有點疑惑,下面我們講解一些在webview中的常用的用法。

1.加載一個網絡的url

mWebView = (WebView) this.findViewById(R.id.mWebview);
	mWebView.loadUrl(url);
           

2.加載一個本地存放在assets檔案下的html檔案

mWebView = (WebView) this.findViewById(R.id.mWebview);
	webView.loadUrl("file:///android_asset/XX.html")
           

在這裡我要特别說明一下:

當你在本地html檔案中用到圖檔,js等的時候就要注意加載的方式,我在剛剛開始的時候也是通過上面的方法直接加載,結果都是失敗的,在這裡首先我們要在本地的html檔案中配置img,js的方式要如:<img src="file:///android_asset/img/01.jpg"/>的格式,然後将整個html檔案的内容擷取,最後調用

wv_liebao.loadDataWithBaseURL("file:///android_asset/my.html",Str_html, "text/html", "utf-8", null);
           

其中第二個參數就是整個html的的String

3.Webview之WebSetting

1.webview允許加載js(詳細用法後面介紹)

mWebView.getSettings().setJavaScriptEnabled(true);
           

2.webview 允許調用本地檔案

mWebView.getSettings().setAllowFileAccess(true);
           

3.webview 自适應手機螢幕大小

wv_liebao.getSettings().setUseWideViewPort(true);
wv_liebao.getSettings().setLoadWithOverviewMode(true);
           

三.webView  的一些進階特性和用法

1.使用自己的 WebViewClient。

當我們要使用已經load進來的url的頁面的一些特性的使用,一般會建立我們的WebViewClient,然後去調用裡面的一些方法。

下面介紹一下其中比較重要和常見的方法

1.讓我們的webView一直load一些url,屏蔽系統的浏覽器

public boolean shouldOverrideUrlLoading(WebView view, String url) {
			// TODO Auto-generated method stub
			mWebview.loadUrl(url);
			return true;
		}
           

2,當webView在加載網頁的開始和結束時的回調方法

@Override
			public void onPageStarted(WebView view, String url, Bitmap favicon) {
				// TODO Auto-generated method stub
				super.onPageStarted(view, url, favicon);
			}
	
			@Override
			public void onPageFinished(WebView view, String url) {
				// TODO Auto-generated method stub
				super.onPageFinished(view, url);
			}
           

3.當我們load網頁是由于一些網絡或伺服器的原因沒有load進來,我們可以用自己的網頁來替代錯誤網頁

@Override
			public void onReceivedError(WebView view, int errorCode,
					String description, String failingUrl) {
				// TODO Auto-generated method stub
				Message message = Message.obtain();
				message.what = Myconstants.ERROR_PAGE;
				handler.sendMessage(message);
			}
           

2.使用我們自己的WebChromeClient來處理那些網頁上比較複雜的js, Javascript的對話框、網站圖示、網站title、加載進度等。

@Override
		public void onReceivedTitle(WebView view, String title) {
			// TODO Auto-generated method stub
			super.onReceivedTitle(view, title);
		}

		@Override
		public boolean onJsAlert(WebView view, String url, String message,
				JsResult result) {
			// TODO Auto-generated method stub
			return super.onJsAlert(view, url, message, result);
		}

		@Override
		public boolean onJsConfirm(WebView view, String url, String message,
				JsResult result) {
			// TODO Auto-generated method stub
			return super.onJsConfirm(view, url, message, result);
		}
           

3.使用webView的一些進階特性來開發.

1.下載下傳檔案

在開發webView的時候我們可能會要下載下傳一些檔案,如果不作處理,那麼就可能會直接調用系統的浏覽器來進行下載下傳,那該如何使用呢?

我們可以實作webView的DownloadListener接口

@Override
		public void onDownloadStart(String url, String userAgent,
				String contentDisposition, String mimetype, long contentLength) {
			// TODO Auto-generated method stub
		}
           

可以擷取一個下載下傳檔案的url,然後我麼自己再進行檔案的下載下傳

2.通過webView上傳檔案

我們在webVIew中處理網頁上如<input />中的上傳檔案的标簽,我們可以在WebChromeClient中重寫打開檔案的方法

// For Android3.0+
			public void openFileChooser(ValueCallback<Uri> uploadMsg,
					String acceptType) {
				if (mUploadMessage != null)
					return;
				mUploadMessage = uploadMsg;
				Intent innerIntent = new Intent(Intent.ACTION_GET_CONTENT);
				String IMAGE_UNSPECIFIED = "image/*";
				innerIntent.setType(IMAGE_UNSPECIFIED); // 檢視類型
				Intent wrapperIntent = Intent.createChooser(innerIntent, null);
				startActivityForResult(wrapperIntent, Myconstants.REQ_CHOOSE);
		}
	
			// For Android < 3.0
			public void openFileChooser(ValueCallback<Uri> uploadMsg) {
				openFileChooser(uploadMsg, "");
			}
	
			// For Android > 4.1.1
			public void openFileChooser(ValueCallback<Uri> uploadMsg,
					String acceptType, String capture) {
				openFileChooser(uploadMsg, acceptType);
			}
           

然後再在onActivityResult中進行處理

@Override
		protected void onActivityResult(int requestCode, int resultCode,
				Intent intent) {
			super.onActivityResult(requestCode, resultCode, intent);
			if (null == mUploadMessage)
				return;
			Uri uri = null;
			if (requestCode == Myconstants.REQ_CHOOSE) {
				if (intent != null) {
					uri = afterChosePic(intent);
				}
			}
			mUploadMessage.onReceiveValue(uri);
			mUploadMessage = null;
		}
           

3長按webView儲存網頁上的圖檔等

首先我們可以重寫webView的onlongclickListener,如下

wv_liebao.setOnLongClickListener(new OnLongClickListener() {
				@Override
				public boolean onLongClick(View v) {
					// TODO Auto-generated method stub
					HitTestResult hitTestResult = wv_liebao.getHitTestResult();
					int type = hitTestResult.getType();
					if (type == HitTestResult.IMAGE_TYPE
							|| type == HitTestResult.SRC_IMAGE_ANCHOR_TYPE) {
						String imageUrl = hitTestResult.getExtra();
						showSaveDialog(imageUrl);
					}
					return true;
				}
			});
           

上面的代碼中我儲存的是圖檔,我們可以通過 HitTestResult 這個類來實作,具體實作參考上面的代碼。

4.webView 的cookie處理.

通常我們在開發webView的過程中可能會用到cookie,那麼我們該如何處理呢?首先在android中我們有一個cookie store,當我們打開一個連結的時候,如果我們想要儲存cookie留着後面使用,可以先儲存cookie到store中,然後再同步一下store庫,那麼以後我們在打開連接配接的時候,我們的webView會先通路以下cookieStore庫,看有沒有cookie,然後在打開連接配接。

CookieSyncManager.createInstance(this);
			cookieManager = CookieManager.getInstance();
	cookieManager.setAcceptCookie(true);
	cookieManager.getCookie(url);
	cookieManager.setCookie(url, value);
	CookieSyncManager.getInstance().sync();
           

4.webView 實作網頁 js 的互動

具體實作如下

mWebView.addJavascriptInterface(
	    new Object() { 
	            public void clickOnAndroid(final int i) { 
	                mHandler.post(new Runnable() { 
	                    public void run() { 
	                                int j = i;
	                                j++;
	Toast.makeText(Test.this, "測試調用java" + String.valueOf(j), Toast.LENGTH_LONG).show();
	                    }
	                });
	            } 
	        }, "demo");
	
	然後在html頁面中,利用如下代碼<div id='b'><a οnclick="window.demo.clickOnAndroid()">b.c</a></div>,即可實作調用記得兩者的“demo”要保持一緻
           

注意:上面的調用js代碼在4.2以上沒有作用,需要在調用之前标注:

@Javascriptinterface

這一句話。。