Question

如果您的浏览器启用了某种广告拦截软件，则该网站会显示一个小横幅，告诉用户广告收入用于托管项目，他们应该考虑关闭Adblock。我在网上搜索了一段时间，除了下面的代码之外什么都没找到，但它仍然无法正常工作。如何展示广告，如果广告被屏蔽，则会显示横幅告诉用户将其关闭？

喜欢这个网站：http://www.gamesbox.com/search-results/1802436/drunk-spiderman

<div class="myTestAd" style=" text-align:center;margin:10px">

    <iframe src="http://cdn1.adexprt.com/exo_na/sky1.html" width="120" height="600" frameborder="0" scrolling="no"></iframe>

</div>


<script type="text/javascript">

function TestPage() {
    if ($('.myTestAd').height() == 0)
        alert("You are blocking my beautiful adverts, you swine!");
}

$(TestPage);

</script>

Answer 1

方便的是，广告拦截器通常会改变CSS而不是HTML。因此，我们可以使用JavaScript（最好是jQuery）来检查CSS是否已被修改。

这是jQuery中的一个例子。

(function( $ ){
    $.fn.adblocked = function() {
        if($(this).css('display') == 'none' || $(this).css('height') == 0) { // etc
            return true;
        }
        return false;
    }; 
})( jQuery );

用法：

if( $('#myImage').adblocked() ) {
    alert('wow');
}

Answer 2

首先，您需要给广告加载机会。超时后（在我的情况下为10秒钟），查询包含广告的所有组件（在我的情况下，元素标记为“ my-horizontal-ad”），并检查高度是否大于“未加载”（我的广告为水平）。由于您网站的CSS，该高度可能有所不同（在我的情况下，未加载的水平广告的高度为44px）。

setTimeout(() => {
const myAds = document.querySelectorAll('my-horizontal-ad > div');
const areAdsAvailable = Array.from(myAds).some(ad => ad.clientHeight > 50);
console.log('areAdsAvailable',areAdsAvailable);
}, 10000);

在我的网站上检测Adblock然后显示横幅？

2 个答案: