由于我们网站上的广告经常被一些广告插件给屏蔽掉,上级给我下达了一个检测浏览器是否安装了屏蔽广告的插件的任务。
经过研究,借鉴,参考,整合了如下三种解决方案。
方案一:
利用广告插件通过对含有google-ad,testad,ad等,带ad的敏感词汇的dom元素进行屏蔽的方式寻找突破口,我模拟了一个<div>这里是一个广告位</div>将这个div加载在页面的dom节点的最顶端,发现所有的广告插件,都能检测到这个广告位并且采用dispaly:none,或者将div的高度塌陷变为0,于是我们有了下面的方法。
在页面顶部加上<div> 这里是一个广告位</div>,然后加入如下代码:
<script src="http://www.likecs.com/jquery.min.js"></script> <script> $(function(){ if($(\'.google-ad\').height()==0 || $(\'.google-ad\').css(\'display\') == \'none\'){ console.log($(\'.google-ad\').height()); console.log($(\'.google-ad\').css(\'display\')); alert(\'您的浏览器安装了屏蔽广告的插件Adblock,or uBlock Origin,要使您能够正常使用网站请先屏蔽浏览器上的相关的广告屏蔽插件。\'); } }) </script>