iframe无法随内容自动调整尺寸（已用iframe-resizer）求助

1. 子页面未加载iframe-resizer的子端脚本 #

iframe-resizer需要父页面和子页面配合工作，仅在父页面引入iframe-resizer.parent.js无法完成尺寸通信，子页面必须加载对应的内容端脚本。

• 解决办法：在子页面的</body>标签前引入子端脚本（确保与父端脚本版本一致），示例代码：

  <script src="iframeResizer.contentWindow.js"></script>
  

2. iframe初始高度样式冲突 #

当前iframe设置了height:100vh，会强制iframe高度为视口高度，覆盖插件自动计算的初始高度，导致出现大量空白。

• 解决办法：移除iframe的height样式，或设置为height:0让插件接管高度计算，修改后的iframe代码：

  <iframe id="myIframe" src="https://george-mainemonitor.github.io/my-reps/" style="width: 100%;border:none;"></iframe>
  

3. 跨域通信权限未配置 #

跨域场景下，插件默认会校验请求来源，若子页面未允许父域名的通信请求，尺寸调整信号可能无法正常传递。

• 解决办法：
  • 父页面配置中指定允许的来源域名：

    iframeResize({ 
      license: 'GPLv3', 
      waitForLoad: true,
      checkOrigin: ['https://mcpirstaging.wpenginepowered.com']
    }, '#myIframe');
    

  • 或在子页面的脚本中配置允许的父域名：

    iFrameResize({ checkOrigin: ['https://mcpirstaging.wpenginepowered.com'] });
    

4. 动态内容未触发尺寸重计算 #

表单提交后子页面内容动态变化，但waitForLoad: true仅在初始加载时计算一次高度，插件可能未自动检测到后续内容变化。

• 解决办法：在子页面表单提交完成、内容渲染完毕后，手动调用尺寸重计算方法：

  // 子页面中表单提交成功后的回调里添加
  window.parentIFrame.resize();
  

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