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


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

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

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

    96
    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{
      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{
      80%;
      height:auto;
      margin:0px auto;
      }
    
      .imageView img{
      100%;
      }
    
      .hint{
      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("您好,我是龙猫军团!");
  • 相关阅读:
    Codeforces Round #270 solution
    Codeforces Round #269 (Div. 2) solution
    Codeforces Round #268 (Div. 1) solution(upd div 1 C,div 2 A, B
    Codeforces Round #267 (Div. 2) solution
    Unity 绘制多边形
    DOTween 模仿NGUI Tween
    图像混合模式 正片叠底、滤色、叠加
    一只羊的四个月可以生一只小羊,小羊四个月后又可以生一只小羊 问50个月后有多少只羊(羊不会死)
    Unity CCTween UGUI 动画插件
    Unity UGUI 使用 CCTween 实现 打字效果
  • 原文地址:https://www.cnblogs.com/jukan/p/7647230.html
Copyright © 2020-2023  润新知