ZoyaPatel

google blogger 实现检测“广告拦截插件”代码

SohaniSharma


广告拦截插件代码已经是很多浏览器用户都会安装的,但是他会造成一个问题,导致建站这没有广告收入。基于此,我们写一段广告检测插件。适用于google blogger HTML/Javascript 小组件一键添加即可。

实现原理

该方案包括以下几个关键组件:

  • 诱饵元素检测:通过动态创建并隐藏一个虚拟广告元素(如含有类名 'adsbox ad-banner google-ad'<div>),用于检测广告拦截器是否生效。如果该元素被拦截器隐藏或阻止加载,即可判断用户启用了广告拦截器。

  • 动画弹窗提示:一旦检测到广告拦截器,页面将展示一个带有动画效果的提示弹窗,同时禁止页面滚动,以引导用户关闭广告拦截器。

  • 刷新与恢复机制:用户点击弹窗中的关闭按钮后,页面会自动刷新,恢复正常浏览体验。刷新后将重新执行广告拦截器检测逻辑。

  • 自适应检测循环:由于检测逻辑会在每次刷新后重新触发,当用户关闭广告拦截器后,弹窗将不再显示,用户也能继续正常浏览页面内容。

该方法充分利用了广告拦截器通过阻止页面元素显示的行为特征,实现了对广告拦截的有效检测与用户提示机制,在确保用户知情的同时,引导其支持网站的正常运营。

源代码

 <!-- 全屏动画弹窗提示 -->
 <div id="adblock-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000000cc; color:#fff; z-index:9999; text-align:center; padding-top:20%; opacity:0; transition: opacity 0.5s ease-in-out;">
  <div style="background:#222; padding:30px; max-width:500px; margin:auto; border-radius:10px;">
    <h2 style="margin-bottom:15px;">😕 检测到广告拦截器</h2>
    <p style="font-size:16px;">本站依靠广告支持运营。请将本站加入广告白名单后刷新页面。</p>
    <p style="margin-top:20px; font-size:14px; color:#aaa;">提示将在您关闭广告拦截器后自动消失。</p>
    <button id="adblock-close-btn" style="margin-top:20px; padding:10px 20px; font-size:16px; background-color:#f90; color:#fff; border:none; border-radius:5px; cursor:pointer; transition: background-color 0.3s;">我已关闭广告拦截器</button>
  </div>
 </div>
 
 <script>
  window.addEventListener('load', function () {
    var bait = document.createElement('div');
    bait.className = 'adsbox ad-banner google-ad';
    bait.style.width = '1px';
    bait.style.height = '1px';
    bait.style.position = 'absolute';
    bait.style.left = '-9999px';
    document.body.appendChild(bait);
 
    setTimeout(function () {
      var hidden = !bait || bait.offsetParent === null || bait.offsetHeight === 0 || bait.offsetWidth === 0 || bait.clientHeight === 0 || bait.clientWidth === 0;
      document.body.removeChild(bait);
       if (hidden) {
        // 显示阻断弹窗并添加动画效果
        var modal = document.getElementById('adblock-modal');
        modal.style.display = 'block';
        setTimeout(function () {
          modal.style.opacity = '1'; // 添加动画过渡
        }, 10);
 
        // 可选:阻止滚动
        document.body.style.overflow = 'hidden';
 
        // 绑定关闭按钮
        document.getElementById('adblock-close-btn').addEventListener('click', function () {
          // 提示消失并刷新页面
          modal.style.opacity = '0';
          setTimeout(function () {
            modal.style.display = 'none';
            document.body.style.overflow = 'auto'; // 恢复滚动
            location.reload(); // 刷新页面
          }, 500); // 动画持续时间(500ms)
        });
      }
    }, 100);
  });
 </script>

展示效果

该方案无需对市面上的广告拦截插件逐一测试或适配,而是通过一种通用的检测机制,实现对大部分主流广告拦截器的有效识别与响应。

该检测方式不依赖于特定插件的识别或指纹信息,而是利用广告拦截器“隐藏广告元素”这一共性行为。实践中,已成功识别并触发提示的插件包括:

  • AdBlock / AdBlock Plus

  • uBlock Origin

参考

Ahmedabad
Kolkata
Hyderabad
后一页 Bangalore 前一页

Random Manga

Ads

نموذج الاتصال