JavaScript 检测页面

在网站开发中，经常需要通过 JavaScript 来检测页面上的一些元素或特征。在这篇文章中，我将介绍一些常见的 JavaScript 页面检测技巧。

检测页面加载状态

在 JavaScript 中，可以使用 document.readyState 属性来检测页面的加载状态。这个属性会返回一个字符串，表示当前文档的加载状态。

if (document.readyState === 'loading') {
  // 页面正在加载中
} else if (document.readyState === 'interactive') {
  // DOM 已经加载完成，但资源可能仍在加载
} else if (document.readyState === 'complete') {
  // 页面已经完全加载完成
}

检测元素是否存在

检测页面中的某个元素是否存在，可以使用 document.querySelector() 或 document.getElementById() 方法。这些方法会返回一个元素对象或者 null。

if (document.querySelector('#my-element')) {
  // 元素存在
} else {
  // 元素不存在
}

if (document.getElementById('my-element')) {
  // 元素存在
} else {
  // 元素不存在
}

检测浏览器特性支持

在开发中，经常需要检测浏览器是否支持某些特性。可以使用 Modernizr 库，也可以自己编写相应的代码。

if (typeof window.localStorage !== 'undefined') {
  // 浏览器支持本地存储
} else {
  // 浏览器不支持本地存储
}

检测页面滚动位置

如果需要在页面滚动到特定位置后才执行某些操作，可以监听 window 对象的 scroll 事件，并检测页面的滚动位置。

window.addEventListener('scroll', function() {
  if (window.pageYOffset > 100) {
    // 页面滚动位置大于 100px
  }
});

检测页面宽度

可以使用 window.innerWidth 属性来检测页面的宽度。如果需要在页面宽度改变时执行某些操作，可以监听 window 对象的 resize 事件。

if (window.innerWidth > 768) {
  // 页面宽度大于 768px
}

window.addEventListener('resize', function() {
  if (window.innerWidth > 768) {
    // 页面宽度大于 768px
  }
});

以上是一些常见的 JavaScript 页面检测技巧。在开发中，还可以根据具体的需求编写自己的检测代码。