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();方法里我们能做些什么呢？我们可以放一些京东、当当、亚马逊会其它网站的促销图片和链接，通过获取佣金，多少算是对损失的一点弥补。
相关文章
这篇文章主要介绍了微信小程序实现禁止分享代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了js实现两点之间画线的方法,涉及javascript图形绘制的相关技巧,需要的朋友可以参考下2015-05-05
js高亮效果实现代码，直接静态页面即可，不用每次都要生成2008-09-09
下面小编就为大家带来一篇javascript将list转换成树状结构的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
解析element-ui中upload组件传递文件及其他参数的问题
这篇文章主要介绍了element-ui中upload组件如何传递文件及其他参数,分析一下我使用element-ui遇到的问题以及解决方法，需要的朋友可以参考下2021-11-11
单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了JavaScript中filter的用法,结合实例形式分析了filter的功能、使用方法及相关操作注意事项,需要的朋友可以参考下2019-02-02
这篇文章给大家介绍了ES6特性中的八进制和二进制整数字面量，介绍的挺不错的现在分享给大家，有需要的可以参考借鉴。2016-08-08
本文主要介绍了TypeScript转javaScript的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下2016-04-04
最新评论