如何使用JavaScript检测广告拦截器

在本文中，我们将使用JavaScript开发一个广告拦截器检测器。广告拦截器是用于阻止网站上显示的广告的扩展程序。广告拦截器阻止了用于显示广告的DOM和脚本代码。广告拦截器具有大量的拦截列表文件名，并且它们会检测网站是否使用了这些文件中的任何文件，它会阻止对那些文件的下载，从而使广告脚本不会加载。easylist.text是一个包含大多数广告拦截文件名的庞大拦截列表。

根据一项调查，10%的人使用广告拦截器浏览没有广告的网页。这意味着网站的收入减少了10%。对于那些完全依赖广告的网站来说，这是令人沮丧的，有些网站使用广告拦截器检测脚本，限制用户在不禁用广告拦截器的情况下进入网站（但从SEO角度来看，这是一个坏主意）。

使用欺骗脚本检测广告拦截器： 使用这种方法，您需要创建一个 div 以类名 ad-zone . 使该div高度为1像素。然后编写一个脚本，检查父 div 的offset height 是否变为零，如果是，则说明用户正在使用广告拦截器。广告拦截器阻止了渲染该 div ，因此offset height变为零。如果该 div 的offset height保持不变，则浏览器中没有广告拦截器。原因是类名 ad-zone ，广告拦截器会检查哪个元素具有类名类似于广告的样式。

easylist.text中包含了大量这样的类名。 **** 每个广告拦截器都有自己的一套类名，它们将被阻止，因此我们不应仅依靠一个类名。一些常见的类名是 textads、banner-ads、banner_ads、ad-unit、ad-zone、ad-space ，广告拦截器将用于检测广告。

例子:

<!DOCTYPE html>
<html>
<head>
     
  <style>
    .ad-zone{
      height: 10px;
    }
  </style>
    
</head>
<body>
  <h1>
    <center>GeeksforGeeks</center>
  </h1>
  <center>
    <p id="msg">检测广告拦截器中...</p>
  
  </center>
    
  <div 
     class="ad-zone ad-space ad-unit textads banner-ads banner_ads">
  </div>
    
</body>
</html>

let x = document.querySelector(".ad-zone");
   let x_height = x.offsetHeight;
   let msg = document.getElementById("msg")
     
   if(x_height){
     msg.innerText = "未检测到广告拦截器"
   } else{
     msg.innerText = "检测到广告拦截器"
}

输出:

我们在jsbin.com上运行我们的代码，并使用AdBlock扩展程序。当广告拦截器运行时，可以看到以下输出。

如何使用JavaScript检测广告拦截器

当关闭jsbin.com的广告拦截器时，可以看到以下输出。

如何使用JavaScript检测广告拦截器

例子2: 以下代码可以在

let fakeAd = document.createElement("div"); fakeAd.className = "textads banner-ads banner_ads ad-unit ad-zone ad-space adsbox" fakeAd.style.height = "1px" document.body.appendChild(fakeAd) let x_width = fakeAd.offsetHeight; let msg = document.getElementById("msg") if(x_width){ console.log("检测到未开启广告拦截器") }else{ console.log("未检测到广告拦截器") }