分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

获取WebView加载的网页内容并进行动态修改

发布时间:2023-09-06 01:16责任编辑:白小东关键词:Web

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并修改其属性,具体修改如下:

  1. 把“正在加载...”修改为“加载完成”
  2. 把加载进度条loading.gif修改为龙猫图片dragon.jpg
  3. 把“您好,我是进度条”修改为“您好,我是龙猫军团”

下面给出具体的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加载的网页内容并进行动态修改

原文地址:http://www.cnblogs.com/jukan/p/7647230.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved