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 相关文章推荐
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
Node实现搜索框进行模糊查询
Jun 28 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
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
Python列表元素常见操作简单示例
2019/10/25 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
实习医生自我评价
2013/09/22 职场文书
校运会广播稿100字
2014/01/27 职场文书
五年级科学教学反思
2014/02/05 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
联谊活动总结
2014/08/28 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
小学教育见习总结
2015/06/23 职场文书
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python