JavaScript實現(xiàn)檢查頁面上的廣告是否被AdBlock屏蔽了的方法
每個人都討厭廣告。看電視、看電影、看優(yōu)酷、看網(wǎng)頁時，對滿天飛的廣告也是深惡痛絕。廣告是一個不招人喜歡的東西。但是，對一個中小網(wǎng)站站長/博客主來說，廣告幾乎是唯一的能成支持網(wǎng)站/博客正常運轉(zhuǎn)的資金來源。如果一個博客主，只是無私發(fā)布稿件，能堅持幾年的，很少。大多數(shù)慢慢失去了熱情。
火狐瀏覽器和谷歌瀏覽器里都有能夠屏蔽頁面給廣告的插件，最有名的是AdBlock和AdBlock Plus。前幾天，我做一個統(tǒng)計，看看瀏覽網(wǎng)站的用戶中有多少人使用了AdBlock插件，發(fā)現(xiàn)這個數(shù)目竟然有總瀏覽人數(shù)的1/5。
1/5是一個不小的數(shù)目。如何能讓廣告位在這1/5的使用了AdBlock插件的用戶的頁面上用其它圖片代替呢？要想做到這一點，首先是要有個辦法知道當(dāng)前瀏覽器中使用了AdBlock插件。經(jīng)過一些測試，我發(fā)現(xiàn)，AdBlock對“Ad”或“Google AD”這樣的詞非常敏感，只要是某個頁面元素的ID或css class名中有“Ad”字樣的，這個元素基本上都會被AdBlock插件屏蔽掉，也就是 display:none：
<div class='google-ad testAd'> 這個div將會被屏蔽掉 </div>
有了這個規(guī)律，我就能夠使用JavaScript發(fā)現(xiàn)當(dāng)前瀏覽器是否開啟了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廣告加載完成后再進(jìn)行探測，要給js代碼加入延遲執(zhí)行特征，這樣避免了誤檢測：
$(function(){
setTimeout(function(){
if ($('.google-ad').height() == 0)
showOtherImage();
},3000);
});
這里的showOtherImage();方法里我們能做些什么呢？我們可以放一些京東、當(dāng)當(dāng)、亞馬遜會其它網(wǎng)站的促銷圖片和鏈接，通過獲取傭金，多少算是對損失的一點彌補。
- javascript實現(xiàn)網(wǎng)頁屏蔽Backspace事件，輸入框不屏蔽
- javascript屏蔽右鍵代碼
- JavaScript屏蔽指定區(qū)域內(nèi)右鍵菜單
- JavaScript 關(guān)鍵字屏蔽實現(xiàn)函數(shù)
- javascript 屏蔽鼠標(biāo)鍵盤的幾段代碼
- 在textarea中屏蔽js的某個function的javascript代碼
- 屏蔽鼠標(biāo)右鍵、Ctrl+n、shift+F10、F5刷新、退格鍵 的javascript代碼
- 實用javaScript技術(shù)-屏蔽類
- javascript實現(xiàn)劃詞標(biāo)記+劃詞搜索功能
- javascript過濾危險腳本方法
- JavaScript實現(xiàn)自動對頁面上敏感詞進(jìn)行屏蔽的方法
相關(guān)文章
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)禁止分享代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了js實現(xiàn)兩點之間畫線的方法,涉及javascript圖形繪制的相關(guān)技巧,需要的朋友可以參考下2015-05-05
js高亮效果實現(xiàn)代碼，直接靜態(tài)頁面即可，不用每次都要生成2008-09-09
javascript將list轉(zhuǎn)換成樹狀結(jié)構(gòu)的實例
下面小編就為大家?guī)硪黄猨avascript將list轉(zhuǎn)換成樹狀結(jié)構(gòu)的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
解析element-ui中upload組件傳遞文件及其他參數(shù)的問題
這篇文章主要介紹了element-ui中upload組件如何傳遞文件及其他參數(shù),分析一下我使用element-ui遇到的問題以及解決方法，需要的朋友可以參考下2021-11-11
單例模式的定義是：保證一個類僅有一個實例，并提供一個訪問它的全局訪問點。文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了JavaScript中filter的用法,結(jié)合實例形式分析了filter的功能、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2019-02-02
淺析ES6的八進(jìn)制與二進(jìn)制整數(shù)字面量
這篇文章給大家介紹了ES6特性中的八進(jìn)制和二進(jìn)制整數(shù)字面量，介紹的挺不錯的現(xiàn)在分享給大家，有需要的可以參考借鑒。2016-08-08
TypeScript轉(zhuǎn)javaScript的方法示例
本文主要介紹了TypeScript轉(zhuǎn)javaScript的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
使用PHP+JavaScript將HTML頁面轉(zhuǎn)換為圖片的實例分享
這篇文章主要介紹了使用PHP+JavaScript將HTML元素轉(zhuǎn)換為圖片的實例分享,文后結(jié)果的截圖只能體現(xiàn)出替換的字體,也不能說將靜態(tài)頁面轉(zhuǎn)為圖片可以加快加載,只是這種做法比較interesting XD需要的朋友可以參考下2016-04-04