JavaScript实现：强制用户关掉adblock广告过滤插件

技术频道 - js技术

JavaScript实现：强制用户关掉adblock广告过滤插件

作者:admin 时间:2026-5-11 18:10:52 浏览:

很多网站需要靠广告的收入来支撑，但是用户往往想看到清爽的网页而安装adblock广告过滤插件，我看到一些网站制止使用了广告过滤插件的用户浏览他们的网页内容，采用的方法是弹出一个覆盖层，并且网页不可滚动。

有人要问，如何检测到用户是否安装了adblock广告过滤插件呢？今天我给大家介绍几种方法。

方法一：诱饵脚本文件

这种方法最简单，使用代码最少。

广告过滤插件通常会阻挡特定文件名，如ads.js或advertisement.js。你可以利用这一点，尝试加载带有这些名称的文件。

1、在你的服务器上创建一个名为ads.js的文件，只需一行：

window.canRunAds = true;

2、在你的主HTML中，检查是否存在这个变量：

<script src="/ads.js"></script>
<script>
  if (window.canRunAds === undefined) {
    console.log("广告过滤插件阻止了诱饵脚本的加载！");
  }
</script>

方法二：检查被阻拦的网络请求

现代广告过滤插件通常会屏蔽已知广告网络的请求。你可以尝试fetch已知的广告域名，发现失败。

async function isAdBlockerActive() {
  try {
    // 尝试返回ad URL
    await fetch('https://广告URL的域名', {
      method: 'HEAD',
      mode: 'no-cors',
    });
    return false; // 请求成功，没发现广告过滤插件
  } catch (error) {
    return true; // 请求失败，很可能被拦截
  }
}

方法三：隐形诱饵元素（推荐）

该方法创建了一个隐藏的div，包含一个通常被广告过滤列表（如“adsbox”或“ad-zone”）阻挡的CSS类。如果广告过滤插件处于激活状态，它会隐藏该元素，并将其height(高度)设置为零。

async function checkAdBlock() {
  let isBlocked = false;

  // 1. 创建一个诱饵元素
  const bait = document.createElement('div');
  bait.className = 'adsbox'; // 类名如 'adsbox', 'ad-zone', 或 'ad-banner'
  bait.style.cssText = 'position: absolute; left: -9999px; height: 1px; width: 1px;';
  
  document.body.appendChild(bait);

  // 2. 请稍候片刻，等待阻挡器做出反应。
  await new Promise(resolve => setTimeout(resolve, 100));

  // 3. 检查元素是否被隐藏或移除
  if (bait.offsetHeight === 0 || bait.offsetParent === null) {
    isBlocked = true;
  }

  // 4. 清除
  bait.remove();
  return isBlocked;
}

// 使用
checkAdBlock().then(detected => {
  if (detected) {
    console.log("发现广告过滤插件！");
  }
});