如何调整 iframe 的宽度和高度以适应其 HTML 内容?

htmlweb developmentfront end technology更新于 2025/2/28 14:36:17

我们可以使用 CSS 设置尺寸来调整 iframe 的 width 和 height。这可以通过将 width 和 height 属性设置为特定值或父容器的百分比来实现。此外，我们还可以使用 JavaScript 根据 iframe 中的内容动态调整尺寸。术语"iframe"是"内联框架"的缩写。

以下是可行的方法 -

使用 JavaScript

您可以使用 JavaScript 调整 iframe 的宽度和高度以适应其内容。这可以通过获取 iframe 元素，然后将其宽度和高度属性设置为其内部内容的值来实现 -

<iframe id="myiframe" src="http://example.com"></iframe>
<script>
    var iframe = document.getElementById("myiframe");
    iframe.width = iframe.contentWindow.document.body.scrollWidth;
    iframe.height = iframe.contentWindow.document.body.scrollHeight;
</script>

使用 CSS

您还可以使用 CSS 调整 iframe 的宽度和高度以适应其内容。这可以通过将 iframe 的宽度和高度属性设置为 100% 然后使用 padding-bottom 属性根据内部内容的纵横比调整 iframe 的高度来实现 -

<iframe id="myiframe" src="http://example.com"></iframe>
<style>
   #myiframe {
      width: 100%;
      height: 100%;
   }
</style>

使用 HTML

您还可以使用 HTML 调整 iframe 的宽度和高度以适应其内容。这可以通过将 iframe 元素的宽度和高度属性设置为 100% 来实现 -

<iframe width="100%" height="100%" src="http://example.com"></iframe>

注意 - 请注意，使用 JavaScript 或 CSS 调整 iframe 的大小可能会导致跨域 iframe 出现问题，因为浏览器可能会阻止访问 iframe 内的内容。在这种情况下，建议使用 HTML 方法。

示例

这是一个使用 JavaScript 调整 iframe 宽度和高度以适应其内容的完整示例 -

<!DOCTYPE html>
<html>
   <head>
      <script>
         window.onload = function() {
            var iframe = document.getElementById("myiframe");
            iframe.width = iframe.contentWindow.document.body.scrollWidth;
            iframe.height = iframe.contentWindow.document.body.scrollHeight;
         }
      </script>
   </head>
   <body>
      <iframe id="myiframe" src="https://wikipedia.org/wiki/Main_Page"></iframe>
   </body>
</html>