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("您好,我是龙猫军团!");

获取WebView加载的网页内容并进行动态修改的更多相关文章

  1. Android中通过Java获取Webview加载内容

    有时候我们需要在加载webview时,获取加载完成的内容,当然,WebView也是有可能包含javascript.通过以下操作,我们是可以获取到WebView加载的内容. 1.自定义一个内部类,获取W ...

  2. 获取WebView加载HTML时网页中的内容

    main.xml如下: [html] view plaincopy <RelativeLayout xmlns:android="http://schemas.android.com/ ...

  3. Android项目实战(五十六):获取WebView加载的url的请求错误码

    例如需求,我有一个WebView 加载一个url, 该url对应的网页本身自带下拉刷新 ,但是网页本身会有出现400 500 等异常请求错误码 这时候网页加载失败,页面本身的下拉是无法使用的,要求重新 ...

  4. Andriod中WebView加载登录界面获取Cookie信息并同步保存,使第二次不用登录也可查看个人信息。

    Android使用WebView加载登录的html界面,则通过登录成功获取Cookie并同步,可以是下一次不用登录也可以查看到个人信息,注:如果初始化加载登录,可通过缓存Cookie信息来验证是否要加 ...

  5. Android中Http加载如何得到Cookie和 WebView 加载网页如何得到的Cookie

    最近做项目在手机端登录Http请求和 WebView 记载登录获取Cookie信息,可查看Cookie信息. 如图: Http请求获取Cookie信息: public static String re ...

  6. 转:Android Webview 加载外部html时选择加载本地的js,css等资源文件

    原文地址:http://m.blog.csdn.net/blog/qduningning/43196819 在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片 ...

  7. WebView加载本地Html文件并实现点击效果

    Webview是用来与前端交互的纽,可以加载本地Html文件,和网页并实现交互的功能. WebView通过WebSetting可以使用Android原生的JavascriptInterface来进行j ...

  8. iOS webview加载html自定义选项框选词

    项目要求:webview加载html网址,内容为英文文本,需要获取文本上的单词 这个是最终效果图: 思路是先实现自定义的选项框(不带系统选项)再获取到滑选的单词: 实现的步骤: 首先是替换掉系统长按出 ...

  9. webView 加载本地文件 - html/htm pdf docx tx

    - (void)viewDidLoad { [super viewDidLoad]; [self setupUI]; NSString *path = [[NSBundle mainBundle] p ...

随机推荐

  1. php学习七:时间和日期

    在学习php中的时间和日期的时候,必须要了解什么是时间戳,那么什么是时间戳呢,请看一下的定义 时间戳:从 Unix 纪元(格林威治时间 1970 年 1 月 1 日 00:00:00)到当前时间的秒数 ...

  2. jQueryValidate实现重复性验证

    $(function(){      $("#frm").validateForm({           rules:{                'caResourceSt ...

  3. poj_2182 线段树/树状数组

    题目大意 n个数排成一排(不知道大小,只是占了一个位置),从a[1]到a[n]进行遍历,对于每个a[i],给出从a[1]到a[i-1]中小于a[i]数的个数.要求出 a[1]到a[n]中这n个数的相对 ...

  4. JS-获取class类名为某个的元素-【getClass】函数封装

    原理: /*  * 根据class获取元素. * 原理是,取出oparent下的所有元素,组成数组,然后遍历类名,全等判断.*/ 源码 1 function getClass(oParent,clsN ...

  5. Linux 2.6.16 TCP连接速度异常的问题分析

    版权声明:本文由余子军原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/104 来源:腾云阁 https://www.qclo ...

  6. apt-get install的默认安装路径

    apt-get 命令 sudo apt-get update sudo apt-get install tree sudo apt-get -y install tree //跳过系统提示,直接安装. ...

  7. 学习c++的50条忠告(转自C++百度贴吧)

    1.把C++当成一门新的语言学习(和C没啥关系!真的.): 2.看<Thinking In C++>,不要看<C++变成死相>: 3.看<The C++ Programm ...

  8. fiddler win10-1703Failed to register Fiddler as the system proxy

    正解 The solution for the Fiddler error of "Failed to register Fiddler as the system proxy" ...

  9. 170619、springboot编程之HelloWorld

    springboot资料看了一段时间了,个人觉得开发效率相当高,也参考了网上很多大牛的技术博客,在这里面我也记录一下,方便以后自己翻阅查看,同时也给新手最一点点指引.如果有侵权大牛博客文章,请告诉我, ...

  10. pta习题集5-16 地下迷宫探索

    地道战是在抗日战争时期,在华北平原上抗日军民利用地道打击日本侵略者的作战方式.地道网是房连房.街连街.村连村的地下工事,如下图所示. 我们在回顾前辈们艰苦卓绝的战争生活的同时,真心钦佩他们的聪明才智. ...