前端如何判断浏览器 AdBlock/AdBlock Plus（最新版）广告屏蔽插件已开启拦截

news2025/2/13 2:11:41

2个月前AdBlock/AdBlock Plus疑似升级了一次
在这里插入图片描述

因为自己主要负责面对海外的用户项目，发现以前的检测AdBlock/AdBlock Plus开启状态方法已失效了，于是专门研究了一下。并尝试了很多方法。

已失效的老方法

// 定义一个检测 AdBlock 的函数
function checkAdBlock() {
  // 请求一个可能被 AdBlock 拦截含有/ad的路径接口
  fetch('xxxx/xxxx/ad')
    .then(response => {
      if (!response.ok) {
        // 如果响应状态码不是 2xx，可能是被拦截了
        console.log('AdBlock 可能已启用，请求被拦截');
      } else {
        // 请求成功，AdBlock 未拦截
        console.log('AdBlock 未启用，请求成功');
      }
    })
    .catch(error => {
      // 如果请求失败，可能是被拦截了
      console.log('AdBlock 可能已启用，请求失败', error);
    });
}

// 调用检测函数
checkAdBlock();

尝试方法1(亲测后全部无用)

github上开源的一些方法基本都试了都不行

1，f**kAdblock

2，adblockDetector

3，AdBlock Warning

4，AdGuard Detector

5，blockadblock
…

尝试方法2(亲测后也无用)

创建一个div元素并添加一个可能被AdBlock识别的类名 ad,ads之类的

// 创建一个div元素并添加一个可能被AdBlock识别的类名
var adTest = document.createElement('div');
adTest.className = 'ad ads ad-test1 adblock-test'; // ad,ads之类的
adTest.style.display = 'block'; // 明确设置display为block以检测是否被覆盖
adTest.style.position = 'absolute'; // 绝对定位以避免影响页面布局
adTest.style.top = '-9999px'; // 将元素移出视口以避免干扰用户
adTest.style.left = '-9999px';
adTest.style.width = '1px';
adTest.style.height = '1px';

// 将元素添加到DOM中
document.body.appendChild(adTest);

// 立即检查元素是否被隐藏（即display属性是否被更改为none）
var adblockActive = (adTest.offsetWidth <= 0 && adTest.offsetHeight <= 0) || adTest.style.display === 'none';

// 根据检测结果执行相应操作
if (adblockActive) {
    console.log('检测到AdBlock开启了');
    // 这里可以添加代码来处理AdBlock被检测到的情况
} else {
    console.log('AdBlock没有开启');
    // 清理：从DOM中移除测试元素（可选，因为已经移出视口）
    document.body.removeChild(adTest);
}

思考

静下心来好好看了看adblcok plus官网说明，原来AdBlock 和 AdBlock Plus等等默认拦截规则原来是 EasyList。

EasyList是什么

EasyList 是什么？ EasyList 是一个开源的广告过滤规则集，由社区维护和更新。它包含了大量的规则，用于屏蔽网页上的广告元素（如横幅广告、弹窗广告、视频广告等）。 EasyList 是 AdBlock、AdBlock Plus 和其他广告屏蔽工具（如 uBlock Origin）的基础规则集。

那么猜测老的检测方法失效应该是EasyList规格有更新，顺着这个思路又看看当前已有的EasyList规则都有啥（文件有点大你忍一下🤣）？发现这个规则太多了，看的人眼花…

最终先找一个域名中含有ads的规则…先试试

解决尝试(亲测后可行)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载脚本检测</title>
    <style>
        #load-error {
            color: red;
            display: none; /* 默认隐藏错误提示 */
        }
    </style>
</head>
<body>
    <!-- 错误提示信息 -->
    <div id="load-error">脚本加载失败！</div>

    <!-- 加载外部脚本 -->
    <script>
        function loadScript(url, callback) {
            var script = document.createElement('script');
            script.src = url;
            script.onerror = function() {
                // 脚本加载失败时显示错误提示
                var loadError = document.getElementById('load-error');
                loadError.style.display = 'block';
                if (callback && typeof callback === 'function') {
                    callback(false); // 传递加载失败的信息给回调函数（可选）
                }
            };
            script.onload = function() {
                // 脚本加载成功时不执行任何操作（或者可以隐藏一个加载中的提示，如果有的话）
                if (callback && typeof callback === 'function') {
                    callback(true); // 传递加载成功的信息给回调函数（可选）
                }
            };
            document.head.appendChild(script);
        }

        // 调用函数加载脚本(阮一峰的个人网站上复制的js脚本，只要域名含ads就行，主要为了做验证)
        loadScript('https://cdn.wwads.cn/js/makemoney.js');
    </script>

    <!-- 页面其余内容 -->
    <h1>欢迎来到我的网站</h1>
    <p>这里是一些内容...</p>
</body>
</html>