Android中WebView的相關使用

最近做的項目中，遇到個很棘手的問題：

客戶給我的數據是有限制的，因此，在返回某條具體頁面內容的時候，他只能給我一個html片段，裡面包含

文字，圖片以及附件的下載地址。如果網頁模版規范的愛比較好說，但是他給我的數據中，不確定的因素很多：

比如 可能沒有圖片，圖片和文字穿插在一起，最為重要的是html便簽他的嵌套層次和標簽個數都是不確定的。

如果我采用解析html提取內容出來的話，估計就掉進坑裡了.......

但實際情況中，打算服務器先將客戶代碼的標簽屬性刪除，只剩骨頭，但結果還是不盡人意，因為將所有原本的標簽屬性刪除後，顯示還是會有問題........。。。

因此，我看了一下網易新聞等感覺都是采用webview進行展示的，關鍵是如何封裝並處理好數據了。

學走路，還是從模仿開始。這裡借鑒了大牛們的博客，經驗，再次一並謝過：

http://blog.csdn.net/zi413293813/article/details/18144055

http://blog.csdn.net/kavensu/article/details/7931480

http://blog.csdn.net/wangtingshuai/article/details/8635787

http://blog.csdn.net/chenshijun0101/article/details/7045394

我的需求：下載圖片；下載附件、

采用思路：將內容用html展示，並且實現java和js的交互，響應用戶點擊圖片的動作。

這裡我寫了一個demo，按照上面別人的例子簡單封裝了一下，當然，這裡只是提供一種思路，具體怎麼封裝怎麼去實現更好好還是的要具體問題具體分析了。

別忘了：添加寫文件權限和網絡權限

demo使用測試頁面：http://www.cnbeta.com/articles/292267.htm<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PGltZyBzcmM9"/uploadfile/Collfiles/20140518/2014051809282237.jpg" alt="\">

這裡，因為他的內容太多，所以我直接去了主要內容部分，也就是有我文字和圖片混搭的部分。

接口：主要用於回調，當然為了擴展的話，還可以添加更多方法。

package com.example.androidwebviewdemo;

/**
 * 

 * 
 * 下午8:04:06
 * 
 * @auther xiangxm
 */
public interface IOnWebViewCallBack {
	/**
	 * 

	 * 頁面加載進度
	 * 
	 * 
	 * @param progress
	 *            void
	 */
	void onProgressChanged(int progress);
}

設置webview控件的相關屬性：

private void initView() {

		progressbar = (ProgressBar) findViewById(R.id.progressbar);
		progressbar.setVisibility(View.INVISIBLE);
		mWebView = (WebView) findViewById(R.id.webview_ui);
		WebSettings settings = mWebView.getSettings();
		// 設置webview的相關屬性
		settings.setJavaScriptEnabled(true);// 允許執行js代碼
		settings.setBlockNetworkImage(true);
		settings.setSupportZoom(false);// 不支持縮放
		settings.setBuiltInZoomControls(false);// 內置縮放
		settings.setPluginsEnabled(true);
		settings.setDefaultTextEncodingName("UTF-8");// 設置默認編碼
		mWebView.getSettings()
				.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);// 禁止由於內容過寬，導致橫屏滾動。
		mWebView.addJavascriptInterface(new JavaScriptInterface(),
				HtmlParser.Js2JavaInterfaceName);

		HtmlParser htmlParser = new HtmlParser(mWebView,
				"http://www.cnbeta.com/articles/292267.htm", this, this);
		htmlParser.execute();
	}

HtmlParser:根據別人的代碼改變的，我主要把其他的操作都放進來了。感覺這樣做會牽扯的太多了，不好擴展，但這裡僅僅是個demo而已。

直接上代碼：HtmlParser

package com.example.androidwebviewdemo;

import java.io.File;
import java.io.IOException;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

import android.content.Context;
import android.graphics.Bitmap;
import android.os.AsyncTask;
import android.util.Log;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

/**
 * 

 * html處理的相關類：給圖片添加onClick屬性。，過濾a標簽，添加屬性等。、
 * 
 * 下午6:40:37
 * 
 * @auther xiangxm
 */
public class HtmlParser extends AsyncTask {

	public static String Js2JavaInterfaceName = "JsUseJava";
	private WebView mWebView;
	/** 網頁地址 **/
	private String htmlUrl = "";
	private Context mContext;
	/** 存儲img標簽圖片地址。 **/
	private List imageUrlList = new ArrayList();

	public List getImagerUrlList() {
		return imageUrlList;
	}

	public HtmlParser(WebView wevView, String url, Context context,
			IOnWebViewCallBack onWebViewCallBack) {
		this.mWebView = wevView;
		htmlUrl = url;
		mContext = context;
		this.onWebViewCallBack = onWebViewCallBack;
		configWebView();
	}

