检测用户是否开启了广告屏蔽插件并弹窗提醒

4.2
(6)

从旧站数据库找到这么一篇文章,可以提醒用户关闭adblock等广告屏蔽插件,美观而又大方,也不太让用户反感,当然还是使用的上一篇弹窗文章中的js,有稍作修改。

今天,有人在网站评论区问我如何做到提醒用户关闭Adblock等广告屏蔽的插件。今天,就把这种方法发出来。当然,本来是打算从知乎扒的,发现只能扒个css,扒不到js。所以,就从其他地方搞了一个发出来了。

检测用户是否开启了广告屏蔽插件并弹窗提醒

添加伪广告元素

这一步是为了,让广告屏蔽插件,屏蔽掉我们自己创建的元素,好后期判断是否存在这个var变量。在网站根目录新建一个js文件,重命名为adview_pic_cpc_cpm_cpa_guanggao_gg_ads_300x250.js,里面的内容如下

var adskilltest=true;

footer.php

原版文件

在你的底部文件footer.php中</body>前,插入如下代码。

<script src="/adview_pic_cpc_cpm_cpa_guanggao_gg_ads_300x250.js" type="text/javascript"></script>
<style type="text/css">
.addkillcont{position: fixed;width: 100%;height: 2000px;z-index: 999999;top: 0px;background: #CCC;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#00000000);background-color: rgba(103, 99, 99, 0.59);}
.addesc{position: relative;width: 360px;height: 200px;margin-left: auto;margin-right: auto;background: #FFF;border: 1px solid #CCC;webkit-box-shadow: 0 0 20px rgba(27,22,22,0.3);-moz-box-shadow: 0 0 20px rgba(27,22,22,0.3);-o-box-shadow: 0 0 20px rgba(27,22,22,0.3);box-shadow: 0 0 20px rgba(27,22,22,0.3);padding: 10px;margin-top: 10px;font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;}
</style>
<script type='text/javascript'>
    $(document).ready(function(){
        setTimeout(function(){new QXAdTest().init();},1);
    });
function QXAdTest(){
    var thisObj = this;
    //初始化,判断变量是否存在
    this.init = function(){
        try{
            if(typeof(adskilltest)=='undefined' ){
                this.DoShow();
                $('.idcloseadtips').on("click",function(){
                    $("#idadkillsho").remove();
                });
            }
        }catch(e){
            $("#idadkillsho").remove();
        }
    };
    this.DoShow =function(){
        try{
            var TPL='<div id="idadkillsho" class="addkillcont">' +
                    '<div class="addesc" id="addesc" style="display:none;">' +
                    '<div style="color:red;font-weight:bold; text-align:center;">屏蔽广告虽易,做网站不易,且屏蔽且珍惜...</div>'+
                    '<div style="padding-top:10px;color:#000;">       网站运营需要成本,收看、点击赞助商广告,我们将做的更好!</div>'+
                    '<div style="text-align:center;color:gray;">8秒后自动关闭...</div>'+
                    '<span class="idcloseadtips" style="position:absolute;right:10px;bottom:10px;font-weight:bold;color:gray;cursor:pointer">点此关闭</span>'+
                    '</div>' +
                  '</div>';
            var TPLObj = $(TPL);
            TPLObj.appendTo($('BODY')).hide().fadeIn(500,function(){
                    $("#addesc").animate({"margin-top":"150px"},600);
                    $("#addesc").slideDown(500,function(){
                        $("#addesc").animate({"height":"120px"},600);
                    }
                );
                //3秒移除
                thisObj.DelayRemove();
            });
        }catch(e){
            $("#idadkillsho").remove();//一定移除
        }
    }
    this.DelayRemove = function(){
        setTimeout(function(){
            $("#addesc").fadeOut(600,function(){
                $("#idadkillsho").remove();
            });
        },10000);
    }
}
</script>

当然,本站不会添加这种东西的,只是为了测试。参考链接:http://www.youranshare.com/push/code/phpcode/237.html

检测用户是否开启了广告屏蔽插件并弹窗提醒

魔改css及js

下面,魔改了代码,不再让用户反感,取消弹窗模式。只有底部一个文字提示,而且不会自动关闭了。

<script src="/adview_pic_cpc_cpm_cpa_guanggao_gg_ads_300x250.js" type="text/javascript"></script>
<style type="text/css">
.addkillcont{position: fixed;z-index: 999999;bottom: 0px;background: #CCC;width:100%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#00000000);}
.addesc{position: relative;margin-left: auto;margin-right: auto;background: #FFF;border: 1px solid #CCC;webkit-box-shadow: 0 0 20px rgba(27,22,22,0.3);-moz-box-shadow: 0 0 20px rgba(27,22,22,0.3);-o-box-shadow: 0 0 20px rgba(27,22,22,0.3);box-shadow: 0 0 20px rgba(27,22,22,0.3);padding: 10px;margin-top: 10px;font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;}
</style>
<script type='text/javascript'>
    $(document).ready(function(){
        setTimeout(function(){new QXAdTest().init();},1);
    });
function QXAdTest(){
    var thisObj = this;
    //初始化,判断变量是否存在
    this.init = function(){
        try{
            if(typeof(adskilltest)=='undefined' ){
                this.DoShow();
                $('.idcloseadtips').on("click",function(){
                    $("#idadkillsho").remove();
                });
            }
        }catch(e){
            $("#idadkillsho").remove();
        }
    };
    this.DoShow =function(){
        try{
            var TPL='<div id="idadkillsho" class="addkillcont">' +
                    '<div class="addesc" id="addesc" style="display:none;">' +
                    '<div style="color:red;font-weight:bold; text-align:center;">屏蔽广告虽易,做网站不易,且屏蔽且珍惜...</div>'+
                    '<span class="idcloseadtips" style="position:absolute;right:10px;bottom:10px;font-weight:bold;color:gray;cursor:pointer"><i class="fa fa-times-circle"></i></span>'+
                    '</div>' +
                  '</div>';
            var TPLObj = $(TPL);
            TPLObj.appendTo($('header')).hide().fadeIn(500,function(){
                    $("#addesc").animate({"margin-top":"0"},600);
                    $("#addesc").slideDown(500,function(){
                        $("#addesc").animate({"height":"40px"},600);
                    }
                );
            });
        }catch(e){
            $("#idadkillsho").remove();//一定移除
        }
    }
}
</script>

下面是修改后的样式!

检测用户是否开启了广告屏蔽插件并弹窗提醒

2022年9月1号,看到这篇文章,由于我的老站复活了一样,虽然关闭了好几年了。

共计6人评分,平均4.2

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

文章目录

旧站文章,作者:古哥,如若转载,请注明出处:https://iymark.com/articles/373.html

(1)
微信公众号
古哥的头像古哥管理团队
上一篇 2020年10月11日 15:01
下一篇 2020年10月12日 21:27

你可能感兴趣的文章

发表回复

登录后才能评论
微信小程序
微信公众号