iframe 自适应

目录

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 在不同屏幕大小和布局中都能够自适应展示。

<iframe src="/en/product/ldsdf.html" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="reinitIframeEND();"  ></iframe>

<script type="text/javascript" language="javascript">   

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");

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){}

// 停止定时

window.clearInterval(timer1);

}

</script>