?

DEMO: http://sources.ikeepstudying.com/anti-adblock-killer/

?

有些網(wǎng)頁上充斥著令人厭惡的廣告，這些廣告不僅阻礙了信息的獲取，有的還嚴重影響了瀏覽者的心情。特別是某些毫不相關的多媒體廣告和彈出式窗口，不僅讓人感到被騷擾，還很容易誤點到，浪費寶貴的時間。由此便誕生了大名鼎鼎的跨平臺 AdBlock 插件，在任何主流瀏覽器上都有它的擴展或插件，用戶可以安裝它并屏蔽絕大多數(shù)的廣告。

既然 AdBlock 有檢測廣告并屏蔽它們的方法，作為網(wǎng)頁制作者，其實也有反過來檢測 AdBlock 的方法。

?

為什么要檢測 AdBlock

這是一個有爭論的問題：用戶有選擇不看廣告、在瀏覽器頁面上銷毀廣告的權(quán)利，網(wǎng)站也有捆綁廣告和信息一同派發(fā)給你并收取廣告商展示費用的自由。這兩者都不能互相干預，并且在沒有明確法律法規(guī)的環(huán)境下，你可以防范我，我也可以防范你。

除了向 AdBlock 直接提交 “可接受的廣告網(wǎng)站” 申請進入白名單以要求直接免受屏蔽之外，下面介紹 6 種從網(wǎng)站本身出發(fā)的檢測 AdBlock 并觸發(fā)相關操作的方法。

以下的方法都是以不修改廣告代碼本身的基礎上完成的，因為諸如 Google AdSense 的廣告聯(lián)盟要求不得修改代碼。

?

檢測廣告模塊可見高度

這是一種很樸實的方法，原理也很簡單，就是檢測對應廣告模塊的高度是否小于它應有的高度，若小于就說明它被置空塌陷了，也即說明啟用了 AdBlock。

代碼類似如下

      if( document.getElementById('ads').clientHeight < 90 ){

//AdBlock Detected

}
    

?

此方案的可行性為中。某些情況下 AdBlock 屏蔽了某個廣告之后的處理情形比較特殊，不會使得廣告模塊塌陷，而是維持設定的高度顯示空白，那個時候就不管用了。

?

檢測可見廣告的個數(shù)

這是一個和上述類似的方法，也很樸實，那就是檢測當前頁面上的廣告?zhèn)€數(shù)是否達到預期，因為某些廣告可能并沒有觸發(fā) AdBlock 的規(guī)則得以顯示，所以可以利用檢查廣告的個數(shù)的方法來達到目的。

借助 jQuery，代碼類似如下

      if( $('.ads').filter(':visible').length < 3 ){

// Ads showing less than 3

// AdBlock Detected

}
    

?

此方案的可行性仍然為中，理由和上一個方法類似。

?

檢測 google_jobrunner

這個方法僅僅適用于 Google AdSense 廣告。在加載了 AdSense 的廣告代碼之后，有一個 window.google_jobrunner 對象被建立，而 AdBlock 會阻止 AdSense 代碼的加載，此時這個對象將不存在。我們可以靠這一點來檢測 AdBlock。

其代碼看起來類似于

      if ( typeof(window.google_jobrunner) != 'object' ){

// AdSense js not loaded

// AdBlock detected

}
    

?

檢測 adsbygoogle 類型是否是數(shù)組

這個方法僅僅適用于 Google AdSense 廣告。如果你使用了含有 ins 標簽的新異步代碼，則可以使用這個方法。其原理是，adsbygoogle 在當前頁面加載時被初始化為一個數(shù)組，而當 AdSense 的代碼被加載時，它被進化為一個對象 object，而 AdBlock 會阻止 AdSense 代碼的加載。因此，我們通過檢查 adsbygoogle 的狀態(tài)就可以知道 AdBlock 有沒有安裝。

其代碼應該類似于

      window.setTimeout(function(){

if(adsbygoogle instanceof Array) {

// AdSense js not loaded

// AdBlock detected

} }, 2000);
    

?

此方案的可行性為高，因為這充分利用了 AdSense 的特點，并且非常準確，效率也很高。代碼中的 setTimeout 是為了彌補 AdSense 代碼運行所花費的時間，大約兩秒夠了。

?

使用 Ajax 模擬一個廣告代碼加載請求

我們知道 AdBlock 會阻止廣告代碼的加載，因此，我們可以通過嘗試模擬加載一個廣告代碼 ads.js ，如果AdBlock 屏蔽了這次行為，可以觸發(fā)其失敗的方法，達到檢測的目的。

借助 jQuery，我們可以這樣寫

      $.ajax({

url: "ads.js",

dataType: "script"

}).fail(function () {

// Ads.js not loaded

// AdBlock detected

});
    

?

此方案的可行性很高，因為這戳中了 Adblock 的弱點。其中 ads.js 本身可以是一個空文件，但它不能不存在，否則會發(fā)生 404 錯誤，導致誤判。所以你需要在這個目錄下放一個 ads.js 文件。你甚至可以把它叫做 adsbygoogle.js 文件。

如圖所示，加載 ads.js 時，行為被 AdBlock 阻止：

?

加載額外的 ads.js 幫助判斷

我們知道 AdBlock 會屏蔽頁面中類似名稱為 adsbygoogle.js、ads.js 的腳本文件，所以我們可以利用這個特點來引入一個自己的 ads.js 來幫助判斷。如何實現(xiàn)呢？

首先創(chuàng)建一個 ads.js 文件，這個文件里只有一句話：

      var isAdEnabled = !!1;
    

?

然后，我們在網(wǎng)頁頁面上試圖引入這個腳本文件：

      <script src="ads.js" type="text/javascript"></script>
    

?

如果存在 AdBlock，ads.js 會被屏蔽加載，因此 isAdEnabled 這個變量就不會被建立。

于是，我們這樣來檢測：

      var isAdEnabled = isAdEnabled || !1;

if( !isAdEnabled ){

//Ads.js not loaded

// AdBlock detected

}
    

?

這樣，如果 ads.js 被屏蔽了，isAdEnabled 就會被初始化為 false。這個方案的可能性也很高。

?

寫在最后

不僅僅有上述的檢測代碼，還有人甚至做好了 js 插件、wordpress 插件可以直接現(xiàn)成的用，它們功能豐富并且可以自定義設置。你可以根據(jù)自己的情況選擇鐘意的方案。但在此應當注意的是，廣告并不總是壞的，相反，網(wǎng)絡上存在著很多有價值的廣告。如果自己的網(wǎng)站因為廣告的問題被用戶反感，那么廣告提供商和網(wǎng)站管理員都應該想想怎么著手去改善這一切，而不應該激怒用戶而讓他們用上 AdBlock，最后雙方都有損失。

?

DEMO: http://sources.ikeepstudying.com/anti-adblock-killer/

?

原文： http://blog.netsh.org/posts/adblock-detect_2017.netsh.html

?

justcode.ikeepstuding.com