如何在元素占满屏幕宽高时禁用其调整大小脚本？

DevOps 小满

2026-8-6

解决方案

别改script标签的type属性了——把type设成application/JSON只会让浏览器直接跳过脚本执行，完全不是实现条件执行的正确方式。直接在脚本里加判断逻辑就行：只有当id为window的元素没占满屏幕时，才调用makeResizable函数。

具体实现步骤

先拿到目标元素
对比元素的实际尺寸和浏览器视口的宽高
根据判断结果决定是否执行resize逻辑

代码示例

// 获取目标元素
const targetEl = document.getElementById('window');

// 判断元素是否占满整个屏幕
function isFullScreen(el) {
  const viewportW = window.innerWidth;
  const viewportH = window.innerHeight;
  // offsetWidth/offsetHeight包含元素的边框和内边距，刚好对应实际显示尺寸
  const elW = el.offsetWidth;
  const elH = el.offsetHeight;
  
  // 严格匹配宽高，也可以根据需求加个1px的误差容错
  return elW === viewportW && elH === viewportH;
}

// 条件执行resize函数
if (!isFullScreen(targetEl)) {
  makeResizable();
}

动态场景处理（可选）

如果元素尺寸或窗口大小会动态变化，比如用户手动调整窗口大小，你可以把判断逻辑挂到窗口的resize事件上，实时控制resize功能的开关：

window.addEventListener('resize', () => {
  const isFull = isFullScreen(targetEl);
  // 这里可以根据状态添加/移除resize相关的事件监听
  // 举个例子：如果之前makeResizable绑定了鼠标事件，占满屏幕时就解绑
  if (isFull) {
    // 假设你有清理resize事件的函数，比如cleanupResizable()
    // cleanupResizable();
  } else {
    // 未占满时确保resize功能生效
    makeResizable();
  }
});