火狐浏览器和谷歌浏览器里都有能够屏蔽页面给广告的插件，最有名的是AdBlock和AdBlock Plus。前几天，我做一个统计，看看浏览网站的用户中有多少人使用了AdBlock插件，发现这个数目竟然有总浏览人数的1/5。
1/5是一个不小的数目。如何能让广告位在这1/5的使用了AdBlock插件的用户的页面上用其它图片代替呢？要想做到这一点，首先是要有个办法知道当前浏览器中使用了AdBlock插件。经过一些测试，我发现，AdBlock对“Ad”或“Google AD”这样的词非常敏感，只要是某个页面元素的ID或css class名中有“Ad”字样的，这个元素基本上都会被AdBlock插件屏蔽掉，也就是 display:none：
代码如下:
这个div将会被屏蔽掉
有了这个规律，我就能够使用JavaScript发现当前浏览器是否开启了AdBlock插件。首先，我们将Google广告代码放到一个div里，并且将div的css class name里放入一个很明显的表示google AD的类名：
代码如下:
这里放置Google广告代码
然后在页面的底部用Js检测，：
代码如下:
if ($('.google-ad').height() == 0) showOtherImage();
这里还有一个问题，Google的广告通常是指Dom加载完毕后显示的，为了保证在Google广告加载完成后再进行探测，要给js代码加入延迟执行特征，这样避免了误检测：
代码如下:
$(function(){
setTimeout(function(){
if ($('.google-ad').height() == 0)
showOtherImage();
},3000);
});
这里的showOtherImage();方法里我们能做些什么呢？我们可以放一些京东、当当、亚马逊会其它网站的促销图片和链接，通过获取佣金，多少算是对损失的一点弥补。
下载本文