Question

搜索Google和Stackoverflow几个小时后，我找不到解决方案。我要做的是检测Adblock plus并暂时显示一条简单的消息。

我想要做的是使用JavaScript文件或jQuery检测Adblock加上而不是。大多数adblock加检测脚本都使用了一个文件，例如“show_ads.js”托管在自己的域中，并在其中设置一行来设置“adblock = false;”

使用JavaScript文件的问题是，用户可以将该文件列入白名单，并且不再检测到它。我正在寻找的是一个直接加载到HTML中的JavaScript，可以检测是否有人在不使用文件的情况下使用广告拦截器。

以下示例：

<script type="text/javascript">
 // line of code that detects if using ad blocker

 if so display message
 </script>

这样做的原因是没有广告拦截器可以在服务器上列出JavaScript文件。是的我知道还有其他方法可以使用NoScript插件来解决这个问题，但我已经有了解决方法。我有一个从未尝试过的好主意，一旦我完成它，广告拦截器就无法阻止它。

非常感谢任何建议和示例。

Answer 1

您不需要使用插件来检测adblock，只需使用：

<script type="text/javascript">
    var adblock = true;
</script>
<script type="text/javascript" src="adframe.js"></script>
<script type="text/javascript">
    if(adblock) {
          //adblock is installed and enabled on this site :-D
    }
</script>

adframe.js 的内容：

adblock = false;

<强>更新 Adblock Plus会根据已有的模式阻止某些请求或隐藏某些元素。其中一种模式是（在 patterns.ini 中）：

[Filter]
text=/adframe.
hitCount=843
lastHit=1456391595626

会阻止其中包含/adframe.的任何网址。

更新2018年8月25日

Adblock plus改变了查找列表的方式并阻止了广告。它有一堆名为subscriptions的列表，用于阻塞。例如，这是默认的一个：

https://easylist-downloads.adblockplus.org/easylist.txt

您可以使用此文件中的规则查找要使用的文件名。例如，您可以使用 seo-ads.js

P.S for developers ：出于某种原因，我无法让ABP在本地环境中阻止这些文件。

P.S ：ABP是我最喜欢的广告拦截器:-D

Answer 2

使用我的插件“FuckAdBlock”，它可以非常轻松地检测到AdBlock： https://github.com/sitexw/FuckAdBlock

示例：

fuckAdBlock.on(true, function() {
    alert('AdBlock detected !');
}).on(false, function() {
    alert('AdBlock is not detected =)');
});

在线示例：http://fuckadblock.sitexw.fr/

Answer 3

我在该领域看到的是使用广告背后的背景图片。如果adblock未处于活动状态，则广告将显示在背景图片上（这会使背景图片无法显示）。如果adblock处于有效状态，则广告会被屏蔽，而用户则会看到背景图片。

<div id="ad-container">
  <img src="../ad/ad.png" id="ad">
</div>

使用CSS：

#ad-container {
  background-image: url( http://domain.com/pleasedonotuseadblocker.png );
  height: 200px;
  width: 200px;
}

#ad {
  height: 200px;
  width: 200px;
}

Answer 4

如果您希望展示广告，即使AdBlock处于有效状态，您也必须了解AdBlock的功能。

AdBlock可以阻止资源加载
AdBlock可以隐藏DOM中的特定元素。

虽然据说AdBlock也可以修改CSS，但除了隐藏和折叠元素外，我找不到任何文档。

那么你究竟能做些什么呢？比AdBlock更聪明？

您可以以永远不会“匹配”的方式伪装您的请求（例如http://domain.com/ae9a70e0a.png，其中图像名称每次都是随机的，没有公共前缀）。据我所知，AdBlock中的规则不能包含正则表达式。规则要么不匹配广告，要么匹配太多资源。可以在服务器上重写这样的网址以指向您的广告。

但是，虽然AdBlock可能无法阻止您的广告加载，但它仍然可以隐藏广告。没有真正的解决方法。将始终有一个智能的CSS选择器，它将 - 选择你的元素。但是，您可以添加包含内容的背景图像。这对广告（不可点击）无用，但可能会帮助您显示其他消息。缺点是，如果有人决定阻止那个恼人的背景图片，它也会隐藏你的内容。

就脚本而言，您可以使用ajax请求加载广告。我想（但无法测试）如果无法加载资源（因为它被阻止），它将会出错。（jQuery中的$.ajax( request ).error( function() { ... } );或常规javascript中的等价物）。您可以使用它来做其他事情。您可以将其包含在文档本身而不是外部资源中，以确保它始终运行（如果启用了javascript）。即使这样，你也无法确定“你做了什么”将会被明显地显示出来。作为最后的手段，您可以制作window.alert( ... )。假设在3页内，如果您使用该访问者，您的访问者将永远不会回来。

