Electron中窗口最大化恢复后$(window).height()取值异常问题

问题根源 #

• Electron的resize事件触发时机早于浏览器布局完成，此时$(window).height()拿到的是未完全更新的中间值，窗口恢复原尺寸时这个问题尤为明显。
• 每次销毁重建bootstrapTable会引发DOM重排，进一步干扰高度计算的准确性。

解决步骤 #

1. 给resize事件加防抖处理 #

避免resize连续触发时重复计算，只在窗口调整动作结束后执行一次高度调整：

// 简单防抖函数实现
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 绑定防抖后的resize事件
window.addEventListener("resize", debounce(function() {
  adjustTableHeight();
}, 100));

2. 用requestAnimationFrame延迟高度计算 #

确保浏览器完成布局渲染后，再获取准确的窗口和元素高度：

function adjustTableHeight() {
  requestAnimationFrame(() => {
    const $table = $("#results-table");
    const availableHeight = $(window).height() - $("#results-header").outerHeight(true) - $("#search-section").outerHeight(true) - 50;
    
    // 直接更新表格高度，无需销毁重建
    $table.bootstrapTable('updateOptions', { height: availableHeight });
  });
}

3. 替换销毁重建为updateOptions #

bootstrapTable支持直接更新配置项，避免频繁DOM操作带来的布局异常：

// 按钮触发时的代码也可以同步优化
$("#your-trigger-button").click(function() {
  const $table = $("#results-table");
  const availableHeight = $(window).height() - $("#results-header").outerHeight(true) - $("#search-section").outerHeight(true) - 50;
  
  $table.bootstrapTable('updateOptions', { data: data, height: availableHeight });
});

4. 验证Electron原生窗口高度（可选） #

如果上述方法仍有误差，可以直接获取Electron原生窗口的高度做对比，排除窗口边框、标题栏的计算干扰：

const { remote } = require('electron');
const currentWindow = remote.getCurrentWindow();
const windowBounds = currentWindow.getBounds();
console.log('原生窗口实际高度:', windowBounds.height); // 和$(window).height()的结果做对比

额外提示 #

• 检查页面中是否有其他动态元素在resize时改变高度，导致#results-header或#search-section的高度计算偏差。
• 尽量避免硬编码的50px偏移，可通过获取元素的margin、padding值动态计算，减少误差。

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