Vue项目中iframe加载plot.html渲染与原文件不一致问题求助

问题描述 #

我在Vue应用中使用的iframe代码如下：

<iframe
    srcdoc="plot.html"
    width="100%"
    height="1200"
    frameborder="0"
/>

当前iframe渲染时，图表左右存在间隙，但直接打开plot.html文件时显示正常（无间隙），需要解决iframe中图表的间隙问题。

解决方法 #

• 修正iframe的文件加载方式
  你当前用的srcdoc="plot.html"是把字符串"plot.html"作为iframe的内容，并没有真正加载这个HTML文件！这大概率是核心问题。改用src属性加载文件：

  <iframe
      src="./plot.html"
      width="100%"
      height="1200"
      frameborder="0"
  />
  

  注意路径要匹配实际文件位置，比如plot.html在Vue项目的public目录下，路径应写为/plot.html。

• 清除iframe及父元素的默认间距
  浏览器默认会给iframe或其父容器加margin/padding，添加样式清除：

  <iframe
      src="./plot.html"
      width="100%"
      height="1200"
      frameborder="0"
      style="display: block; margin: 0; padding: 0;"
  />
  

  也可以在Vue组件的<style>中全局设置：

  iframe {
      display: block;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  

• 确保plot.html内部清除默认边距
  打开plot.html，在其CSS里清除body的默认边距，避免iframe加载时出现间隙：

  body {
      margin: 0;
      padding: 0;
      overflow: hidden; /* 若有多余滚动条也可一并移除 */
  }
  

  同时检查图表容器的CSS，确保没有额外的padding或margin设置。

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