Adblock Plus检测

​ Adblock Plus是现在很多用户会安装的一些浏览器扩展插件，用来屏蔽使用浏览器浏览时页面中的插件。

​ 最近在写一个静态页面时，发现有张图片加载不出来，图片名为ad.jpg，调试了之后发现是浏览器的Adblock Plus把这张图片屏蔽掉了。

​ 刚开始没在意，后来浏览知乎和cnBeta时，发现都有因为使用Adblock Plus出现的提示，就突然很好奇，Adblock Plus检测是怎么实现的，自己根据写项目时的情况，实现了下检测Adblock Plus的功能。

要解决的问题：

​ 在不影响页面布局的情况下，检测用户是否使用Adblock Plus插件。

主要代码如下：

let testAdblock = () => {
    let img = new Image();
    img.src = 'img/ad.jpg';
    //img.src = 'images/ad.jpg';
    img.onerror = function () {
        alert('您使用了Adblock插件');
    };
};

大体思路如下：

1. 创建一个图片对象

2. 给这个图片对象添加一个路径属性src

3. 通过图片的onerror事件检测图片是否成功加载

​ 创建一个图片对象是为了不更改界面布局，添加src属性后，如果图片被插件屏蔽，是无法加载成功的。

需要改进的地方：

1. 需要增加一次请求，需要考虑是否可以用其他资源代替
2. 没有检测图片资源是否能访问到，有可能onerror事件触发是因为资源获取不到
3. onerror是个事件，事件函数处理过程是异步的，所以如果真的投入生产工作中，还需要进一步完善
4. 很有意思的一点，不知道是不是Adblock Plus规则问题，我的Adblock Plus插件屏蔽规则是EasyList China+EasyList。在试验过程中，图片必须放在img文件夹或者images文件夹中，就像代码中的那两种。放在根目录和image文件夹中都无法触发Adblock Plus的屏蔽功能

​ 这次也就是大体上思考并且动手实践了一下，很多细节都没有去处理，以后还会在继续研究一下。