阅读 8067

如何检测页面上的图片被屏蔽了

1 描述及影响

  • 商业合作:配置可跳转图片,实现引流
  • 商品引流:根据用户习惯进行猜你喜欢
  • 爆款引流:利用爆款吸引流量
  • 程序兼容:图片缺失导致布局改变
  • 用户体验:认为程序不可靠,放弃下单

2 原因分析

图片广告被拦截,大多数原因是浏览器安装了相应的广告拦截插件,如:AdBlock plus等等,还有一部分来自浏览器广告屏蔽脚本;

3 思路分析

以下给出通用的解决的方案,不全面或不兼容的方法有很多,就不一一列举, 根据业务场景需要,可采用不同的方案:

分析被屏蔽后的图片元素得出,广告被屏蔽后,图片的display属性会变为none,因此,可以以此为依据,将页面上所有需要检测拦截的图片,做上标记,加载完成后,检测图片display属性是否是none,就可以判断出是否被拦截。以下给出 阮一峰 老师在自己博客主页上做的拦截判断,供参考:

4 解决方案

function checker () {

  // var img = document.querySelector('img[src^="http://www.example.com/blog/images"]');
  var img = document.querySelector(
    'a > img[src*="wangbase.com/blogimg/asset/"]'
  );

  if (img && window.getComputedStyle(img).display === "none") {

    var sponsor = document.querySelector(".entry-sponsor");
    var prompt = document.createElement("div");
    prompt.style =
      "border: 1px solid #c6c6c6;border-radius: 4px;background-color: #f5f2f0;padding: 15px; font-size: 14px;";
    prompt.innerHTML =
      "<p>您使用了广告拦截器,导致本站内容无法显示。</p><p>请将 www.example.com 加入白名单,解除广告屏蔽后,刷新页面。谢谢。</p>";
    sponsor.parentNode.replaceChild(prompt, sponsor);
    document.querySelector("#main-content").innerHTML = "";
  }
}

function isInstalledADBlock () {

  var e = document.createElement("div");
  (e.className = "adsbox"), document.body.appendChild(e);
  var t = "none" === getComputedStyle(e).display;
  return document.body.removeChild(e), t;
}

setTimeout(checker, 1000);

复制代码

5 总结分析

图片被拦截检测,思路很多,最直接的想法是:因为安装了某个插件,导致图片显示不正常,直接检测是否安装了插件不就好了。但实际上这个思路实现起来很难,检测方法很难全覆盖所有类型的拦截插件,因此,最终在阮一峰老师的博客上看到了原生JS的解决办法,恍然大悟。

6 感悟

解决问题的方法可能有很多,但实现难易程度及可移植性不同,解决一个问题,最根本的,是要找到原因,分析出问题带来的本质影响,最终对症下药,择优选择方案。

7 抛砖引玉

你在工作中是怎么解决此问题的呢?如果您还有更好的方案,欢迎在评论留言,让更多的读者看到您散发的光和热。

8 文末

在准备面试?来交流一下吧,每天一到面试题提升自我;准备进阶高级全栈?来聊聊进阶之道,少走弯路;敲代码累了?来群里聊聊天吧,让工作更高效。

由于限制,目前已满200,只能通过邀请加入,所以,还请添加我的个人,我再邀请进入。来这里,找到更多志同道合的前端伙伴~

文章分类
前端
文章标签