我能想到的另一种方法是向服务器创建一个websocket（这是AdBlock无法阻止的）。在服务器端，您需要检查在加载某个页面时是否未加载广告页面。这些信息可以通过套接字发送，套接字可以在脚本中用来做“某事”。然而，这听起来很复杂，对于“只是”检测AdBlock的脚本来说是一个重要的开销。

Answer 5

一个简单的Ajax调用可以完成这项任务：

var xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function() {
  if( xmlhttp.readyState == XMLHttpRequest.DONE ){
    if( xmlhttp.status !== 404 ){
        console.log("Blocking ads")
    }else{
        console.log("Not blocking ads")
    }
  }
}
xmlhttp.open("GET", "/498100ffe815d700cd838d1/ads/showad.js", true)
xmlhttp.send()

甚至更好，没有额外的HTTP开销：

var adBlockTester = document.createElement('div');
adBlockTester.innerHTML = '&nbsp;';
adBlockTester.className = 'adsbox';
document.body.appendChild(adBlockTester);
window.setTimeout(function() {
  if( adBlockTester.offsetHeight === 0 ){
    console.log("Blocking ads")
  }else{
    console.log("Not blocking ads")
  }
  document.body.removeChild(adBlockTester);
}, 60);

Answer 6

以下是检测adblock的代码。您可以了解代码的工作原理here

function detect()
{
    //create a iframe. Append the iframe to the body. And then after 100ms check if their offsetHeight, display or visibility is set such a way that user cannot see them.
    //In the URL use the words specific to advertising so that Adblock can do string matching.
    var iframe = document.createElement("iframe");
    iframe.height = "1px";
    iframe.width = "1px";
    iframe.id = "ads-text-iframe";
    iframe.src = "http://domain.com/ads.html";

    document.body.appendChild(iframe);

    setTimeout(function()
               {
                   var iframe = document.getElementById("ads-text-iframe");
                   if(iframe.style.display == "none" || iframe.style.display == "hidden" || iframe.style.visibility == "hidden" || iframe.offsetHeight == 0)
                   {
                        alert("Adblock is blocking ads on this page");
                        iframe.remove();
                   }
                   else
                   {
                        alert("Adblock is not detecting ads on this page");
                        iframe.remove();
                   }
               }, 100);
}

Answer 7

以下代码段几乎可以检测到所有广告拦截器。需要jQuery。

(function(){
    var bait = 'http://googleads.g.doubleclick.net/pagead/gen_204?id=wfocus&gqid=advertisment&advert=ads';
      $.ajax({ url: bait, dataType: "script"})
      .fail(function () { alert('ad blocked'); })
      .abort(function () { alert('ad blocked'); });
    })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

它包含在一个自动执行的匿名函数中，因此它不会干扰网站上的其他变量或代码。

bait使用最受欢迎的广告投放网络（Google的双击），并包含easylist和其他人使用的其他一些查询参数。

fail()和abort()方法都是必需的，但只会调用其中一个。

不要将代码放在adblocker.js或类似代码中，因为这些文件名本身会被阻止加载。内联它或将其包含在随机/任意文件名中，或者将其组合到主站点JS文件中。

Answer 8

就我而言，亚行隐藏了内容，即使没有广告......（仅仅因为许多网址中存在ad字，因为它是帖子类型的slu ..）

但我注意到他们没有删除内容，只是将display：none应用于正文

作为额外的解决方案，

我刚注意到应用display：block！important; de body，防止通过Adblock plus隐藏内容

<body style="display: block !important;">
  <img src="url-containg-ad-ads-word.jpg" alt="you should see this anyway" >
</body>

Answer 9

简单的javascript / jQuery检测，效果很好：

$('body').append('<div id="ad-container" style="position:absolute;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" id="ad"></div>');
var ad_container = $('body').children('#ad-container');
if(!ad_container.is(":visible")) {
  // Add your warning and/or adblock detection logic here.
}
ad_container.remove();

Answer 10

对我来说，没有任何技巧可行，可能是我做错了。但这是实施谷歌广告的一种非常具体的方式。

window.onload = function() {
   if (document.getElementsByClassName('google-auto-placed').length == 0){
                // Adblock Detected
   }        
}

如果您有其他广告系统，例如亚马逊，请通过检查页面查找其通用类名称/ ID。

如果您计划将此代码放在单独的.js文件中，请确保文件名中没有“广告”字样。只需将其命名为 magic.js

如果Google决定更改div名称，则此方法将失败。但这似乎不太可能。

Answer 11

我发现的最聪明最简单的方法是：

1）将此html代码添加到标记中可能位于顶部的某个位置。

<div id="bait" class="pub_300x250" style="color: #fff">.</div>

通常，广告拦截器会检测到Easylist中提到的（pub_300x250）广告尺寸，并将其拦截，这是由“诱饵”触发的。

2），然后将此js代码添加到脚本文件中。

if (document.getElementById("bait").offsetHeight === 0) {
    // function code or alert (whatever) here.
   alert("Ad-Blocker DETECTED");
}

