检测我的网站上的广告拦截然后显示横幅？

Question

如果你的浏览器启用了某种类型的广告阻止软件，那么网站会显示一个小横幅，告诉用户广告收入用于托管项目，他们应该考虑关闭广告阻止。我在网上搜索了一段时间，除了下面的代码什么都没有找到，它仍然不能工作。我怎么能显示广告，如果它被屏蔽了，它会显示一个横幅，告诉用户关闭它？

喜欢这个网站：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);