引言

Web背景知识

web三剑客 html + css + javascript

1、html

是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言(标记标签)，总的来说，html使用标记标签来描述网页，本文就用标签来代替标记标签进行说明。

标签是指,

标签里可带有各类属性，最基本的就是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刷新页面查看

可以看到网页上的横幅广告已经被我们屏蔽了。还有更多详细的屏蔽规则可以查看官方文档。