iframe高度动态适配

        iframe因为要设置高度，所以要是内容超过iframe容器设置的高度就会出现滚动条，影响美观，所以可以通过获取iframe嵌套内容的高度动态获取。

        先设置iframe为动态的height

<iframe src="" frameborder="0" id="iFrame" width="100%" scrolling="no" :height="height"></iframe>

然后再调用方法动态获取内容高度赋值

let iframe = document.getElementById('iFrame');
//先获取iframe元素
let doc = iframe.contentDocument || iframe.document;
setTimeout(() => {
    that.height = doc.documentElement.scrollHeight;
}, 500);
//注意：如果直接获取文档的scrollheight会因为iframe获值的时候突然撑大一下
//获得的高度明显偏大，所以需要延时获取一下，可以暂时先赋一个值代替下
doc.getElementById("js_content").style.visibility = "visible";

控制台输出效果：

 

以下是我用vue3动态获取iframe高度的配置：

const height = ref("");
const initState = ref(false);
// 这是我控制加载中提示的标识符，等到适配完成再撤销
onMounted(() => {
  // 因为iframe加载也是需要时间的，在mounted完成后延时才能拿到已经加载完成的内容
  setTimeout(() => {
    let iframe = document.getElementById("detail");
    let doc = iframe.contentDocument || iframe.document;
    setTimeout(() => {
      height.value = doc.documentElement.scrollHeight;
    }, 500);
  initState.value = true;
  }, 100);
});