如何检测页面是否被调整大小或刷新？附相关JavaScript代码解析

一、检测窗口Resize（调整大小） #

最常用的方式就是给window绑定resize事件监听，每当窗口尺寸变化时就会触发回调函数：

window.addEventListener('resize', function() {
  console.log('窗口大小被调整了！');
  // 这里可以写你需要执行的逻辑
});

不过要注意，resize事件会在调整窗口时频繁触发，可能影响性能，所以一般会加防抖处理，比如：

let resizeTimer;
window.addEventListener('resize', function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    console.log('窗口调整完成，执行逻辑');
  }, 200); // 200ms内没有新的resize触发，才执行逻辑
});

二、检测页面Refresh（刷新） #

有两种常用的实现思路：

1. 利用浏览器导航API #

现代浏览器可以通过navigation.currentEntry.navigationType来判断页面加载类型：

if (navigation.currentEntry?.navigationType === 'reload') {
  console.log('页面是被刷新加载的');
} else {
  console.log('页面是首次导航/后退前进加载的');
}

如果要兼容旧浏览器，可以用已废弃但仍能工作的window.performance.navigation.type：

if (window.performance.navigation.type === 1) {
  console.log('页面被刷新了');
}

2. 利用Storage存储标记 #

通过sessionStorage或localStorage存储一个加载标记，页面加载时判断标记是否存在：

window.addEventListener('load', function() {
  if (sessionStorage.getItem('pageLoaded')) {
    console.log('页面被刷新啦');
  } else {
    sessionStorage.setItem('pageLoaded', 'true');
    console.log('页面首次加载');
  }
});

sessionStorage会在页面关闭后清空，适合单次会话内的判断；如果需要跨会话保留，就用localStorage。

三、解析给定的JavaScript代码功能 #

先把代码补全（根据逻辑推测未完成部分），完整代码如下：

window.addEventListener('resize', function() {
  document.addEventListener('scroll', function() {
    checkScrollHeight();
  });
});

function checkScrollHeight() {
  let stickyNavbar = document.getElementById('sticky-navbar');
  let currentPosition = window.pageYOffset || document.documentElement.scrollTop;
  let bannerHeight = document.getElementById('banner-height').offsetHeight || document.getElementById('banner-height').clientHeight;
  if(currentPosition > bannerHeight) {
    stickyNavbar.style.display = "block";
  } else {
    stickyNavbar.style.display = "none";
  }
}

代码功能拆解： #

1. 事件绑定逻辑：给window绑定了resize事件，每当窗口大小调整时，会给document添加一个scroll事件监听，滚动时触发checkScrollHeight函数。
2. 核心逻辑函数checkScrollHeight：
   • 获取页面上id为sticky-navbar的粘性导航栏元素；
   • 获取当前页面的滚动距离（兼容不同浏览器的写法，覆盖现代浏览器和旧IE）；
   • 获取id为banner-height的横幅元素的高度（同时兼容offsetHeight和clientHeight，确保能正确拿到高度值）；
   • 判断：如果滚动距离超过横幅的高度，就显示粘性导航栏；如果没超过，就隐藏它。

代码存在的问题： #

每次窗口resize时都会重复添加scroll事件监听，导致滚动页面时checkScrollHeight会被多次触发，不仅浪费性能，还可能导致逻辑异常。正确的做法应该是只绑定一次scroll事件，不需要依赖resize事件：

// 直接绑定scroll事件，resize时不需要重复绑定
window.addEventListener('scroll', checkScrollHeight);
// 如果需要在resize时也重新检查一次高度，可以额外加resize监听
window.addEventListener('resize', checkScrollHeight);

内容的提问来源于stack exchange，提问作者user8713852