zoukankan      html  css  js  c++  java
  • 如何检测浏览器是否安装了Adblock,uBlock Origin,Adguard,uBlock等广告屏蔽插件

          由于我们网站上的广告经常被一些广告插件给屏蔽掉,上级给我下达了一个检测浏览器是否安装了屏蔽广告的插件的任务。

          经过研究,借鉴,参考,整合了如下三种解决方案。

          方案一:

           利用广告插件通过对含有google-ad,testad,ad等,带ad的敏感词汇的dom元素进行屏蔽的方式寻找突破口,我模拟了一个<div class="google-ad">这里是一个广告位</div>将这个div加载在页面的dom节点的最顶端,发现所有的广告插件,都能检测到这个广告位并且采用dispaly:none,或者将div的高度塌陷变为0,于是我们有了下面的方法。

           在页面顶部加上<div class="google-ad testAd"> 这里是一个广告位</div>,然后加入如下代码:

        

    <script src="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>

            方案二:

            模拟动态加载一个广告(ads.js)的方式,如果安装了广告插件,则这个广告js(ads.js)不会被加载成功。

            新建一个空白的ads.js文件。

            在页面上写上如下代码:

     1 <script src="jquery.min.js"></script>
     2 <div style="text-align:center;clear:both;">
     3 <script>
     4 $(function(){
     5         $.ajax({
     6           url: "ads.js",
     7           dataType: "script"
     8         }).fail(function () {
     9            alert('您的浏览器安装了屏蔽广告的插件Adblock,or uBlock Origin,要使您能够正常使用网站请先屏蔽浏览器上的相关的广告屏蔽插件。');
    10         });
    11      })
    12 </script>

            方案三:

            参照网上一位仁兄写的代码,亲测有效。项目地址:https://github.com/sitexw/FuckAdBlock。

            方案四:逆向思维

            要想自己网站上的广告位图片不被屏蔽掉,网站上加载的广告js能够正常加载,就不要使用能够被广告插件轻易读取识别的命名规则去命名广告了。

            这个问题的解决方法,再次检验了一个实用方法论:当苦苦思索的方法解决不了问题时,不妨转化思路可以采取迂回的战术间接寻求问题的解决方法。

  • 相关阅读:
    VUE 路由
    JS小表达式
    JS正则表达式
    react案例—实现组件之间的通信
    React脚手架搭建
    react属性三ref
    react属性二props
    java多线程2
    jvm小结2
    spark小结3
  • 原文地址:https://www.cnblogs.com/xinggood/p/8780977.html
Copyright © 2011-2022 走看看