本文最后更新于 1609 天前,其中的信息可能已经有所发展或是发生改变。
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 抛砖引玉
你在工作中是怎么解决此问题的呢?如果您还有更好的方案,欢迎在评论留言,让更多的读者看到您散发的光和热。