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