?

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

?

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

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

?

為什么要檢測 AdBlock

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

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

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

?

檢測廣告模塊可見高度

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

代碼類似如下

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

//AdBlock Detected

}
    

?

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

?

檢測可見廣告的個數

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

借助 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 類型是否是數組

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

其代碼應該類似于

      window.setTimeout(function(){

if(adsbygoogle instanceof Array) {

// AdSense js not loaded

// AdBlock detected

} }, 2000);
    

?

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

?

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

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

借助 jQuery，我們可以這樣寫

      $.ajax({

url: "ads.js",

dataType: "script"

}).fail(function () {

// Ads.js not loaded

// AdBlock detected

});
    

?

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

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

?

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

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

首先創建一個 ads.js 文件，這個文件里只有一句話：

      var isAdEnabled = !!1;
    

?

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

      <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 插件可以直接現成的用，它們功能豐富并且可以自定義設置。你可以根據自己的情況選擇鐘意的方案。但在此應當注意的是，廣告并不總是壞的，相反，網絡上存在著很多有價值的廣告。如果自己的網站因為廣告的問題被用戶反感，那么廣告提供商和網站管理員都應該想想怎么著手去改善這一切，而不應該激怒用戶而讓他們用上 AdBlock，最后雙方都有損失。

?

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

?

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

?

justcode.ikeepstuding.com