Android通过getElementsByClassName快速隐藏WebView标题和广告

近日，在把某网站用WebView加载到App里面的时候，出现的一个问题。看下图

简直了~带着标题还有广告,简直太糟糕了.而且占屏幕的空间都太大了,很不协调…. 所以我们要将他们所在的div隐藏掉,首先我想到的是让服务器的哥们重新定制一个页面来显示,但是…坑的是他们不管…呜呜呜~~~
俗话说,靠人不如靠己,咱们自己来!!
首先让我们看看加载网页的代码:

private WebView webView;
private WebSettings settings;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.setContentView(R.layout.activity_main);
    webView = (WebView) findViewById(web);
   //获取webview的setting
    settings = webView.getSettings();
     //设置WebView属性，能够执行Javascript脚本
    settings.setJavaScriptEnabled(true);
   //支持缓存
    settings.setAppCacheEnabled(true);
    webView.setWebViewClient(new NoAdWebViewClient());
    //加载需要显示的网页
    webView.loadUrl("http://www.ftchinese.com/channel/commodity.html");
}

然后在火狐浏览器上通过Ctrl+shift+m打开手机版网页(这里有一个坑,等下再表….),右击”查看元素”的调试模式可以轻易的获取到标题的div

找到对应的div了,怎么才能隐藏他呐??? 一般我们获取某个div是通过getElementsById(“xxx”)来找到对应的div,但是我们发现div上并没有id这个属性,怎么办? 有办法! 我们还可以根据class属性通过document.getElementsByClassName(“xxx”)来找到我们想要的div元素(不懂的,自动补齐:http://www.runoob.com/jsref/met-document-getelementsbyclassname.html)
下面是继承WebViewClient()实现隐藏标题和广告div的代码:

public class NoAdWebViewClient extends WebViewClient {

    private Context context;    

    public NoAdWebViewClient(Context context) {
        this.context = context;
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        String js = getClearAdDivJs(context);
        Log.v("adJs",js);
        view.loadUrl(js); //加载js方法代码
        view.loadUrl("javascript:hideAd();"); //调用js方法
    }
    public String getClearAdDivJs(Context context) {
        String js = "javascript:function hideAd() {";
        Resources res = context.getResources();
        String[] adDivs = res.getStringArray(R.array.adBlockDiv);
        for (int i = 0; i < adDivs.length; i++) {
            //通过div的id属性删除div元素
            //js += "var adDiv"+i+"= document.getElementById('"+adDivs[i]+"');if(adDiv"+i+" != null)adDiv"+i+".parentNode.removeChild(adDiv"+i+");";
            //通过div的class属性隐藏div元素
            js += "var adDiv" + i + "= document.getElementsByClassName('" + adDivs[i] + "');if(adDiv" + i + " != null)" +
                    "{var x; for (x = 0; x < adDiv" + i + ".length; x++) {adDiv" + i + "[x].style.display='none';}}";
        }
        js += "}";
        return js;
    }
}

在onPageFinished方法里调用的js方法整理后(为方便阅读经过处理):

javascript:function hidehideAd() {
    var adDiv0 = document.getElementsByClassName("o-nav__placeholder");
    if(adDiv0 != null){
        var x;
        for (x= 0; x< adDiv0 .length; x++) {
            adDiv0 [x].style.display = "none";
        }
    }
    var adDiv1 = document.getElementsByClassName("site-map");
    if(adDiv1 != null){
        var x;
        for (x= 0; x< adDiv1.length; x++) {
            adDiv1[x].style.display = "none";
        }
    }
    var adDiv2 = document.getElementsByClassName("bn-ph");
    if(adDiv2 != null){
        var x;
        for (x= 0; x< adDiv2.length; x++) {
            adDiv2[x].style.display = "none";
        }
    }
   ...
}

通过values文件夹下的arrays.xml去管理去要去掉的标题和广告div，遍历adDiv的集合，组合成一段js代码，注入到网页中去掉广告.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="adBlockDiv">
        <item>o-nav__placeholder</item>
        <item>site-map</item>
        <item>bn-ph</item>
        <item>story-theme</item>
        <item>story-action-placeholder</item>
        <item>story-box last-child</item>
        <item>bn-ph standard</item>
        <item>footer-container</item>
        <item>mpu-container</item>
        <item>mpu-container last-child</item>
    </string-array>
</resources>

网页去掉标题和广告的效果如下:

还有个问题,虽然这样可以隐藏掉我们不想显示的div,但是我们在onFinished()方法里去调用这段js代码,就意味着要在网页加载完成之后才来隐藏,出现的效果就是:刚开始还是会显示标题和广告,等网页加载完之后标题和广告会突然消失…(一个很不好的体验…)
那我们怎么优化呐?

public class NoAdWebViewClient extends WebViewClient {
    private Context context;
    private WebView webView;
    private boolean isClose;

    public NoAdWebViewClient(Context context,WebView webView) {
        this.context = context;
        this.webView = webView;
    }


    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        if(isClose){ //如果线程正在运行就不用重新开启一个线程了
            return;
        }
        new Thread(new Runnable() {
            @Override
            public void run() {
                isClose = true;
                while (isClose){
                    try {
                        Thread.sleep(100);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    handler.sendEmptyMessage(0x001);
                }
            }
        }).start();
    }

    Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            String js = getClearAdDivJs(context);
            Log.v("adJs",js);
            view.loadUrl(js); //加载js方法代码
            view.loadUrl("javascript:hideAd();"); //调用js方法
        }
    };

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        isClose = false;
    }

}

在NoAdWebViewClient里面我们重写onPageStarted方法，因为Android机制不允许在主线程做耗时和在子线程更新UI,所以我们开启一个线程，每100毫秒的循环注入js，并且利用Handler去注入js.然后在onPageFinished内关闭线程.这样之后，即使网络很慢，在没有回调onPageFinished的时候，也不会出现广告了。

总结:

第一点 : 上面javaScript方法中：
getElementsByTagName(“xxx”)是通过标签的名称获取,结果是一个标签数组
getElementsByClassName(“xxx”)是通过标签上定义的class属性获取,结果是一个标签数组
getElementById(“xxx”)是通过标签上定义的id属性获取,结果是单个标签

第二点 : 为什么要用火狐浏览器打开手机版的网页?
因为手机加载的网页和你在pc加载的网页地址不一样，当你用手机加载的时候，会自动重定向到m.xx.com这样的站点（m指mobile加载的，网页加载时一般是www.xx.com）。所以会造成网页上带有 Class的标签，在手机上加载时，Class标签就不见了，造成的后果是明明使用getElementByClassName（“”XXX“”）.remove()处理过了，但是没有起作用。所以要直接打开手机版查看源码

第三点 : 页面闪烁问题
虽然代码经过开启子线程通过handler来优化了网页加载过程中的标题和广告显示问题,但是这种去标题的方式还有个小不美的地方,因为本质是加载两次Url,一次是原本的Url,一次是处理过的URL ,所以刚开始会闪一次 . (这个问题还没有解决,欢迎有思路的小伙伴一起探讨~~~)
(文章参考地址:http://www.jianshu.com/p/d793c8d4ff81)