JavaScript获取IFrame内容高度异常，无法自动适配内容高度求助

嘿，我一眼就看到你踩了个很容易忽略的异步加载坑！你当前的核心问题是：设置iframe的src后立刻调用了CheckIFrameHeight函数，但此时iframe的内容还没加载完成——浏览器需要时间解析渲染data URI里的HTML内容，这时候去获取contents()自然拿不到正确的DOM，所以返回undefined，高度也只能拿到默认的150px。

另外还有两个小细节需要修正：

• 你放在<script type="text/plain">里的HTML结构有错误：<head>标签没闭合，而且<p>标签放在了<head>里，不符合HTML规范，可能导致渲染异常。
• 用encodeURIComponent处理HTML内容时，要确保内容本身是合法的HTML结构。

修正后的完整代码 #

<iframe id="Iframe35382" width="100%" frameborder="0"></iframe> 
<script id="Iframe35382-content" type="text/plain">
<html>
<head>
    <!-- 这里可以放样式、meta等头部内容 -->
</head>
<body>
    <p>Lengthy html(correctly displaying) shortened for porposes of question</p>
    <!-- 其他内容 -->
</body>
</html>
</script>
<script type="text/javascript">
function CheckIFrameHeight($frame) {
    // 优先获取body的高度，比直接取contents高度更准确
    var newHeight = $frame.contents().find('body').height() || $frame.contents().height();
    console.log(newHeight); // 用console.log调试比alert更友好
    console.log($frame.contents().find('html').html());
    
    // 处理最小高度逻辑
    if(!newHeight || isNaN(newHeight)) {
        newHeight = 100;
    }
    $frame.height(newHeight + 'px');
}

var iframe = document.getElementById('Iframe35382');
var iframeContent = $('#Iframe35382-content').text();
iframe.src = 'data:text/html,' + encodeURIComponent(iframeContent);

// 关键：监听iframe的load事件，等内容完全加载后再调整高度
$(iframe).on('load', function() {
    CheckIFrameHeight($(this));
});
</script>

关键说明 #

1. 异步加载监听：通过load事件确保我们只在iframe内容完全渲染后才计算高度，这是解决你当前问题的核心。
2. HTML结构修正：把内容放在<body>里，闭合<head>标签，保证HTML合法性，避免浏览器怪异模式渲染。
3. 高度计算优化：优先获取body的高度，比直接取contents().height()更准确，部分浏览器的html元素高度可能包含额外边距。

如果之后仍有问题，可以检查：

• 控制台是否有报错，比如jQuery是否正确引入（你的代码用了$，要确保页面已加载jQuery）。
• 内容中的CSS是否影响高度计算，比如overflow:hidden或绝对定位元素，可能需要改用scrollHeight来获取完整高度。

内容的提问来源于stack exchange，提问作者Louis M.