	/**
	 * 

	 * 配置WebView的相關信息
	 * 
	 * void
	 */
	private void configWebView() {

		//
		mWebView.setWebViewClient(new MyWebClient());
		mWebView.setWebChromeClient(new MyWebChrome());

	}

	class MyWebClient extends WebViewClient {

		@Override
		public void onPageStarted(WebView view, String url, Bitmap favicon) {
			super.onPageStarted(view, url, favicon);
		}

		@Override
		public void onPageFinished(WebView view, String url) {
			super.onPageFinished(view, url);

			mWebView.getSettings().setBlockNetworkImage(false);// 關閉圖片阻塞
			// 頁面加載完成之後,更換圖片顯示，異步更換圖片顯示。
			DownloadWebImgTask downloadTask = new DownloadWebImgTask(mWebView);
			List urlStrs = imageUrlList;
			String urlStrArray[] = new String[urlStrs.size() + 1];
			urlStrs.toArray(urlStrArray);
			downloadTask.execute(urlStrArray);
			if (null != onWebViewCallBack) {

				onWebViewCallBack.onProgressChanged(View.INVISIBLE);
			}
		}

		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {

			// 當連接被點擊的時候希望覆蓋而不是打開新的窗口
			// view.loadUrl(url);
			return true;
		}

	}

	class MyWebChrome extends WebChromeClient {

		@Override
		public void onProgressChanged(WebView view, int newProgress) {
			super.onProgressChanged(view, newProgress);
			// 加載的時候顯示進度可以在這裡添加
			if (null != onWebViewCallBack) {
				// 加載顯示進度的時候
				// onWebViewCallBack.onProgressChanged(newProgress);
			}
		}
	}

	private IOnWebViewCallBack onWebViewCallBack;

	public void setOnWebViewCallBack(IOnWebViewCallBack onWebViewCallBack) {
		this.onWebViewCallBack = onWebViewCallBack;
	}

	/**
	 * 

	 * 注入js代碼，添加Onclick事件
	 * 
	 * 
	 * @param doc
	 *            void
	 */
	public void handleImageClickEvent(Document doc) {

		Elements es = doc.getElementsByTag("img");

		for (Element e : es) {
			String imgUrl = e.attr("src");
			imageUrlList.add(imgUrl);
			String imgName;
			File file = new File(imgUrl);
			imgName = file.getName();
			if (imgName.endsWith(".gif")) {
				e.remove();
			} else {

				String filePath = "file:///mnt/sdcard/test/" + imgName;
				e.attr("src", "file:///android_asset/ic_launcher.png");
				e.attr("src_link", filePath);
				e.attr("ori_link", imgUrl);
				String str = "window." + Js2JavaInterfaceName + ".setImgSrc('"
						+ filePath + "')";
				e.attr("onclick", str);

			}
		}
	}

	/**
	 * 

	 * 與java交互 將a超鏈接標簽，點擊後提供下載
	 * 
	 * 
	 * @param doc
	 *            void
	 */
	private void handleHyperlinks(Document doc) {
		Elements hrefs = doc.getElementsByTag("a");
		for (Element href : hrefs) {
			String str = "window." + Js2JavaInterfaceName + ".onClick_Tag_A('"
					+ href.attr("href") + "')";

			href.attr("onclick", str);
		}
	}

	@Override
	protected String doInBackground(Void... params) {

		if (null != onWebViewCallBack) {

			onWebViewCallBack.onProgressChanged(View.VISIBLE);
		}
		Document doc = null;
		imageUrlList.clear();

		try {
			doc = Jsoup.parse(new URL(htmlUrl), 15000);
		} catch (MalformedURLException e1) {
			e1.printStackTrace();
		} catch (IOException e1) {
			e1.printStackTrace();
		}

		if (doc == null)
			return null;

		Elements es = doc.select("script");
		if (es != null) {
			es.remove();
		}
		Document docNew = Jsoup.parse(doc.getElementsByClass("article_content")
				.html());
		handleImageClickEvent(docNew);
		handleHyperlinks(docNew);
		Log.i("-------->html內容", docNew.toString());
		return docNew.toString();

	}

	@Override
	protected void onPostExecute(String result) {
		super.onPostExecute(result);

		mWebView.loadDataWithBaseURL(null, result, "text/html", "utf-8", null);// 這樣展示可以有效放置中文亂碼
		super.onPostExecute(result);

	}

}

當點擊了圖片之後：通常情況下會跳轉到浏覽器新頁面覆蓋。這裡實現需求是，點擊圖片不跳轉，直接將WebViewClient的shouldOverrideUrlLoading return true;將事件消費掉就OK。

		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {

			// 當連接被點擊的時候希望覆蓋而不是打開新的窗口
			// view.loadUrl(url);
			return true;
		}

運行效果圖：

demo顯示內容的時候有點慢。

源代碼下載地址：http://download.csdn.net/detail/xxm282828/7362539