javascript - 根据窗口大小调整 iframe 内容的布局
问题描述
我有一个链接到使用FORD创建的 Fortran 代码文档的 iframe 。它的布局与此页面相同。我想在我的 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>
我已经从这个问题尝试了基于 javascript 的方法,但这只是在主页底部创建了一个滚动条,但没有调整 iframe 内容的大小。
解决方案
没有太多事情要做,我认为你的问题出在你的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>