如何使iframe内HTML内容随iframe（基于窗口高度）的高度自适应？

你遇到的核心问题很明确：父页面里由Fancybox渲染的iframe会随窗口调整尺寸，但子页面的缩放逻辑只在初始化时跑了一次，完全没响应后续的iframe尺寸变化。咱们一步步来修复这个问题：

第一步：拆解现有代码的不足 #

你当前的doResize函数仅在子页面加载时执行了一次（通过doResize(null, starterData)），但Fancybox调整iframe尺寸时，子页面属于独立的浏览器上下文，根本感知不到这个变化，自然不会重新计算缩放比例。要解决这个问题，需要通过跨窗口消息通信让父页面把iframe的实时尺寸同步给子页面。

第二步：修改父页面（Index.html）代码 #

在父页面中监听Fancybox的关键事件，当iframe尺寸变化时，主动给子页面发送尺寸信息：

// 放在Index.html的JS代码中，确保Fancybox加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  Fancybox.bind('[data-fancybox]', {
    on: {
      // 初始化完成后发送一次尺寸，确保子页面加载后能拿到正确值
      ready: function(fancybox, slide) {
        const iframe = slide.$content.find('iframe')[0];
        if (iframe) {
          setTimeout(() => {
            const iframeWidth = iframe.offsetWidth;
            const iframeHeight = iframe.offsetHeight;
            iframe.contentWindow.postMessage({
              type: 'iframeResize',
              width: iframeWidth,
              height: iframeHeight
            }, '*'); // 若知道子页面域名，替换为具体域名更安全
          }, 500);
        }
      },
      // 窗口变化、iframe尺寸调整时，实时发送尺寸
      resize: function(fancybox, slide) {
        const iframe = slide.$content.find('iframe')[0];
        if (iframe) {
          const iframeWidth = iframe.offsetWidth;
          const iframeHeight = iframe.offsetHeight;
          iframe.contentWindow.postMessage({
            type: 'iframeResize',
            width: iframeWidth,
            height: iframeHeight
          }, '*');
        }
      }
    }
  });
});

第三步：重构子页面（Int_Sim.html）代码 #

在子页面中监听父页面的消息，同时保留自身窗口的resize监听，确保所有场景下都能触发缩放：

$(function() {
  const $el = $(".simulator");
  const elHeight = $el.outerHeight();
  const elWidth = $el.outerWidth();
  const $wrapper = $(".sim-container");

  // 把缩放逻辑封装成独立函数，方便复用
  function adjustScale(targetWidth, targetHeight) {
    const scale = Math.min(
      targetWidth / elWidth,
      targetHeight / elHeight
    );
    $el.css({
      transform: `scale(${scale})`,
      transformOrigin: 'top left' // 避免缩放时元素偏移，根据需求调整原点
    });
    console.log("内容已重新缩放，当前比例：", scale);
  }

  // 页面初始化时执行一次缩放
  adjustScale($wrapper.width(), $wrapper.height());

  // 监听父页面发来的尺寸消息
  window.addEventListener('message', function(event) {
    if (event.data.type === 'iframeResize') {
      const { width, height } = event.data;
      // 若sim-container是iframe的容器，可先同步容器尺寸再缩放
      // $wrapper.css({ width: width, height: height });
      adjustScale(width, height);
    }
  });

  // 监听子页面自身的窗口resize事件（兼容特殊场景）
  $(window).on('resize', function() {
    adjustScale($wrapper.width(), $wrapper.height());
  });
});

关键细节说明 #

1. 跨窗口通信：父页面通过postMessage传递iframe实时尺寸，子页面通过message事件接收，这是跨上下文页面同步状态的标准方案。
2. 缩放逻辑封装：把缩放代码抽成独立函数，避免重复代码，同时方便在初始化、父页面消息、自身resize等多个场景调用。
3. transformOrigin：默认缩放原点是元素中心，添加这个属性可以确保缩放从左上角（或你需要的位置）开始，避免元素偏移。
4. Fancybox事件时机：ready事件确保子页面加载完成后能拿到初始尺寸，resize事件则覆盖所有iframe尺寸变化的场景。

如果子页面的.sim-container尺寸没有和iframe同步，记得在接收消息时先设置$wrapper的宽高为iframe的尺寸，再执行缩放计算。

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