近日，在把某網站用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屬性，能夠執行Javascript腳本
settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setAppCacheEnabled(true);
webView.setWebViewClient(new NoAdWebViewClient());
//加載需要顯示的網頁
webView.loadUrl("http://champion.gg/");
}
為了支援離線浏覽，打開了WebView的預設緩存，設定支援js支援,設定WebClient，這裡的NoAdWebViewClient在下面可以看到，在WebViewClient裡面去掉廣告.
@Override
//設定回退
//覆寫Activity類的onKeyDown(int keyCoder,KeyEvent event)方法
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {
webView.goBack(); //goBack()表示傳回WebView的上一頁面
return true;
}
return false;
}
重寫Activity的onKeyDown簡單back案件，當網頁可以back的時候讓網頁回到上一頁面.
來看一下NoAdWebViewClient的關鍵代碼:
繼承系統的WebViewClient，然後重寫onPageFinished方法。
package com.jelly.championgg;
import android.content.Context;
import android.graphics.Bitmap;
import android.os.Handler;
import android.os.Message;
import android.webkit.WebView;
import android.webkit.WebViewClient;
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 = ADFilterTool.getClearAdDivJs(context);
Log.v("adJs",js);
view.loadUrl(js);
}
}
在onPageFinished裡面外面執行的了一段Js,來看一看這段js(以下js為了友善閱讀，經過整理)：
javascript:
var adDiv0= document.getElementById('div-gpt-ad-1443488528500-4');
if(adDiv0 != null)
adDiv0.parentNode.removeChild(adDiv0);
var adDiv1= document.getElementById('div-gpt-ad-1443727656867-1');
if(adDiv1 != null)
adDiv1.parentNode.removeChild(adDiv1);
var adDiv2= document.getElementById('div-gpt-ad-1443488528500-5');
if(adDiv2 != null)
adDiv2.parentNode.removeChild(adDiv2);
...
去掉廣告的原理很簡單，注入一段js把顯示廣告的div删除就ok了，來看一下生成js的代碼:
public static String getClearAdDivJs(Context context){
String js = "javascript:";
Resources res = context.getResources();
String[] adDivs = res.getStringArray(R.array.adBlockDiv);
for(int i=0;i
js += "var adDiv"+i+"= document.getElementById('"+adDivs[i]+"');if(adDiv"+i+" != null)adDiv"+i+".parentNode.removeChild(adDiv"+i+");";
}
return js;
}
通過arrays.xml去管理去要去掉的廣告div，周遊廣告divId的集合，組合成一段js代碼，注入到網頁中去掉廣告.
div-gpt-ad-1443488528500-4
div-gpt-ad-1443727656867-1
div-gpt-ad-1443488528500-5
div-gpt-ad-1443488528500-6
div-gpt-ad-1443488528500-7
div-gpt-ad-1443727656867-0
div-gpt-ad-1443488528500-2
div-gpt-ad-1443488528500-3
div-gpt-ad-1443488528500-1
那麼這些廣告div的Id是如何擷取的呢？我們通過Chrome浏覽器可以很友善的擷取到這些Id,可以看到通過F12的調試模式可以輕易的擷取到廣告div的Id
擷取廣告ID
完成後我們就可以看到沒有廣告的頁面了，完成效果。
最後效果
其實這裡還有一個問題，當網絡比較慢的情況下，我們的網頁會一直加載，然後當還沒有調用onPageFinished的時候，使用者就已經開始操作了，是以我們可以優化一下這種方式：
package com.jelly.championgg;
import android.content.Context;
import android.graphics.Bitmap;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.webkit.WebView;
import android.webkit.WebViewClient;
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(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
handler.sendEmptyMessage(0x001);
}
}
}).start();
}
Handler handler = new Handler(){
@Override
public void handleMessage(Message msg) {
String js = ADFilterTool.getClearAdDivJs(context);
Log.v("adJs",js);
webView.loadUrl(js);
}
};
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
isClose = false;
}
}
在NoAdWebViewClient裡面我們重寫onPageStarted方法，并且開啟一個線程，每1秒的循環注入js，在這裡由于不能在子線程裡面操作WebView，是以利用Handler去注入js.并且在onPageFinished内關閉線程.這樣之後，即使網絡很慢，在沒有回調onPageFinished的時候，也不會出現廣告了。