如何根据内容自适应调整iframe所在section的高度？

一、确保在iframe内容加载完成后获取高度 #

你之前拿到的150px是iframe默认高度，大概率是代码执行时iframe内部还没加载完毕。解决思路是等iframe完全加载后再计算高度：

// 替换成你的iframe选择器
const targetIframe = document.querySelector('section iframe');

// 监听iframe的load事件，确保内部内容加载完成
targetIframe.addEventListener('load', () => {
  try {
    // 获取iframe内部的文档对象
    const innerDocument = targetIframe.contentDocument || targetIframe.contentWindow.document;
    // 取内部body的scrollHeight作为高度
    const contentHeight = innerDocument.body.scrollHeight;
    // 给iframe设置高度
    targetIframe.style.height = `${contentHeight}px`;
  } catch (error) {
    console.error('获取iframe高度失败：', error);
  }
});

注意：这个方法仅适用于同域iframe，跨域会触发浏览器同源策略限制，无法访问内部文档。

二、跨域场景的解决方案（需配合iframe内部页面修改） #

如果iframe是第三方跨域页面，直接访问内部DOM会被阻止，这时候需要让iframe主动把高度传给主页面：

1. 在iframe内部页面添加代码（需要联系第三方开发者配合）：

// 页面加载完成后发送初始高度
window.addEventListener('load', () => {
  const currentHeight = document.body.scrollHeight;
  // 建议替换*为你的主页面域名，提升安全性
  window.parent.postMessage({ type: 'updateIframeHeight', height: currentHeight }, '*');
});

// 监听内部内容变化，动态发送高度（比如内容展开、异步加载）
const mutationObserver = new MutationObserver(() => {
  const newHeight = document.body.scrollHeight;
  window.parent.postMessage({ type: 'updateIframeHeight', height: newHeight }, '*');
});
// 监听body下所有内容变化
mutationObserver.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true
});

2. 主页面接收消息并更新高度：

window.addEventListener('message', (event) => {
  // 验证消息来源，替换为iframe的实际域名，防止恶意消息
  if (event.origin !== 'https://第三方域名.com') return;
  
  if (event.data.type === 'updateIframeHeight') {
    const targetIframe = document.querySelector('section iframe');
    targetIframe.style.height = `${event.data.height}px`;
  }
});

三、无法修改iframe内容的折中方案（仅同域可用） #

如果没法改动iframe内部代码，且是同域场景，可以定时检测高度变化：

const targetIframe = document.querySelector('section iframe');

// 每500ms检测一次高度，可根据需求调整间隔
setInterval(() => {
  try {
    const innerDocument = targetIframe.contentDocument || targetIframe.contentWindow.document;
    const contentHeight = innerDocument.body.scrollHeight;
    // 只有高度变化时才更新，避免频繁操作DOM
    if (targetIframe.offsetHeight !== contentHeight) {
      targetIframe.style.height = `${contentHeight}px`;
    }
  } catch (error) {
    console.log('跨域限制，无法获取iframe高度');
  }
}, 500);

额外注意：确保主页面代码执行时机正确 #

主页面的JS代码要在iframe元素渲染完成后再执行，比如把script标签放在body末尾，或者用DOMContentLoaded包裹：

document.addEventListener('DOMContentLoaded', () => {
  // 这里写获取iframe和添加监听的代码
});

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