http://www.jianshu.com/p/3f207a8e32cb
【Android】WebView讀取本地圖片 http://www.cnblogs.com/kimmy/p/4769788.html
獲取WebView加載的網頁內容並進行動態修改
- 效果圖
效果圖
如圖所示，整個界面只有一個webView控件，程序初始化的時候webView會去加載assets文件夾下面的JsoupParHtml.html文件，等webView成功加載該html頁面之后，程序會再次獲取webView控件當前加載的html的具體內容，等待5秒后，通過Jsoup框架，動態獲取其中三個Element並修改其屬性，具體修改如下：
- 把“正在加載...”修改為“加載完成”
- 把加載進度條loading.gif修改為龍貓圖片dragon.jpg
- 把“您好，我是進度條”修改為“您好，我是龍貓軍團”
下面給出具體的html文件和java代碼：
- assets下的JsoupParHtml.html文件
html文件是非常簡單，主要內容就是兩段文字和一張圖片。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" src="./js/jquery-1.7.1.min.js" charset="utf-8"></script>
<title></title>
<style type="text/css">
*{
border:none;
margin:0;
padding:0;
font-size:12px;
font-family:"微軟雅黑";
}
.loadDesc{
width:100%;
height:50px;
margin-top:30px;
}
.loadDesc p{
font-size:18px;
color:#ff0000;
line-height:50px;
text-align:center;
font-weight:bold;
}
.loadDesc p span{
font-size:18px;
}
.imageView{
width:80%;
height:auto;
margin:0px auto;
}
.imageView img{
width:100%;
}
.hint{
width:80%;
height:40px;
line-height:40px;
font-size:13px;
color:#000;
background:#ccc;
opcity:0.8;
border-radius:5px;
text-align:center;
margin:10px auto 0px;
}
</style>
</head>
<body>
<div class="loadDesc">
<p>正在加載<span>...</span></p>
</div>
<div class="imageView">
[站外圖片上傳中……(2)]
</div>
<p class="hint">您好，我是進度條</p>
</body>
</html>- Activity對應的java代碼
import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
public class JSoupHtmlActivity extends AppCompatActivity {
//assets下的文件的JsoupParHtml.html所在的絕對路徑
private static final String DEFAULT_URL = "file:///android_asset/JsoupParHtml.html";
WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_jsoup_html);
webView = (WebView) findViewById(R.id.webView);
initData();
}
private void initData() {
//下面三行設置主要是為了待webView成功加載html網頁之后，我們能夠通過webView獲取到具體的html字符串
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new InJavaScriptLocalObj(), "local_obj");
webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
view.loadUrl("javascript:window.local_obj.showSource('<head>'+"
+ "document.getElementsByTagName('html')[0].innerHTML+'</head>');");
}
@Override
public void onReceivedError(WebView view, int errorCode,
String description, String failingUrl) {
super.onReceivedError(view, errorCode, description, failingUrl);
}
});
webView.loadUrl(DEFAULT_URL);
}
final class InJavaScriptLocalObj {
@JavascriptInterface
public void showSource(String html) {
refreshHtmlContent(html);
}
}
private void refreshHtmlContent(final String html){
Log.i("網頁內容",html);
webView.postDelayed(new Runnable() {
@Override
public void run() {
//解析html字符串為對象
Document document = Jsoup.parse(html);
//通過類名獲取到一組Elements，獲取一組中第一個element並設置其html
Elements elements = document.getElementsByClass("loadDesc");
elements.get(0).html("<p>加載完成</p>");
//通過ID獲取到element並設置其src屬性
Element element = document.getElementById("imageView");
element.attr("src","file:///android_asset/dragon.jpg");
//通過類名獲取到一組Elements，獲取一組中第一個element並設置其文本
elements = document.select("p.hint");
elements.get(0).text("您好，我是龍貓軍團！");
//獲取進行處理之后的字符串並重新加載
String body = document.toString();
webView.loadDataWithBaseURL(null, body, "text/html", "utf-8", null);
}
},5000);
}
}代碼中主要分兩個部分
第一部分：通過添加JS監聽對象來獲取到webView已經加載的html的具體內容，會在InJavaScriptLocalObj的showSource的回調方法中獲取到到webView當前加載成功的界面內容。
第二部分：通過Jsoup把獲取到的html內容轉化成Document對象，再獲取到我們需要的元素，並對其相應的屬性進行設置，就達到了我們要的效果了。
- Jsoup的簡單使用
代碼中使用三種方法getElementsByClass()，getElementById()，select()來獲取特定的Element，具體的獲取方法還有很多，並且通過html，attr，text三種方法來修改已經存在的屬性，下面在具體說幾點。
1.獲取元素的一些方法：
常用的有select方法，其他還有很多，如下圖所示
獲取方法.png
2.屬性設置
//獲取所有類名為comments並還有a元素的div並設置其ref屬性
doc.select("div.comments a").attr("rel", "nofollow");
//獲取所有類名為masthead的div設置它們的title屬性並添加css class屬性
doc.select("div.masthead").attr("title", "jsoup").addClass("round-box");關於上面這段代碼，可以類比程序中的這段代碼：
element.attr("src","file:///android_asset/dragon.jpg")；3.HTML設置
Element div = doc.select("div").first(); // 現在：<div></div>
div.html("<p>lorem ipsum</p>"); // 現在：<div><p>lorem ipsum</p></div>
div.prepend("<p>First</p>");
div.append("<p>Last</p>");
// 最后: <div><p>First</p><p>lorem ipsum</p><p>Last</p></div>
Element span = doc.select("span").first(); // 現在：<span>One</span>
span.wrap("<li><a href='http://example.com/'></a></li>");
// 最后: <li><a href="http://example.com"><span>One</span></a></li>關於上面這段代碼，可以類比程序中的這段代碼：
elements.get(0).html("<p>加載完成</p>");4.文本設置
Element div = doc.select("div").first(); // 現在：<div></div>
div.text("five > four"); // 現在：<div>five > four</div>
div.prepend("First ");
div.append(" Last");
// 最后: <div>First five > four Last</div>關於上面這段代碼，可以類比程序中的這段代碼：
elements.get(0).text("您好，我是龍貓軍團！");-
關於Jsoup的具體使用
可以參見Jsoup開發指南中文使用手冊和SelectorAPI 參考資料所列全部信息和細節