JavaScript检测AdBlock屏蔽并替换广告位的方案

AdBlock屏蔽广告的现状与挑战

广告往往令人反感，无论是在观看电视、电影、优酷视频还是浏览网页时，满屏的广告常让人深恶痛绝。然而，对于中小型网站站长或博客主而言，广告收入往往是维持网站或博客正常运营的唯一资金来源。那些仅凭无私分享稿件就能坚持数年的博主寥寥无几，大多数人在热情耗尽后便逐渐停止更新。

在Firefox和Chrome等主流浏览器中，存在多种能够屏蔽页面广告的插件，其中最为知名的是AdBlock和AdBlock Plus。近期进行的一项统计显示，访问网站的用户中约有五分之一使用了AdBlock插件，这一比例相当可观。

利用JavaScript检测AdBlock插件

五分之一的用户比例不容忽视。为了在这部分使用AdBlock插件的用户页面上展示其他图片，首要任务是确定当前浏览器是否启用了AdBlock插件。经过多次测试发现，AdBlock对“Ad”或“Google AD”等词汇极为敏感。只要页面元素的ID或CSS类名中包含“Ad”字样，该元素通常会被AdBlock插件屏蔽，表现为display:none属性。

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

实现广告位替换的具体代码

基于上述规律，我们可以利用JavaScript来检测当前浏览器是否开启了AdBlock插件。具体做法是将Google广告代码嵌入一个div中，并为该div的CSS类名赋予一个明显的标识，例如包含“google AD”字样。

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

接着，在页面底部使用JavaScript进行检测：

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

延迟执行与替代方案

此外，还需注意一个问题：Google广告通常在DOM加载完成后才会显示。为了确保在Google广告加载完毕后再进行检测，避免误判，JavaScript代码需要加入延迟执行的机制。

$(function(){
setTimeout(function(){
if ($('.google-ad').height() == 0)
showOtherImage();
},3000);
});

在showOtherImage()方法中，我们可以做些什么呢？我们可以放置一些京东、当当、亚马逊或其他网站的促销图片和链接，通过获取佣金，多少算是对损失的一点弥补。