如何使用 JavaScript 检测 Adblocker？

在本文中，我们将使用 JavaScript 开发一个广告拦截器检测器。 Adblocker 是一个扩展程序，用于阻止网站提供的广告。 Adblocker 会阻止 DOM 和具有显示广告代码的脚本。广告拦截器拥有大量的阻止列表文件名数据，并且广告拦截器会检测网站是否正在使用其中的任何文件，它会限制该文件的下载，因此广告脚本不会加载。 easylist.text 是一个巨大的阻止列表列表，其中包含大多数广告阻止文件名。

根据一项调查，10% 的人使用 adblocker 浏览任何广告。这意味着网站的收入减少了 10%。这对于仅依赖广告的网站来说是可悲的，其中一些使用广告拦截器检测脚本并限制用户在不禁用广告拦截器的情况下进入网站（但从 SEO 的角度来看这是一个坏主意）。

使用诱饵脚本检测广告拦截器：在此方法中，您必须创建一个类名为ad-zone的div 。使 div 高度为 1px。现在编写一个脚本，检查父div的偏移高度是否为零，然后用户正在使用广告拦截器。 adblocker 阻止了该div的渲染，因此偏移高度变为零。如果div的偏移高度保持不变，则浏览器中不存在广告拦截器。原因是类名ad-zone ， adblocker 用于检查哪个元素的类名看起来像广告。

easylist.text 有大量此类名称的列表。 每个广告拦截器都有自己的一组类名，这些类名将被阻止，这就是为什么我们不应该只依赖一个类名。一些常见的类名称是textads、banner-ads、banner_ads、ad-unit、ad-zone、ad-space ，它们由 adblocker 检测到广告。

例子：

HTML

     
  
    


  

    GeeksforGeeks
  
  
    
checking for adblocker...
  
  
    
  
  

    

---

Javascript

let x = document.querySelector(".ad-zone");
   let x_height = x.offsetHeight;
   let msg = document.getElementById("msg")
     
   if(x_height){
     msg.innerText = "No Adblocker detected"
   } else{
     msg.innerText = "Adblocker detected"
}

Javascript

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("No AdBlocker Detected")
    }else{
      console.log("AdBlocker detected")
    }

输出 ：

• 我们在 jsbin.com 上运行我们的代码并使用扩展 AdBlock。当 adblocker 运行时，可以看到以下输出。

  

• 当 jsbin.com 的 adblocker 关闭时，可以看到以下输出。

  

示例 2：以下代码可用于