有些网页上充斥着令人厌恶的广告，这些广告不仅阻碍了信息的获取，有的还严重影响了浏览者的心情。特别是某些毫不相关的多媒体广告和弹出式窗口，不仅让人感到被骚扰，还很容易误点到，浪费宝贵的时间。由此便诞生了大名鼎鼎的跨平台 AdBlock 插件，在任何主流浏览器上都有它的扩展或插件，用户可以安装它并屏蔽绝大多数的广告。
: m$ l/ ~1 B; W2 z/ `) i8 O既然 AdBlock 有检测广告并屏蔽它们的方法，作为网页制作者，其实也有反过来检测 AdBlock 的方法。5 _( i5 `; e3 r; [6 T
为什么要检测 AdBlock3 q. V2 M" {" A% u2 m9 Q, M
这是一个有争论的问题：用户有选择不看广告、在浏览器页面上销毁广告的权利，网站也有捆绑广告和信息一同派发给你并收取广告商展示费用的自由。这两者都不能互相干预，并且在没有明确法律法规的环境下，你可以防范我，我也可以防范你。
" K0 W, b8 o5 j: Y3 Q# I$ ]
ads on webpage
" P6 N% A4 [& u; [# m8 M
除了向 AdBlock 直接提交 “可接受的广告网站” 申请进入白名单以要求直接免受屏蔽之外，下面介绍 6 种从网站本身出发的检测 AdBlock 并触发相关操作的方法。: L5 {. b) j* F7 v
以下的方法都是以不修改广告代码本身的基础上完成的，因为诸如 Google AdSense 的广告联盟要求不得修改代码。6 j& V A2 H, W# k9 m
检测广告模块可见高度$ ]0 E$ j1 T; E% s+ i- X
这是一种很朴实的方法，原理也很简单，就是检测对应广告模块的高度是否小于它应有的高度，若小于就说明它被置空塌陷了，也即说明启用了 AdBlock。3 \ K: r" g9 P6 i, y; x7 }( z
代码类似如下if( document.getElementById('ads').clientHeight < 90 ){
% t; J) \( T" F1 x; h; N& O//AdBlock Detected
* E5 I% k: ?+ L8 B: a# ~" j) a4 J5 k}
检测可见广告的个数
& A: C. d; R7 X+ m3 ]这是一个和上述类似的方法，也很朴实，那就是检测当前页面上的广告个数是否达到预期，因为某些广告可能并没有触发 AdBlock 的规则得以显示，所以可以利用检查广告的个数的方法来达到目的。
0 A% o# w3 w, Z# A借助 jQuery，代码类似如下if( $('.ads').filter(':visible').length < 3 ){
( @' \2 B% L: L# c' v2 ~// Ads showing less than 3
# l% ^" n% s9 p// AdBlock Detected
7 V' K4 M, v2 g# c4 q}
检测 google_jobrunner; p9 t9 R1 D) I4 G
这个方法仅仅适用于 Google AdSense 广告。在加载了 AdSense 的广告代码之后，有一个 window.google_jobrunner 对象被建立，而 AdBlock 会阻止 AdSense 代码的加载，此时这个对象将不存在。我们可以靠这一点来检测 AdBlock。
4 d% s5 k4 d! A- L- H7 w5 X其代码看起来类似于if ( typeof(window.google_jobrunner) != 'object' ){
- O: N' H& ?' o9 y7 U9 y% A// AdSense js not loaded
1 a w4 |- R0 O h) Q3 A// AdBlock detected6 d+ J$ d8 J+ @; F
}
检测 adsbygoogle 类型是否是数组
1 p( r+ c# f) `( r' x这个方法仅仅适用于 Google AdSense 广告。如果你使用了含有 ins 标签的新异步代码，则可以使用这个方法。其原理是，adsbygoogle 在当前页面加载时被初始化为一个数组，而当 AdSense 的代码被加载时，它被进化为一个对象 object，而 AdBlock 会阻止 AdSense 代码的加载。因此，我们通过检查 adsbygoogle 的状态就可以知道 AdBlock 有没有安装。9 U$ Q! K3 C8 `
其代码应该类似于window.setTimeout(function(){
/ T$ l4 R! Y7 i' L0 i4 [& p# K; {& W1 @if(adsbygoogle instanceof Array) { i! V/ P" j* l
// AdSense js not loaded7 u: F8 m& t, j( E2 R) }
// AdBlock detected. C# t; B! E. E9 h: y. ?2 F8 a7 _
} }, 2000);
* p6 W9 A8 W6 A Q3 b使用 Ajax 模拟一个广告代码加载请求) M6 m9 W& u) ?5 Z5 m) O
我们知道 AdBlock 会阻止广告代码的加载，因此，我们可以通过尝试模拟加载一个广告代码 ads.js ，如果AdBlock 屏蔽了这次行为，可以触发其失败的方法，达到检测的目的。
: h) N+ {1 W+ |" b0 Y5 v1 l, D借助 jQuery，我们可以这样写$.ajax({
. f: y4 i m) A: z0 a+ @- c5 f! o; J1 [ `url: "ads.js",
, U# D# r# h5 p! BdataType: "script"
* W) L/ O9 P. k7 p' Z1 e9 H}).fail(function () {# L% G: m+ f& g; w }
// Ads.js not loaded
: X$ s! b- F% q2 c/ X// AdBlock detected
+ |8 N" D4 ~( ~2 J});
0 [7 c8 I& |! O$ [; ]5 u" J- l如图所示，加载 ads.js 时，行为被 AdBlock 阻止：& O2 u# w4 R2 M( n# r# w
ads.js blocked
+ \3 {# c4 p$ W+ J: L加载额外的 ads.js 帮助判断 6 l4 X( e/ k+ R) S1 v, s6 h6 N' C
我们知道 AdBlock 会屏蔽页面中类似名称为 adsbygoogle.js、ads.js 的脚本文件，所以我们可以利用这个特点来引入一个自己的 ads.js 来帮助判断。如何实现呢？7 E4 r& u2 Y2 @
首先创建一个 ads.js 文件，这个文件里只有一句话：
+ x; o: L5 V, c6 B8 J4 cvar isAdEnabled = !!1;+ n% m) X. X3 ~7 y1 p
然后，我们在网页页面上试图引入这个脚本文件：
9 f% S1 ]" \" J& L) w* w$ h<script src="ads.js" type="text/javascript"></script>
; V& @; S! c3 p如果存在 AdBlock，ads.js 会被屏蔽加载，因此 isAdEnabled 这个变量就不会被建立。
% p: ~2 w' w% U- d, t# q于是，我们这样来检测：var isAdEnabled = isAdEnabled || !1;: U5 H, q0 t/ @6 C1 ]# G
if( !isAdEnabled ){
8 e* J' P6 g" A# o/ z: {' T//Ads.js not loaded- [ M* K% y# X& e# f4 u/ W
// AdBlock detected( d# m* v0 B3 J4 W
}
写在最后, Q5 m8 ?6 l4 s8 J) r% h: a
不仅仅有上述的检测代码，还有人甚至做好了 js 插件、wordpress 插件可以直接现成的用，它们功能丰富并且可以自定义设置。你可以根据自己的情况选择钟意的方案。但在此应当注意的是，广告并不总是坏的，相反，网络上存在着很多有价值的广告。如果自己的网站因为广告的问题被用户反感，那么广告提供商和网站管理员都应该想想怎么着手去改善这一切，而不应该激怒用户而让他们用上 AdBlock，最后双方都有损失。7 U; s8 C8 y2 @9 {6 R" h: ]$ D X
注：相关网站建设技巧阅读请移步到建站教程频道。 |
|
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