jquery拦截器_使用jQuery检测广告拦截器

对于许多免费发布内容的网站而言,广告(一种或多种广告)是其获取收入的主要来源之一。

从广告收入将用于支付费用,以所经营的网站 ,如Web服务器, 内容分发网络 (CDN), 网络连接 ,最重要的是, 作家产生的内容。

但是,广告可能会对读者造成极大的刺激。 广告在每个角落出现并弹出,导致许多互联网用户在浏览器中安装广告拦截程序扩展程序,从而使广告不可见

对于出版商来说,这是一个非常不幸的消息。 没有显示的广告意味着更少的页面浏览量 ,这将导致更少的收入。

我认为出版商,读者和广告商之间必须存在相互关系。 发布者应发布读者喜欢的有用内容 ,而广告商将在经济支持发布者发布更多有用内容,以换取相关和潜在的客户。

当用户使用广告拦截器软件时,许多网站都会显示一条消息或一种替代方法来恳求其支持 。 在这篇文章中,我们将向您展示如何在您的网站中应用它。 让我们来看看。

入门

首先,让我们看看其中一个广告拦截软件如何删除广告。 作为此处的示例,我们添加了一些包装在div中的class="ads"广告图像; 此类用于设置样式以及将区域定义为广告。

<div class="ads">
	<img src="images/ads.jpg" height="250" width="300" alt="">
</div>

从技术上讲,该图像应出现在浏览器中,但它不会出现在浏览器中,如下所示。 广告拦截器软件屏蔽了该图像。 要进行验证,您可以在浏览器控制台中看到错误日志。

广告
未显示广告图像,因为广告阻止程序扩展程序会阻止该图像。

另外,广告拦截器还通过添加display:none隐藏广告图像,如下所示。

不显示
display:图像未设置。

一旦知道了如何在网站上展示广告以及广告拦截器如何拦截广告,我们现在就可以确定我们应该如何编写脚本以显示在广告拦截器处于活动状态时将显示的替代消息

编写脚本

我们有几种方法可以做到这一点,其中一种方法是验证img仍然包含display:none 否则,我们将显示替代消息。 而且,使用jQuery,非常容易做到这一点。 首先,让我们创建一个新JavaScript函数。

function appendMessage() {
	var div = $('<div>').attr('id', 'message').text('Ad block is active');
	var add = $('body').append(div);
}

上面的函数将创建一个内容为“广告块处于活动状态”div元素,并将其附加到文档body

然后,我们将创建一个JavaScript条件语句,该语句表示:如果使用display:none设置了图像,则将运行appendMessage()函数。

setTimeout(function(){
	if($('img').css('display') == "none") {
		appendMessage();
	}
}, 500);

这将使我们能够准确地验证是否在display:none上未添加display:none

以下是整个代码:

$(document).ready(function() {
	function appendMessage(argument) {
		var div = $('<div>').attr('id', 'message').text('Ad block is installed and active. Please support us by disabling it.');
		var add = $('body').append(div);
	}
	setTimeout(function(){
		if($("img").css('display') == "none") {
			appendMessage();
		}
	}, 500);
});

请点击以下链接查看此功能的工作原理。

如果您有广告屏蔽,则应该看到以下消息(否则,您应该看到的是广告图片)。

替代讯息
重要笔记

此代码假定广告是图片。 值得注意的是,每个广告都是唯一的。 查看广告的显示方式,并找出隐藏的元素。


翻译自: https://www.hongkiat.com/blog/jquery-detect-ads-block/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值