JavaScript實現檢查頁面上的廣告是否被AdBlock屏蔽了的方法_javascript技巧

每個人都討厭廣告。看電視、看電影、看優酷、看網頁時，對滿天飛的廣告也是深惡痛絕。廣告是一個不招人喜歡的東西。但是，對一個中小網站站長/部落客來說，廣告幾乎是唯一的能成支援網站/部落格正常運轉的資金來源。如果一個部落客，只是無私發布稿件，能堅持幾年的，很少。大多數慢慢失去了熱情。

Firefox瀏覽器和Google瀏覽器裡都有能夠屏蔽頁面給廣告的外掛程式，最有名的是AdBlock和AdBlock Plus。前幾天，我做一個統計，看看瀏覽網站的使用者中有多少人使用了AdBlock外掛程式，發現這個數目竟然有總瀏覽人數的1/5。

1/5是一個不小的數目。如何能讓廣告位在這1/5的使用了AdBlock外掛程式的使用者的頁面上用其它圖片代替呢？要想做到這一點，首先是要有個辦法知道當前瀏覽器中使用了AdBlock外掛程式。經過一些測試，我發現，AdBlock對“Ad”或“Google AD”這樣的詞非常敏感，只要是某個頁面元素的ID或css class名中有“Ad”字樣的，這個元素基本上都會被AdBlock外掛程式屏蔽掉，也就是 display:none：

複製代碼 代碼如下:

<div class='google-ad testAd'> 這個div將會被屏蔽掉 </div>

有了這個規律，我就能夠使用JavaScript發現當前瀏覽器是否開啟了AdBlock外掛程式。首先，我們將Google廣告代碼放到一個div裡，並且將div的css class name裡放入一個很明顯的表示google AD的類名：

複製代碼 代碼如下:

<div class='google-ad testAd'> 這裡放置Google廣告代碼</div>

然後在頁面的底部用Js檢測，：

複製代碼 代碼如下:

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

這裡還有一個問題，Google的廣告通常是指Dom載入完畢後顯示的，為了保證在Google廣告載入完成後再進行探測，要給js代碼加入順延強制特徵，這樣避免了誤檢測：

複製代碼 代碼如下:

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

這裡的showOtherImage();方法裡我們能做些什麼呢？我們可以放一些京東、噹噹、亞馬遜會其它網站的促銷圖片和連結，通過擷取傭金，多少算是對損失的一點彌補。