根据窗口大小调整 iframe 内容的布局

Question

我有一个 iframe，它链接到使用 FORD 创建的 Fortran 代码文档。它的布局与this 页面相同。我想在我的 sphinx 网站上使用 iframe 在其中一个页面上显示其内容。但是，链接到它会导致 iframe 内容的布局不会像仅打开文档那样发生变化。相反，它将全尺寸窗口向左推，使其只有一半可见，如下图所示：

有没有办法在窗口布局发生变化时缩小 iframe 内容，以便首先最小化边框，然后在底部显示滚动条？ iframe 嵌入网站的方式如下：

.. raw:: html

      <iframe src="path_to_FORD_documentation_index.html" style="position:fixed; top:auto; left:auto; bottom:auto; right:auto; width:100%; height:100%; border:none; margin:auto; padding:auto; overflow:hidden; z-index:999999;">
      Your browser doesn't support iframes
      </iframe>

我已经从this question 中尝试过基于 javascript 的方法，但这只是在主页底部创建了一个滚动条，但没有调整 iframe 内容的大小。

Answer 1

没有太多事情要做，我认为您的问题在于您的 height 和 width 属性。在 iFrame 加载内容之前，您的 DOM 正在加载 iFrame。因此，当创建元素时，它没有宽度或高度，因此 iFrame 默认为最小高度/宽度。解决方案可能是预加载 iFrame 链接：

<link rel="preload" href="https://path_to_FORD_documentation_index.html" as="document"> 然后像现在一样调用 iFrame

或者您可以在函数中调整 iFrame 的大小并在页面加载后调用它：

<script>
iFrame.width  = iFrame.contentWindow.document.body.scrollWidth
iFrame.height = iFrame.contentWindow.document.body.scrollHeight
</script>