
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 
参考
- :一个流行的开源 JavaScript 库,用于检测广告拦截器,支持回调函数来处理拦截的情况。 
- 适合wordpresss 
Tags
Blogger

