用JavaScript探测页面上的广告是否被AdBlock屏蔽了的方法

每个人都讨厌广告。看电视、看电影、看优酷、看网页时，对满天飞的广告也是深恶痛绝。广告是一个不招人喜欢的东西。但是，对一个中小网站站长/ 博客主来说，广告几乎是唯一的能成支持网站/博客正常运转的资金来源。如果一个博客主，只是无私发布稿件，能坚持几年的，很少。大多数慢慢失去了热情。

火狐浏览器和谷歌浏览器里都有能够屏蔽页面给广告的插件，最有名的是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();方法里我们能做些什么呢？我们可以放一些京东、当当、亚马逊会其它网站的促销图片和链接，通过获取佣金，多少算是对损失的一点弥补。

原文：http://www.webhek.com/js-detect-adblock/

用JavaScript探测页面上的广告是否被AdBlock屏蔽了的方法相关推荐

linux访问网页元素,Linux_DOM和JAVASCRIPT访问页面上的元素，访问方法：getElementById() - phpStudy...
DOM和JAVASCRIPT访问页面上的元素访问方法: getElementById():返回拥用传递给该方法的指定id的第一个对象的引用. getElementsByName():返回拥用传递该方 ...
用JavaScript获取页面上被选中的文字的技巧
这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...
微信小程序特殊布局下，页面上拉触底事件onReachBottom无法触发解决方法
一.js import fn from '../../utils/functions.js'; // 你自己封装的方法集 Page({data: {list: [],page: 1,loading: ...
Firefox火狐浏览器如何屏蔽CSDN页面上的广告（亲测有效！）
前言:现在可能需要挂一下VPN才可以使用今天真的是被CSDN的广告恶心到啦! 截图如下: 这个还好吧~虽然显得我很幼稚! 但是这个真的是不能忍呀! 什么呀!索性以后都不要再见啦! 搜索插件来屏蔽广告 ...
在web页面上快速生成批量二维码的实用方法
最近帮同事制作了一个二维码工具,需求是一次性输入多个卡号批量生成二维码并打印.好了,现在我们直接看代码: <!DOCTYPE html> <html><head>& ...
用 javascript 获取当页面上鼠标（光标）位置
用 javascript 获取当页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip) 等等.当然,这里我们依然要面对浏览器的兼容问题,在不同的浏览器下,对这些相关的属性处理 ...
php上传多张图片为什么只显示一张,javascript,_js多张图片上传也拿到多张图片的路径在页面上展示只显示一张？只执行了一次？？？，javascript - phpStudy...
js多张图片上传也拿到多张图片的路径在页面上展示只显示一张?只执行了一次??? js多张图片上传也拿到多张图片的路径在页面上展示只显示一张?只执行了一次??? self.$els.upload ...
使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小
查看本章节查看作业目录需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...
greasemonkey_Greasemonkey –在任何页面上执行自定义JavaScript
greasemonkey If you want to try executing custom local scripts on any page you visit, try Greasemonk ...

用JavaScript探测页面上的广告是否被AdBlock屏蔽了的方法

用JavaScript探测页面上的广告是否被AdBlock屏蔽了的方法相关推荐

最新文章

热门文章