iframe自适应高度（vue iframe 自适应高度）-微PE WEIPE.NET

1. 什么是iframe自适应高度？iframe自适应高度是指网页中某一指定块可以自适应高度，只要将该块内部内容改变，其高度也会根据内容自动改变而无需人工干预。

2. 为什么要使用iframe自适应高度？通常会在网页中使用多个iframe来完成不同的任务。比如，如果内容发生变化，则不能自动调整每个iframe的高度，使用iframe自适应高度可以解决这一问题。

3. 使用iframe自适应高度的方法？有两种方法来实现iframe自适应高度：

（1）使用CSS属性。将CSS设置为iframe{ height:auto；overflow: hidden}。这使得框架能够自动调整其大小；

（2）通过JavaScript编程实现。可以在每次网页加载完成后通过JavaScript编程获取iframe内容的高度并调整iframe的高度。

4. 濡備綍璋冩暣iframe鐨勯珮搴︼紵閫氬父锛屽彲浠ヤ娇鐢↗avaScript鐨勫涓嬭剼鏈潵璋冩暣iframe鐨勯珮搴︼細

// 获取iframe的原始高度

var iframeobj = document.getElementById('iframeID');

var iframeheight = iframeobj.height;

// 璋冩暣iframe楂樺害

if (iframeheight != document.body.scrollHeight) {

聽聽聽聽iframeobj.height = document.body.scrollHeight;

}

5. 濡備綍鍦ㄩ〉闈㈠姞杞藉畬鎴愬悗瑙﹀彂閲嶆柊璋冩暣iframe鐨勯珮搴︼紵鍙互浣跨敤濡備笅鑴氭湰鏉ュ疄鐜帮細

window.onload = function(){

    // 获取iframe的原始高度

聽聽聽聽var iframeobj = document.getElementById('iframeID');

聽聽聽聽var iframeheight = iframeobj.height;

聽聽聽聽// 璋冩暣iframe楂樺害

聽聽聽聽if (iframeheight != document.body.scrollHeight) {

聽聽聽聽聽聽聽聽iframeobj.height = document.body.scrollHeight;

聽聽聽聽}

}

总结：iframe自适应高度是指网页中某一指定块可以自适应高度，只要将该块内部内容改变，其高度也会根据内容自动改变而无需人工干预。将CSS设置为iframe{ height:auto；overflow: hidden}，或者通过JavaScript编程实现。最后，可以在页面加载完成后触发重新调整iframe的高度。

一、什么是iframe自适应高度？

iframe自适应高度是指在网页引入iframe标签时，页面中使用的内容（外部连接的内容）的高度不固定的时候，iframe的高度可以根据内部页面内容的高度而自适应变化。

二、iframe自适应高度的实现步骤

（1）使用javascript脚本获取iframe内容的加载后高度：

特别注意，在获取iframe内部页面高度之前，必须先设置iframe高度，比如可以设置为0，这样对应的值才会被获取到。

（2）把获取的高度值赋值给iframe的高度：

使用javascript代码，把获取的高度值赋值给iframe的height属性，即可实现其自适应高度。

（3）设置iframe内容高度随页面宽度变化而变化：

（a）使用CSS中的@media规则定义不同窗口大小时，对应的内容高度

（b）使用CSS中的calc属性让窗口大小变化时同时变更对应的内容高度

（c）使用CSS中的transform属性让窗口大小变化时同时变更对应的内容高度

三、实例代码

（1）使用javascript获取iframe内容的高度：

<iframe id=\"iframe\" src=\"外部页面的地址\" width=\"100%\" frameborder=\"0\" scrolling=\"no\" height=\"0\"></iframe>

<script>

\tdocument.getElementById(\"iframe\").onload=function(){

\t document.getElementById(\"iframe\").height = document.getElementById(\"iframe\").contentWindow.document.body.scrollHeight;

\t}

</script>

（2）使用CSS让窗口大小变化时同时变更对应的内容高度：

<style>

\t@media (min-width: 1200px) {

\t\t#iframe{height:200px;}

\t}

\t@media (min-width: 992px) {

\t\t#iframe{height:100px;}

\t}

\t@media (min-width: 768px) {

\t\t#iframe{height:calc(100vh - 120px);}

\t}

\t@media (min-width: 576px) {

\t\t#iframe{height:calc(100vh - 310px);}

\t}