引言
Web背景知識
web三劍客 html + css + javascript
1泉孩、html
是用來描述網(wǎng)頁的一種語言，它不是一種編程語言，而是一種標記語言（標記標簽）封豪，總的來說抖剿，html使用標記標簽來描述網(wǎng)頁朽寞，本文就用標簽來代替標記標簽進行說明。
標簽是指<html></html>,<div></div>
標簽里可帶有各類屬性斩郎，最基本的就是class和id脑融。class屬性的作用是引用css樣式,id的作用是配合javascript使用，具有唯一性缩宜。
若想了解更多關(guān)于html的資料肘迎，請點擊這里。
2锻煌、css?
css的官方名字叫層疊樣式表妓布，它的出現(xiàn)是為了解決內(nèi)容和表現(xiàn)分離的問題，一般存放在.css文件里宋梧。
?我們在創(chuàng)建UIView之后是不是要給這個UIView設(shè)置frame,backgroundcolor等等一些屬性, 其實這些屬性就是對應(yīng)這web 中的css, css就是給用html控件添加樣式用的.
具體的屬性和值可點擊這里匣沼。
3、javascript
是腳本語言捂龄，它是連接前臺（html）和后臺服務(wù)器的橋梁释涛，它是操縱html的能手加叁。
它現(xiàn)在不僅可以做web端了,還可以用來做后臺服務(wù)端了(node.js),而且還可以用來做移動端了(React Native).但是,在web端中,javascript一般用來處理html中的控件的動作啊,動畫啊,改變屬性等。
至于js語法介紹唇撬，則太過于瑣碎它匕，我了解也不多，詳情請點擊這里
攔截廣告實戰(zhàn)
網(wǎng)頁上的廣告一般是站長在網(wǎng)頁植入一段js代碼窖认，要想屏蔽廣告只需要將這些js屏蔽掉即可豫柬。
下面示范如何使用chrome屏蔽廣告，幫助我們更好了解web廣告是如何植入的
1耀态、使用Chrome開發(fā)者模式調(diào)試（需要選擇手機/平板模式）
在chrome 中打開http://m.haodou.com/topic-327282.html?id=327223轮傍，按F12進入開發(fā)者模式：瀏覽器設(shè)置 -> 更多工具 -> 開發(fā)者工具 -> 手機模式
2、在代碼中隱藏此廣告
實現(xiàn)步驟1后首装，在切換到控制臺標簽创夜，如圖：
用js代碼區(qū)獲取到要隱藏的控件
點擊console -> 在命令行中輸入要執(zhí)行的代碼 -> 返回執(zhí)行結(jié)果
命令1：document.getElementsByClassName('adbox')
上面一行代碼是獲取到html 中class 是’adbox’的控件. 但是可以看見返回值是被[]包圍的,這其實是一個數(shù)據(jù).
繼續(xù)獲取到我們需要的廣告數(shù)據(jù)
命令2：document.getElementsByClassName('adbox')[0]
對獲取到的廣告屏蔽掉
命令3：document.getElementsByClassName('adbox')[0].style.display = 'none'
可以發(fā)現(xiàn)命令執(zhí)行完廣告也被屏蔽掉了。
上面一行代碼就是去改變要隱藏的控件的display屬性,將這個css屬性改為none,就是不讓這個控件顯示,這時,我們要隱藏的數(shù)據(jù)就會自動消失了.
到處為止,我們的js代碼就寫好了.在這個html頁面中執(zhí)行行代碼就可以隱藏廣告.但是我們的最終目的是在WebView中執(zhí)行這行代碼就行了.
AdblockPlus 過濾規(guī)則
Adblock git 地址：https://github.com/adblockplus
android adblock git地址：https://github.com/adblockplus/libadblockplus-android
項目中打算使用adblock快速集成仙逻，那么需要先了解一下adblock的過濾規(guī)則驰吓。詳細的內(nèi)容官方文檔有給出介紹，可以訪問一下網(wǎng)址：
https://adblockplus.org/zh_CN/filters
過濾實戰(zhàn)
瀏覽器：Chrome
前提準備：安裝adblock?plus插件
前往—》更多工具—》擴展程序—》獲取更多擴展程序—》搜索Adblock?plus安裝
安裝完畢后進入Adblock過濾設(shè)置
EasyList China + EasyList就是常用的一些規(guī)則庫系奉，目前有adblock維護檬贰。除了這些過濾規(guī)則，我們同樣也可以使用自己的過濾規(guī)則缺亮，這里為了方便演示翁涤，暫時去掉了這兩個過濾規(guī)則。
下面我們來示范一下如何去掉這種橫幅廣告萌踱，以blog.163.com為例
1葵礼、按F12進入調(diào)試模式，點擊左上角指針定位到該橫幅廣告
如圖所示并鸵，其中步驟3獲取到的area top-gg-area就是我們想要屏蔽的目標
2鸳粉、進入adblock自定義規(guī)則界面，加入自定義規(guī)則163.com##.top-gg-area
3园担、回到blog.163.com刷新頁面查看
可以看到網(wǎng)頁上的橫幅廣告已經(jīng)被我們屏蔽了届谈。還有更多詳細的屏蔽規(guī)則可以查看官方文檔。
