JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法


Posted in Javascript onNovember 03, 2014

每个人都讨厌广告。看电视、看电影、看优酷、看网页时,对满天飞的广告也是深恶痛绝。广告是一个不招人喜欢的东西。但是,对一个中小网站站长/博客主来说,广告几乎是唯一的能成支持网站/博客正常运转的资金来源。如果一个博客主,只是无私发布稿件,能坚持几年的,很少。大多数慢慢失去了热情。

火狐浏览器和谷歌浏览器里都有能够屏蔽页面给广告的插件,最有名的是AdBlock和AdBlock Plus。前几天,我做一个统计,看看浏览网站的用户中有多少人使用了AdBlock插件,发现这个数目竟然有总浏览人数的1/5。

1/5是一个不小的数目。如何能让广告位在这1/5的使用了AdBlock插件的用户的页面上用其它图片代替呢?要想做到这一点,首先是要有个办法知道当前浏览器中使用了AdBlock插件。经过一些测试,我发现,AdBlock对“Ad”或“Google AD”这样的词非常敏感,只要是某个页面元素的ID或css class名中有“Ad”字样的,这个元素基本上都会被AdBlock插件屏蔽掉,也就是 display:none:

<div class='google-ad testAd'> 这个div将会被屏蔽掉 </div>

有了这个规律,我就能够使用JavaScript发现当前浏览器是否开启了AdBlock插件。首先,我们将Google广告代码放到一个div里,并且将div的css class name里放入一个很明显的表示google AD的类名:

<div class='google-ad testAd'> 这里放置Google广告代码</div>

然后在页面的底部用Js检测,:

if ($('.google-ad').height() == 0) showOtherImage();

这里还有一个问题,Google的广告通常是指Dom加载完毕后显示的,为了保证在Google广告加载完成后再进行探测,要给js代码加入延迟执行特征,这样避免了误检测:

$(function(){

   setTimeout(function(){

  if ($('.google-ad').height() == 0)

   showOtherImage();

  },3000);

});

这里的showOtherImage();方法里我们能做些什么呢?我们可以放一些京东、当当、亚马逊会其它网站的促销图片和链接,通过获取佣金,多少算是对损失的一点弥补。

Javascript 相关文章推荐
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 #Javascript
详解jquery中$.ajax方法提交表单
Nov 03 #Javascript
jquery处理json对象
Nov 03 #Javascript
js格式化时间小结
Nov 03 #Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 #Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 #Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 #Javascript
You might like
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
平面设计岗位职责
2013/12/14 职场文书
学生出入校管理制度
2014/01/16 职场文书
销售主管竞聘书
2014/03/31 职场文书
倡议书格式范文
2014/04/14 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
房贷收入证明范本
2015/06/12 职场文书
六年级作文之自救
2019/12/19 职场文书