如何获取内联iframe渲染内容的宽高并设置给iframe？求最优方案

嘿，这个需求我之前也碰到过，处理内联HTML的iframe时，想要让它自适应内容大小确实挺实用的。下面给你分享两种靠谱的实现方式，分别用JavaScript和CSS，你可以根据场景选择：

一、JavaScript 实现（精准控制，支持动态内容） #

因为你用的是内联data: URL的iframe，它和父页面是同源的，所以可以直接访问内部文档，没有跨域限制。核心思路是等iframe内容加载完成后，获取内部内容的实际宽高，再同步到iframe本身。

基础实现（静态内容） #

let src = `data:text/html;charset=UTF-8,<html> <body> <p>Content</p> </body> </html>`;
let iframe = document.createElement("iframe");
document.querySelector('body').appendChild(iframe);

// 重点：先监听load事件，再设置src，避免错过加载完成时机
iframe.addEventListener('load', function() {
  // 获取内部文档的body元素
  const innerBody = this.contentDocument.body;
  // 用scrollWidth/scrollHeight获取内容的实际宽高（包含溢出部分）
  const contentWidth = innerBody.scrollWidth;
  const contentHeight = innerBody.scrollHeight;
  
  // 把宽高设置给iframe
  this.style.width = `${contentWidth}px`;
  this.style.height = `${contentHeight}px`;
  
  // 如果不需要考虑溢出内容，也可以用offsetWidth/offsetHeight（仅可见区域）
  // const contentWidth = innerBody.offsetWidth;
  // const contentHeight = innerBody.offsetHeight;
});

// 最后设置src触发加载
iframe.setAttribute('src', src);

进阶实现（动态内容实时更新） #

如果iframe里的内容会动态变化（比如异步加载元素、用户交互改变内容），可以用MutationObserver监听内部内容的变化，实时更新iframe的宽高：

let src = `data:text/html;charset=UTF-8,<html> <body> <p>Content</p> </body> </html>`;
let iframe = document.createElement("iframe");
document.querySelector('body').appendChild(iframe);

iframe.addEventListener('load', function() {
  const innerBody = this.contentDocument.body;
  // 封装更新宽高的函数
  const updateIframeSize = () => {
    const contentWidth = innerBody.scrollWidth;
    const contentHeight = innerBody.scrollHeight;
    this.style.width = `${contentWidth}px`;
    this.style.height = `${contentHeight}px`;
  };
  
  // 页面加载完成后先更新一次
  updateIframeSize();
  
  // 监听body的子元素变化、样式变化（比如宽高修改）
  const observer = new MutationObserver(updateIframeSize);
  observer.observe(innerBody, {
    childList: true,    // 监听子元素的添加/删除
    subtree: true,      // 监听所有子树的变化
    attributes: true,   // 监听属性变化
    attributeFilter: ['style'] // 只监听style属性变化
  });
});

iframe.setAttribute('src', src);

二、CSS 实现（简单无JS，适合静态内容） #

如果iframe里的内容是完全静态的，不需要动态调整，用CSS的fit-content属性就能轻松搞定，不需要写额外的JS逻辑：

首先给iframe加个样式：

iframe {
  width: fit-content;
  height: fit-content;
  border: none; /* 可选，去掉默认的iframe边框 */
}

然后JS部分保持你原来的创建和添加逻辑就行：

let src = `data:text/html;charset=UTF-8,<html> <body> <p>Content</p> </body> </html>`;
let iframe = document.createElement("iframe");
document.querySelector('body').appendChild(iframe);
iframe.setAttribute('src', src);

注意事项 #

• fit-content在现代浏览器都支持，但旧版IE不兼容；
• 如果内部内容设置了overflow: scroll，fit-content只会计算可见区域的宽高，不会包含滚动的部分；
• 内容动态变化时，不会自动更新iframe的宽高。

选择建议 #

• 要是你需要精准控制、支持动态内容更新，优先选JavaScript实现，尤其是带MutationObserver的进阶版本；
• 要是内容是静态的、追求极简无JS，用CSS fit-content更方便。

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