獲取WebView加載的網頁內容並進行動態修改
阿新 • • 發佈：2017-10-10
datawit cli cap jsoup 動態修改 成功 scale 技術 parse 
AFinalStone
2016.10.11 18:56* 字數 587
效果圖 
獲取方法.png
http://www.jianshu.com/p/3f207a8e32cb
【Android】WebView讀取本地圖片 http://www.cnblogs.com/kimmy/p/4769788.html
獲取WebView加載的網頁內容並進行動態修改
AFinalStone
2016.10.11 18:56* 字數 587
- 效果圖
效果圖
如圖所示，整個界面只有一個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 參考資料所列全部信息和細節最後附上demo下載地址
獲取WebView加載的網頁內容並進行動態修改