如何获取iframe内容的真实高度？现有代码无法正确获取

针对你遇到的iframe无法获取X-Raym_Lyrics.html真实高度的问题，可以从以下几个方面排查和解决：

1. 修复子页面的CSS布局问题 #

很多时候高度获取失败是因为子页面的html/body元素高度没有被内容正确撑开，比如存在浮动元素、绝对定位元素导致的高度塌陷。在X-Raym_Lyrics.html的样式中添加以下代码：

/* 确保html和body能被内容撑开 */
html, body {
  margin: 0;
  padding: 0;
  height: auto;
  overflow-y: visible;
}

/* 清除浮动，解决高度塌陷 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

给所有包含浮动元素的父容器添加clearfix类，确保父元素高度能包裹子元素。

2. 多维度获取高度值 #

不要仅依赖scrollHeight，不同浏览器和布局下，高度属性的返回值可能有差异，尝试同时获取多种高度值取最大值：

function resizeiframe() {
  const iframe = document.getElementById("Lyrics");
  const doc = iframe.contentDocument || iframe.contentWindow.document;
  
  // 取多种高度属性的最大值，确保获取到真实内容高度
  const realHeight = Math.max(
    doc.body.scrollHeight,
    doc.documentElement.scrollHeight,
    doc.body.offsetHeight,
    doc.documentElement.offsetHeight,
    doc.body.clientHeight,
    doc.documentElement.clientHeight
  );
  
  // 使用style.height设置高度，而非直接修改height属性
  iframe.style.height = realHeight + 'px';
}

3. 确保iframe加载完成后再执行高度计算 #

如果iframe还未加载完毕就调用函数，会获取到错误的高度值。可以给iframe添加onload事件，或者在函数内增加加载判断：

方法一：通过iframe的onload事件触发 #

<iframe id="Lyrics" src="X-Raym_Lyrics.html" scrolling="auto" title="Lyrics" width="100%" onload="resizeiframe()"></iframe>

方法二：在函数内延迟重试 #

function resizeiframe() {
  const iframe = document.getElementById("Lyrics");
  const contentWindow = iframe.contentWindow;
  
  // 检查iframe是否加载完成
  if (!contentWindow || !contentWindow.document.body) {
    setTimeout(resizeiframe, 150);
    return;
  }
  
  // 高度计算代码...
}

4. 解决本地跨域限制 #

如果是直接通过file://协议打开页面，Chrome会限制iframe的跨域访问（即使是本地文件），导致无法读取contentWindow内容。此时需要用本地服务器打开页面，比如：

• 使用Python：在文件目录下执行 python -m http.server，然后访问http://localhost:8000
• 使用Node.js：安装http-server后执行 http-server，访问对应地址

内容的提问来源于stack exchange，提问作者Daniel Figueiredo