美文网首页
Webview拦截广告

Webview拦截广告

作者: 不正就是歪573 | 来源:发表于2017-09-07 15:34 被阅读600次

引言

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刷新页面查看

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

相关文章

网友评论

      本文标题:Webview拦截广告

      本文链接:https://www.haomeiwen.com/subject/gkyijxtx.html