JavaScript面板拖动Resize异常：设置iframe height:100%后冻结

问题根源 #

当iframe设置height:100%时，它的高度计算完全依赖父容器的渲染尺寸。拖动面板放大再缩小的过程中，浏览器的重排重绘优化可能会让iframe保留旧的尺寸上下文，导致渲染冻结——这也是纯CSS方案无法解决的核心原因，必须主动触发iframe的渲染更新。

纯JavaScript解决方案 #

核心思路是在拖动操作的关键节点（拖动过程中、拖动结束时）强制触发iframe的重绘，确保父容器的尺寸变化能及时同步到iframe：

• 拖动过程中，实时切换iframe的display属性，强制浏览器重新计算尺寸
• 拖动结束后，微调iframe的高度属性再恢复，彻底更新渲染上下文

修改后的完整代码示例 #

HTML

<div class="container">
  <div class="left-panel">左侧面板</div>
  <div class="resizer" id="resizer"></div>
  <div class="right-panel" id="rightPanel">
    <iframe src="your-page-url" id="contentIframe" frameborder="0"></iframe>
  </div>
</div>

CSS

.container {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.left-panel {
  width: 300px;
  background: #f0f0f0;
}

.resizer {
  width: 5px;
  background: #ccc;
  cursor: col-resize;
}

.right-panel {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#contentIframe {
  width: 100%;
  height: 100%;
  border: none;
}

JavaScript

const resizer = document.getElementById('resizer');
const rightPanel = document.getElementById('rightPanel');
const iframe = document.getElementById('contentIframe');
let isResizing = false;
let startX = 0;
let startWidth = 0;

resizer.addEventListener('mousedown', (e) => {
  isResizing = true;
  startX = e.clientX;
  startWidth = rightPanel.offsetWidth;
  document.body.style.cursor = 'col-resize';
  document.body.style.userSelect = 'none';
});

document.addEventListener('mousemove', (e) => {
  if (!isResizing) return;
  
  const deltaX = e.clientX - startX;
  const newWidth = startWidth - deltaX;
  // 限制最小宽度，避免面板过小
  if (newWidth >= 200) {
    rightPanel.style.width = `${newWidth}px`;
    
    // 强制触发iframe重绘
    iframe.style.display = 'none';
    requestAnimationFrame(() => {
      iframe.style.display = 'block';
    });
  }
});

document.addEventListener('mouseup', () => {
  if (!isResizing) return;
  
  isResizing = false;
  document.body.style.cursor = '';
  document.body.style.userSelect = '';
  
  // 拖动结束后再次校准渲染状态
  iframe.style.height = '99%';
  requestAnimationFrame(() => {
    iframe.style.height = '100%';
  });
});

关键修改说明 #

• 拖动过程中通过切换display属性，强制浏览器放弃旧的尺寸缓存，重新计算iframe的宽高
• 拖动结束时微调高度再恢复，彻底更新iframe的渲染上下文
• 全程保留width:100%和height:100%的要求，未使用固定像素值

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