如何检测页面上的图片被屏蔽了
本文最后更新于 720 天前,其中的信息可能已经有所发展或是发生改变。

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 抛砖引玉

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

转载:https://juejin.im/post/5f10fa60f265da22dd7ddf0e

标题:如何检测页面上的图片被屏蔽了
地址:https://xiaodongxier.com/147.html
作者:王永杰
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