如何根据iframe宽高动态调整内嵌Plotly图表内容以适配显示？

最优方案：让Plotly图表自适应容器 #

直接让图表本身匹配iframe的尺寸，避免缩放内容，这是最流畅的实现方式：

• 在Plotly的布局设置里开启响应式，并将承载图表的HTML容器宽高设为100%：

  # Plotly Python示例代码
  fig.update_layout(
      autosize=True,
      responsive=True
  )
  

  对应的HTML容器样式要设置：

  <div id="plot-container" style="width:100%; height:100%;"></div>
  

  这样图表会自动填满iframe的可用空间，无论iframe尺寸是固定还是动态变化，都不会出现滚动条。

动态同步尺寸：通过postMessage实现父页面与iframe通信 #

如果无法修改Plotly图表的代码，可以让内嵌页面主动告知父页面自身内容的实际尺寸，父页面再调整iframe的宽高：

1. 内嵌的Plotly页面添加JS监听尺寸变化并发送消息：

   // 内嵌页面代码
   // 页面加载完成后发送初始尺寸
   window.onload = () => sendPlotSize();
   // 监听图表容器尺寸变化
   window.addEventListener('resize', sendPlotSize);
   
   function sendPlotSize() {
       const plotEl = document.getElementById('plot-container');
       const size = {
           width: plotEl.offsetWidth,
           height: plotEl.offsetHeight
       };
       // 生产环境请替换*为父页面的具体域名，保障安全
       window.parent.postMessage(size, '*');
   }
   

2. 父页面添加JS监听消息并调整iframe：

   // 父页面代码
   window.addEventListener('message', (event) => {
       // 生产环境务必验证event.origin，防止恶意消息
       if (event.data.width && event.data.height) {
           const iframe = document.getElementById('your-iframe-id');
           iframe.style.width = `${event.data.width}px`;
           iframe.style.height = `${event.data.height}px`;
       }
   });
   

应急方案：正确使用transform缩放内容 #

如果前两种方法都无法实现，可通过缩放iframe内容适配容器，但注意这是次优方案，可能影响清晰度：

• 父页面用容器包裹iframe，通过缩放iframe并调整容器尺寸抵消缩放后的空间：

  <div class="iframe-wrapper">
      <iframe src="your-plotly-deploy-url" frameborder="0"></iframe>
  </div>
  

  对应的CSS：

  .iframe-wrapper {
      width: 800px; /* 你期望的显示宽度 */
      height: 600px; /* 你期望的显示高度 */
      overflow: hidden;
      position: relative;
  }
  .iframe-wrapper iframe {
      width: 1000px; /* Plotly页面的原始宽度 */
      height: 750px; /* Plotly页面的原始高度 */
      transform: scale(0.8); /* 缩放比例=目标宽度/原始宽度 */
      transform-origin: top left;
      position: absolute;
      top: 0;
      left: 0;
  }
  

  若要动态调整，需用JS实时计算内嵌页面内容的实际尺寸，再更新缩放比例和容器样式。

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