我们的脚本通过检查“诱饵” ID来检测当前html中是否存在该标记。

在每个浏览器的每个网站上，Adblock，AdBlock-Plus和uBlock Origin对我来说都是有效的。

Answer 12

这是一场军备竞赛，当然，我支持任何人阻止广告的权利，但我也支持依赖广告收入的网站试图说服用户，或者说服他们订阅或捐款以弥补广告收入的损失。我不赞成试图强迫用户看广告的网站，但礼貌的信息很好。

无论如何，现在值得注意的是，有很多广告拦截扩展/插件，他们都可以采用不同的方式，而且操作系统和浏览器之间有时也有所不同。我发现，就我的目的而言，这个jQuery选择器足以至少看到AdBlock或AdBlockplus是否正在使用，跨平台，至少在Chrome和Firefox中使用：

if($("div[id^=google_ads_iframe_] iframe:visible").length == 0)  {
    // pop up a message or whatever
}

Answer 13

这是处理它的最简单方法（没有iframe，没有jquery）：

<div class="container-fluid">
  <div *ngFor="let restaurant of restaurants; let i = index" >
    <div class="row row-centered justify-content-center" *ngIf="i % 3 === 0">
              <div class="col-md-3 centered">
           <img
          [src]="restaurants[i].imagePath"
          class="img-responsive"
          style="max-height: 300px; width:100%;"/>
          <h2>{{restaurants[i].name}} </h2>
          <h3>{{restaurants[i].category}} </h3>
          <p>{{restaurants[i].description}} </p>
      </div>
      <div class="col-md-3 centered">
       <img
          [src]="restaurants[i + 1].imagePath"
          class="img-responsive"
          style="max-height: 300px; width:100%;"/>
          <h2>{{restaurants[i + 1].name}} </h2>
          <h3>{{restaurants[i + 1].category}} </h3>
          <p>{{restaurants[i + 1].description}} </p>
      </div>
      <div class="col-md-3 centered">
       <img
          [src]="restaurants[i+2].imagePath"
          class="img-responsive"
          style="max-height: 300px; width:100%;"/>
          <h2>{{restaurants[i+2].name}} </h2>
          <h3>{{restaurants[i+2].category}} </h3>
          <p>{{restaurants[i+2].description}} </p>
        </div>
    </div>
  </div>
</div>

Answer 14

我知道这有点老了，但是恕我直言，这是一个更好的方法：将其添加到您的<head>部分：

<script type="text/javascript">
window.onload = function() {
var iframe = document.createElement('iframe'),
    randomDomain = Math.floor(Math.random() * (10000 - 100 + 1)) + 100,
    iframeLoaded = true;

iframe.src = "http://"+ randomDomain +".com/ads.html";
iframe.height = ".1px";
iframe.width = ".1px";
iframe.id = 'some-ad';
iframe.onload = function() {iframeLoaded = false;};

document.body.appendChild(iframe);

setTimeout(function() { 
    var someAd = document.getElementById('some-ad');
    if(!iframeLoaded ||
       someAd == null || 
       someAd.style.display == "none" || 
       someAd.style.display == "hidden" || 
       someAd.style.visibility == "hidden" || 
       someAd.offsetHeight == 0)
        document.getElementById('ab-message').style.display = 'block';
    someAd.remove();
}, 500);
};
</script>`<br>

现在，您可以将ab-message ID用于向AdBlock用户显示消息的任何位置：

<div id="ab-message" style="display: none">Your message here!</div>

请注意添加的内联样式最初隐藏它（当然，您也可以从自己的CSS文件中执行此操作）。
另请注意，它需要500毫秒，因为它必须等待广告拦截器执行其操作，否则它将无法正常工作。

关于此脚本如何工作的一点解释

首先，它附加一个iframe，其中包含随机生成的链接源。（它是随机生成的，因为有些adblock很聪明，在某些时候，他们意识到链接是假的）。
然后它对该iframe运行多次检查（如果它已成功加载或其样式被修改）。如果其中一项测试成立，则会向adblock用户显示ab-message元素。

此脚本适用于大多数（如果不是全部）广告拦截器。

EXTRA

没有必要，真的，可能只是创造了一个要点，但我创建了一个Github项目，但是，如果有帮助的话，请检查并加星标。
abDetector: Simple vanilla JavaScript AdBlock Detector.
享受。

Answer 15

如果您使用第三方广告，我找到了最好的脚本之一。

antiblock.org免责声明我无论如何都不隶属于此网站。

它适用于大多数网站，如果他们想绕过它，他们将不得不添加自己的过滤器（对于普通用户来说很复杂）或联系adblock过滤器并添加一个但是他们退出这样做会导致列表重载并减慢广告拦截用户的速度。

Ad Blocker检测AKA Adblock Plus

15 个答案:

关于此脚本如何工作的一点解释

EXTRA