Iframe自适应高度，Iframe高度问题解决

蕃薯耀

于 2021-03-10 18:45:00 发布

阅读量4.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签： js javascript css html vue

本文链接：https://blog.csdn.net/w995223851/article/details/115402470

本文介绍了如何解决Iframe高度不自适应的问题，提供了一种有效的自适应高度的方法，并详细阐述了其使用步骤。适用于前端开发中遇到Iframe内容显示不全的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Iframe自适应高度，Iframe高度问题解决

================================

https://www.cnblogs.com/fanshuyao/

一、Iframe自适应高度方法

/**
 * 父级页面获取子级页面的高度 给元素设置高度
 * 在onload事件之后才生效，即第一次加载才生效，后面高度变化不再生效
 * @param id
 * @returns
 */
function setIframeHeightAfterLoad(id){
    try{
        var iframe = document.getElementById(id);
        if(iframe.attachEvent){
            iframe.attachEvent("onload", function(){
                //console.log("iframe.attachEvent");
                iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;
            });
            return;
            
        }else{
            iframe.onload = function(){
                iframe.height = iframe.contentDocument.body.scrollHeight;
                //console.l