为具有广告拦截器的用户显示替代内容

我不知道广告拦截器是如何工作的，但例如，我有一个 Chrome 广告拦截器让我选择一个包含要删除的广告的特定 DOM 元素：，拦截器会以某种方式删除它。<div id="ad_holder"> ... ads ... </div>

如果你在该 div 中放置一些 javascript，使用一个短计时器，这将修改一个全局变量，然后执行另一个计时器，读取该全局变量，那么如果变量设置正确，您能否假设页面上没有广告拦截器？如果阻止程序在 Chrome 评估该 javascript 后删除了 div，会发生什么情况，尽管删除了父 div，计时器 stil 会设法设置变量吗？

AdBlock 还维护着一个“坏”服务器 （http://www.doubleclick.com？） 的公共列表，并且可能会阻止来自这些服务器的内容的 http 请求。如果它与 Chrome 集成，以便它可以定义某种内容策略——加载什么，不加载什么，就可以做到这一点。您可以使用前面描述的方法检测这种情况。如果您的客户是广告提供商，我想它迟早会被列入黑名单:)

拦截器可能只修改 CSS 并隐藏整个 div，但这很容易被检测到。

最常见的技巧是创建一个 JavaScript 文件，其名称通常被广告拦截器阻止，例如。 如果文件被阻止，您就知道访问者启用了广告拦截器。/ads/advert.js

CSS 文件通常不会被广告拦截器列表阻止，因此这是一种更安全的方法。

在这里从臀部拍摄，但我认为您可以在页面加载后使用一些 javascript 检查广告 div 的内容。

<!-- html -->
    <div id="MyAdDiv">
       <div id="BeaconContainer" style="display:none">I rendered!</div>
       // Ad content here.  
    </div>

// javascript

    var d = document.getElementById("MyAdDiv");

    if ( d.innerHTML.indexOf("I rendered!") === -1 )  {
       // Your ad has been blocked.
       // Run code to launch WhiteList request message.
    }

我不知道广告拦截器何时会这样做，因此使用 setTimeout（） 将此函数的执行延迟几秒钟可能是个好主意。您可能还可以使用一些ajax调用来做一些有趣的事情，例如收集有关有多少用户正在运行广告拦截器的统计信息。管理层就是喜欢这种东西。

更新：我刚刚安装了 Chrome 的 adblock 并针对 StackOverflow 进行了检查。看起来 AdBlock 只是删除了广告容器的内容，因此上述方法将起作用。

广告拦截器基本上使用一些 ID 或 jQuery 等元素来操作一些元素，这些元素存储在他们的数据库中，这是在 DOM 准备好一段时间后完成的。

因此，您必须在一定时间后检查您的广告元素是否纵，例如，在 DOM 准备就绪后 3 秒。您基本上可以检查（因为 AdBlockers 隐藏了它）CSS 属性或广告元素的 innerHTML。下面是一个示例：display

工作演示：http://jsfiddle.net/cxvNy/（使用 AdBlock for Chrome 测试，您需要激活此功能）

如果您的广告 HTML 是：

<div id="google_ads_frame1">aa</div>

然后：

$(function(){
   setTimeout(function(){
      if($("#google_ads_frame1").css('display')=="none") //use your ad's id here I have used Google Adense
      {
          $('body').html("We noticed you have an active Ad Blocker. Example.com is ad funded, we promise our ads are of high quality and are unobtrusive. The best help you could provide to keep us running, is to whitelist us in your ad blocker. Thanks!");
      }
  },3000);
});

希望上面的代码是不言自明的:)

最终，我使用了以下实现（类似于此站点的实现）。使用以下代码：

function abp() {
    if ($('.ad').height() == 0) {
        $('.ad').css("height", "90px");
        $('.ad').css("background-image", "url(/static/images/msblock.png)");
    }
}
$(abp);

在文档的最后。似乎像专业人士一样工作。感谢大家的精彩回答，为大家点赞！

我最喜欢的方法是简单地在我的网站上所有漂亮的大型有用内容块周围添加一类“广告”或“广告”或类似的东西，然后当使用广告拦截器的人查看它时，他们什么也看不到。

他们被迫禁用广告拦截才能看到内容。

不要为警告而烦恼，让他们弄清楚。这不是使用广告拦截软件的傻瓜。

以下是一些流行的 adblock 扩展程序的当前阻止规则列表。只需选择他们阻止的类或 ID（使用您的开发人员工具查看 css 类列表）

这也可以使用简单的 JavaScript 来完成，而无需使用 jQuery。

<script>
window.onload = function(){
  setTimeout(showAdblockImage, 3000); 
};
function showAdblockImage(){
    //get all google ad elements
    var adsList = document.querySelectorAll("ins.adsbygoogle");
    if(!adsList){ return;}
    for(var i=0; i<adsList.length;i++){
        if(adsList[i].innerHTML.replace(/\s/g, "").length != 0){
            //AdBlock is not active, hence exit
            break;
        }
        //apply inline css to force display
        adsList[i].style.cssText = 'display:block !important';
        //modify html content of element
        adsList[i].innerHTML='<img src="imageurl/img_1.jpg" />';
    } 
}
</script>

参考：放置替代内容来代替 AdBlock 审查广告

<script> // Run after all the page elements have loaded  window.onload = function(){ 
// This will take care of asynchronous Google ads
setTimeout(function() {     
  // We are targeting the first banner ad of AdSense
  var ad = document.querySelector("ins.adsbygoogle"); 
  // If the ad contains no innerHTML, ad blockers are at work
  if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {     
    // Since ad blocks hide ads using CSS too
    ad.style.cssText = 'display:block !important';         
    // You can put any text, image or even IFRAME tags here
    ad.innerHTML = '<img src="http://blog.liveurlifehere.com/wp-content/uploads/2015/01/adblock.jpg" width="300" height="250" />';      
  }      
}, 2000); // The ad blocker check is performed 2 seconds after the page load   }; </script>

使用此代码，您可以设置图像以代替谷歌广告

您可以实现非常好且易于使用的 https://github.com/sitexw/FuckAdBlock。