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[] adDi
4000
vs = 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)