如何阻止iframe内容随框架尺寸重排，整体缩放展示全部内容且无滚动条

• 先固定内嵌页面的原始参考尺寸
  在内嵌页面首次加载完成后，获取页面完整内容的原始宽高，记为originalWidth和originalHeight，这两个值后续不会变更，作为缩放的基准值：

  // 内嵌页面执行，同域下父页面也可以直接获取
  const originalWidth = document.documentElement.scrollWidth
  const originalHeight = document.documentElement.scrollHeight
  

  同时给内嵌页面根元素加基础样式，避免滚动和布局偏移：

  html {
    width: [这里替换为实际originalWidth值]px;
    height: [这里替换为实际originalHeight值]px;
    overflow: hidden;
    transform-origin: left top;
  }
  

• 计算实时缩放比例
  每次滑块拖动调整iframe尺寸后，获取当前iframe容器的实际宽高containerWidth、containerHeight，按以下公式计算缩放比例：

  // 取宽高两个方向的最小缩放比，保证内容完整展示不溢出
  const scale = Math.min(containerWidth / originalWidth, containerHeight / originalHeight)
  

• 应用缩放效果
  把计算得到的scale值应用到内嵌页面的根元素上即可：

  // 同域下父页面直接操作
  iframe.contentDocument.documentElement.style.transform = `scale(${scale})`
  // 跨域场景下通过postMessage把scale值传给内嵌页面，由内嵌页面自行修改样式
  

优化提示：如果需要滑块拖动时实时更新效果，把缩放逻辑放在requestAnimationFrame中执行，可避免卡顿，提升流畅度。

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