iframe 自适应

逃离我推掉我的手 2023-10-17 08:58 70阅读 0赞

**目录**

iframe 自适应

1. 使用百分比或vw/vh单位设置 iframe 的宽度和高度

2. 使用 CSS Flexbox 布局

3. 使用 JavaScript 动态调整 iframe 大小

--------------------

## iframe 自适应 ##

在网页设计和开发中，经常会使用 iframe 元素来嵌入其他网页或内容。然而，由于不同网页的尺寸和布局可能不同，所以如何使嵌入的 iframe 自适应成为一个重要的问题。本文将介绍一些方法和技巧，帮助你实现 iframe 的自适应。

## 1. 使用百分比或vw/vh单位设置 iframe 的宽度和高度 ##

一种简单的方法是使用百分比或vw/vh单位来设置 iframe 的宽度和高度。通过将 iframe 的宽度和高度设置为相对于父元素的百分比，或者相对于视口的vw/vh单位，可以使 iframe 自适应不同的屏幕大小。

htmlCopy code<iframe src="example.com" style="width:100%; height:100%;"></iframe>

## 2. 使用 CSS Flexbox 布局 ##

CSS Flexbox 是一种强大的布局模型，可以在容器中自动调整项目的大小和位置。通过将 iframe 放置在一个 Flexbox 容器中，并设置适当的属性和值，可以实现 iframe 的自适应。

htmlCopy code<div style="display:flex; justify-content:center; align-items:center; height:100vh;">
      <iframe src="example.com" style="width:100%; height:100%;"></iframe>
    </div>

## 3. 使用 JavaScript 动态调整 iframe 大小 ##

如果上述方法无法满足需求，可以使用 JavaScript 动态调整 iframe 的大小。通过监听窗口大小的变化或者 iframe 内容的加载完成事件，使用 JavaScript 计算并设置 iframe 的宽度和高度，以实现自适应效果。

htmlCopy code<script>
      window.addEventListener('resize', function() {
        var iframe = document.getElementsByTagName('iframe')[0];
        iframe.style.width = window.innerWidth + 'px';
        iframe.style.height = window.innerHeight + 'px';
      });
    </script>

总结起来，实现 iframe 的自适应可以使用百分比或vw/vh单位设置宽度和高度、使用 CSS Flexbox 布局，以及使用 JavaScript 动态调整大小等方法。根据实际需求选择适合的方法，可以使嵌入的 iframe 在不同屏幕大小和布局中都能够自适应展示。

function reinitIframe()\{

var iframe = document.getElementById("iframepage");

try\{

var bHeight = iframe.contentWindow.document.body.scrollHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

var height = Math.max(bHeight, dHeight);

iframe.height = height;

\}catch (ex)\{\}

var timer1 = window.setInterval("reinitIframe()", 500); //定时开始

function reinitIframeEND()\{

var iframe = document.getElementById("iframepage");