iframe自适应高度（vue iframe 自适应高度）
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的高度？通常，可以使用JavaScript的如下脚本来调整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=https://xitong.haoyundao.net/"外部页面的地址\" 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}
