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

时间：2022-09-25 23:12:35

http://www.jianshu.com/p/3f207a8e32cb

【Android】WebView读取本地图片 http://www.cnblogs.com/kimmy/p/4769788.html

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

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

2016.10.11 18:56* 字数 587

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

如图所示，整个界面只有一个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方法，其他还有很多，如下图所示

获取WebView加载的网页内容并进行动态修改
获取方法.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信息并同步保存&comma;使第二次不用登录也可查看个人信息。

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

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

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

  6. 转&colon;Android Webview 加载外部html时选择加载本地的js&comma;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&sol;htm pdf docx tx

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

随机推荐

  1. Mysql并发时经典常见的死锁原因及解决方法

    1.    mysql都有什么锁 MySQL有三种锁的级别:页级.表级.行级. 表级锁:开销小,加锁快:不会出现死锁:锁定粒度大,发生锁冲突的概率最高,并发度最低. 行级锁:开销大,加锁慢:会出现死锁 ...

  2. Powershell实例小结（服务管理）

    有关服务管理的具体实例脚本如下: #$lists="1.1.1.1","2.2.2.2" #远程ip列表 foreach ($list in $lists){ ...

  3. Codeforces Round &num;368 &lpar;Div&period; 2&rpar; D&period; Persistent Bookcase

    Persistent Bookcase Problem Description: Recently in school Alina has learned what are the persisten ...

  4. Spring Boot 系列教程6-全局异常处理

    @ControllerAdvice源码 package org.springframework.web.bind.annotation; import java.lang.annotation.Ann ...

  5. VMware Workstation Pro下载密钥

    热门虚拟机软件VMware Workstation Pro现已更新至14.1.2,14.0主要更新了诸多客户机操作系统版本,此外全面兼容Wind10创建者更新.12.0之后属于大型更新,专门为Win1 ...

  6. Java 帝国之建造者模式

    Java 帝国之建造者模式 原创: 王钦誉 码农翻身 今天 本文来自王钦誉的投稿,老刘做了较大修改. 原文地址: https://xiaoqinyu0000.github.io/2018/06/11/ ...

  7. python自动抢票

    # -*- coding: utf-8 -*- from splinter.browser import Browser from time import sleep import traceback ...

  8. Java中的包扫描（工具）

    在现在好多应用场景中,我们需要得到某个包名下面所有的类, 包括我们自己在src里写的java类和一些第三方提供的jar包里的类,那么怎么来实现呢? 今天带大家来完成这件事. 先分享代码: 1.这个类是 ...

  9. Jenkins Xcode 证书设置错误 Code Sign error&colon; No matching codesigning identity found&colon; No codesigning identities

    Jenkins 集成Xcode 项目的时候在证书上遇到了问题.实际上如果在本地的话.只要Xcode工程里选择了项目就不需要重新设置证书了.jenkins会自动找到这个证书,只要在build setti ...

  10. UVa 12563 劲歌金曲（0-1背包）

    https://vjudge.net/problem/UVA-12563 题意: 在一定的时间内连续唱歌,最后一首唱11分钟18秒的劲歌金曲,问最多能长多长时间. 思路: 0-1背包问题,背包容量为t ...

相关文章