近日，在把某網(wǎng)站用WebView加載到App里面的時(shí)候，出現(xiàn)的一個(gè)問(wèn)題?？聪聢D
簡(jiǎn)直了~帶著標(biāo)題還有廣告,簡(jiǎn)直太糟糕了.而且占屏幕的空間都太大了,很不協(xié)調(diào).... 所以我們要將他們所在的div隱藏掉,首先我想到的是讓服務(wù)器的哥們重新定制一個(gè)頁(yè)面來(lái)顯示,但是...坑的是他們不管...嗚嗚嗚~~~
俗話說(shuō),靠人不如靠己,咱們自己來(lái)!!
首先讓我們看看加載網(wǎng)頁(yè)的代碼:
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();
//設(shè)置WebView屬性，能夠執(zhí)行Javascript腳本
settings.setJavaScriptEnabled(true);
//支持緩存
settings.setAppCacheEnabled(true);
webView.setWebViewClient(new NoAdWebViewClient());
//加載需要顯示的網(wǎng)頁(yè)
webView.loadUrl("http://www.ftchinese.com/channel/commodity.html");
}
然后在火狐瀏覽器上通過(guò)Ctrl+shift+m打開(kāi)手機(jī)版網(wǎng)頁(yè)(這里有一個(gè)坑,等下再表....),右擊"查看元素"的調(diào)試模式可以輕易的獲取到標(biāo)題的div
找到對(duì)應(yīng)的div了,怎么才能隱藏他吶??? 一般我們獲取某個(gè)div是通過(guò)getElementsById("xxx")來(lái)找到對(duì)應(yīng)的div,但是我們發(fā)現(xiàn)div上并沒(méi)有id這個(gè)屬性,怎么辦? 有辦法! 我們還可以根據(jù)class屬性通過(guò)document.getElementsByClassName("xxx")來(lái)找到我們想要的div元素(不懂的,自動(dòng)補(bǔ)齊:http://www.runoob.com/jsref/met-document-getelementsbyclassname.html)
下面是繼承WebViewClient()實(shí)現(xiàn)隱藏標(biāo)題和廣告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();"); //調(diào)用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++) {
//通過(guò)div的id屬性刪除div元素
//js += "var adDiv"+i+"= document.getElementById('"+adDivs[i]+"');if(adDiv"+i+" != null)adDiv"+i+".parentNode.removeChild(adDiv"+i+");";
//通過(guò)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方法里調(diào)用的js方法整理后(為方便閱讀經(jīng)過(guò)處理):
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";
}
}
...
}
通過(guò)values文件夾下的arrays.xml去管理去要去掉的標(biāo)題和廣告div，遍歷adDiv的集合，組合成一段js代碼，注入到網(wǎng)頁(yè)中去掉廣告.
<?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>
網(wǎng)頁(yè)去掉標(biāo)題和廣告的效果如下:
還有個(gè)問(wèn)題,雖然這樣可以隱藏掉我們不想顯示的div,但是我們?cè)趏nFinished()方法里去調(diào)用這段js代碼,就意味著要在網(wǎng)頁(yè)加載完成之后才來(lái)隱藏,出現(xiàn)的效果就是:剛開(kāi)始還是會(huì)顯示標(biāo)題和廣告,等網(wǎng)頁(yè)加載完之后標(biāo)題和廣告會(huì)突然消失...(一個(gè)很不好的體驗(yàn)...)
那我們?cè)趺磧?yōu)化吶?
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){ //如果線程正在運(yùn)行就不用重新開(kāi)啟一個(gè)線程了
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();"); //調(diào)用js方法
}
};
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
isClose = false;
}
}
在NoAdWebViewClient里面我們重寫(xiě)onPageStarted方法，因?yàn)锳ndroid機(jī)制不允許在主線程做耗時(shí)和在子線程更新UI,所以我們開(kāi)啟一個(gè)線程，每100毫秒的循環(huán)注入js，并且利用Handler去注入js.然后在onPageFinished內(nèi)關(guān)閉線程.這樣之后，即使網(wǎng)絡(luò)很慢，在沒(méi)有回調(diào)onPageFinished的時(shí)候，也不會(huì)出現(xiàn)廣告了。
總結(jié):
第一點(diǎn) : 上面javaScript方法中：
getElementsByTagName("xxx")是通過(guò)標(biāo)簽的名稱(chēng)獲取,結(jié)果是一個(gè)標(biāo)簽數(shù)組
getElementsByClassName("xxx")是通過(guò)標(biāo)簽上定義的class屬性獲取,結(jié)果是一個(gè)標(biāo)簽數(shù)組
getElementById("xxx")是通過(guò)標(biāo)簽上定義的id屬性獲取,結(jié)果是單個(gè)標(biāo)簽
第二點(diǎn) : 為什么要用火狐瀏覽器打開(kāi)手機(jī)版的網(wǎng)頁(yè)?
因?yàn)槭謾C(jī)加載的網(wǎng)頁(yè)和你在pc加載的網(wǎng)頁(yè)地址不一樣，當(dāng)你用手機(jī)加載的時(shí)候，會(huì)自動(dòng)重定向到m.xx.com這樣的站點(diǎn)（m指mobile加載的，網(wǎng)頁(yè)加載時(shí)一般是www.xx.com）。所以會(huì)造成網(wǎng)頁(yè)上帶有 Class的標(biāo)簽，在手機(jī)上加載時(shí)，Class標(biāo)簽就不見(jiàn)了，造成的后果是明明使用getElementByClassName（“”XXX“”）.remove()處理過(guò)了，但是沒(méi)有起作用。所以要直接打開(kāi)手機(jī)版查看源碼
第三點(diǎn) : 頁(yè)面閃爍問(wèn)題
雖然代碼經(jīng)過(guò)開(kāi)啟子線程通過(guò)handler來(lái)優(yōu)化了網(wǎng)頁(yè)加載過(guò)程中的標(biāo)題和廣告顯示問(wèn)題,但是這種去標(biāo)題的方式還有個(gè)小不美的地方,因?yàn)楸举|(zhì)是加載兩次Url,一次是原本的Url,一次是處理過(guò)的URL ,所以剛開(kāi)始會(huì)閃一次 . (這個(gè)問(wèn)題還沒(méi)有解決,歡迎有思路的小伙伴一起探討~~~)
(文章參考地址:http://www.itdecent.cn/p/d793c8d4ff81)
