-->
当前位置:首页 > DayDayUp > 正文内容

两种JavaScript实现网页广告屏蔽检测方法及示例代码

Luz11个月前 (05-28)DayDayUp3260

检测方法

1.广告请求检测:在网页加载时,可以通过检查广告请求是否成功来确定广告是否被屏蔽。你可以使用开发者工具或浏览器扩展程序,查看网络请求并确认广告请求是否发送成功。


2.DOM元素检测:广告通常会在网页上以特定的DOM元素形式展示。你可以通过检查这些元素是否存在来确定广告是否显示。使用JavaScript或jQuery等前端技术,可以搜索或遍历DOM元素以查找广告标识。



示例代码

广告请求检测

// 在DOM加载完成后运行检测代码
document.addEventListener('DOMContentLoaded', function() {
  // 发送测试广告请求
  var adRequest = new XMLHttpRequest();
  adRequest.open('GET', 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', true);
  
  adRequest.onload = function() {
    if (adRequest.status >= 200 && adRequest.status < 400) {
      console.log('广告请求成功!');
    } else {
      console.log('广告请求失败,可能被屏蔽!');
    }
  };
  
  adRequest.onerror = function() {
    console.log('广告请求失败,可能被屏蔽!');
  };
  
  adRequest.send();
});
上述代码使用 XMLHttpRequest 对象发送一个测试广告请求,并根据请求的返回状态判断广告是否被屏蔽。如果广告请求返回状态码在 200 到 399 之间,表示请求成功,输出 '广告请求成功!'。否则,输出 '广告请求失败,可能被屏蔽!'。

DOM元素检测

// 在DOM加载完成后运行检测代码
document.addEventListener('DOMContentLoaded', function() {
  // 检查广告容器元素是否存在
  var adContainer = document.getElementById('yourAdContainerId');
  
  if (adContainer) {
    // 监听窗口滚动和调整大小事件
    window.addEventListener('scroll', checkAdVisibility);
    window.addEventListener('resize', checkAdVisibility);
    
    // 初始检查广告可见性
    checkAdVisibility();
  } else {
    console.log('找不到广告容器元素!');
  }
});
// 检查广告容器元素的可见性
function checkAdVisibility() {
  var adContainer = document.getElementById('yourAdContainerId');
  var isVisible = isElementVisible(adContainer);
  
  if (isVisible) {
    console.log('广告显示正常!');
  } else {
    console.log('广告可能被屏蔽!');
  }
}
// 检查元素是否在用户可见区域内
function isElementVisible(element) {
  var rect = element.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  
  return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}


在上述代码中,你需要将 'yourAdContainerId' 替换为实际广告容器元素的ID。代码使用 getElementById 方法获取广告容器元素,并在页面滚动和调整大小时监听事件,调用 checkAdVisibility 函数来检测广告容器元素的可见性。


每当窗口滚动或调整大小时,都会触发 checkAdVisibility 函数,该函数通过调用 isElementVisible 函数来判断广告容器元素是否在用户可见区域内。如果广告容器元素可见,将输出 '广告显示正常!',否则输出 '广告可能被屏蔽!'。


发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。