网站建设中,中国大陆地区请使用VPN访问,欢迎提建议,关注LSKR Mastodon

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

基于广告拦截原理,实现广告检测插件。适用于google blogger HTML/Javascript 小组件一键添加即可。


广告拦截插件代码已经是很多浏览器用户都会安装的,但是他会造成一个问题,导致建站这没有广告收入。基于此,我们写一段广告检测插件。适用于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

参考

إرسال تعليق

Cookie Consent
我们使用 Cookie 来了解您如何使用我们的网站并提升您的体验。这包括个性化内容和广告。
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.