引言
Web背景知识
web三剑客 html + css + javascript
1、html
是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言（标记标签），总的来说，html使用标记标签来描述网页，本文就用标签来代替标记标签进行说明。
标签是指<html></html>,<div></div>
标签里可带有各类属性，最基本的就是class和id。class属性的作用是引用css样式,id的作用是配合javascript使用，具有唯一性。
若想了解更多关于html的资料，请点击这里。
2、css
css的官方名字叫层叠样式表，它的出现是为了解决内容和表现分离的问题，一般存放在.css文件里。
我们在创建UIView之后是不是要给这个UIView设置frame,backgroundcolor等等一些属性, 其实这些属性就是对应这web 中的css, css就是给用html控件添加样式用的.
具体的属性和值可点击这里。
3、javascript
是脚本语言，它是连接前台（html）和后台服务器的桥梁，它是操纵html的能手。
它现在不仅可以做web端了,还可以用来做后台服务端了(node.js),而且还可以用来做移动端了(React Native).但是,在web端中,javascript一般用来处理html中的控件的动作啊,动画啊,改变属性等。
至于js语法介绍，则太过于琐碎，我了解也不多，详情请点击这里
拦截广告实战
网页上的广告一般是站长在网页植入一段js代码，要想屏蔽广告只需要将这些js屏蔽掉即可。
下面示范如何使用chrome屏蔽广告，帮助我们更好了解web广告是如何植入的
1、使用Chrome开发者模式调试（需要选择手机/平板模式）
在chrome 中打开http://m.haodou.com/topic-327282.html?id=327223，按F12进入开发者模式：浏览器设置 -> 更多工具 -> 开发者工具 -> 手机模式
2、在代码中隐藏此广告
实现步骤1后，在切换到控制台标签，如图：
用js代码区获取到要隐藏的控件
点击console -> 在命令行中输入要执行的代码 -> 返回执行结果
命令1：document.getElementsByClassName('adbox')
上面一行代码是获取到html 中class 是’adbox’的控件. 但是可以看见返回值是被[]包围的,这其实是一个数据.
继续获取到我们需要的广告数据
命令2：document.getElementsByClassName('adbox')[0]
对获取到的广告屏蔽掉
命令3：document.getElementsByClassName('adbox')[0].style.display = 'none'
可以发现命令执行完广告也被屏蔽掉了。
上面一行代码就是去改变要隐藏的控件的display属性,将这个css属性改为none,就是不让这个控件显示,这时,我们要隐藏的数据就会自动消失了.
到处为止,我们的js代码就写好了.在这个html页面中执行行代码就可以隐藏广告.但是我们的最终目的是在WebView中执行这行代码就行了.
AdblockPlus 过滤规则
Adblock git 地址：https://github.com/adblockplus
android adblock git地址：https://github.com/adblockplus/libadblockplus-android
项目中打算使用adblock快速集成，那么需要先了解一下adblock的过滤规则。详细的内容官方文档有给出介绍，可以访问一下网址：
https://adblockplus.org/zh_CN/filters
过滤实战
浏览器：Chrome
前提准备：安装adblock plus插件
前往—》更多工具—》扩展程序—》获取更多扩展程序—》搜索Adblock plus安装
安装完毕后进入Adblock过滤设置
EasyList China + EasyList就是常用的一些规则库，目前有adblock维护。除了这些过滤规则，我们同样也可以使用自己的过滤规则，这里为了方便演示，暂时去掉了这两个过滤规则。
下面我们来示范一下如何去掉这种横幅广告，以blog.163.com为例
1、按F12进入调试模式，点击左上角指针定位到该横幅广告
如图所示，其中步骤3获取到的area top-gg-area就是我们想要屏蔽的目标
2、进入adblock自定义规则界面，加入自定义规则163.com##.top-gg-area
3、回到blog.163.com刷新页面查看
可以看到网页上的横幅广告已经被我们屏蔽了。还有更多详细的屏蔽规则可以查看官方文档。
网友评论