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