如何通过JavaScript动态适配外部URL的iframe及父div高度？

问题分析 #

你之前的两种方案存在明显问题：

• 第一种方案错误地获取了父页面的高度（contentWindow.parent.document指向当前页面而非iframe内部），导致iframe被设置为父窗口高度，出现大量空白。
• 第二种方案大概率是因为iframe未加载完成就执行代码，或者受浏览器同源策略限制无法访问外部iframe的DOM，导致获取到错误的初始高度（150px），进而遮挡内容。

解决方案 #

根据iframe是否与父页面同源，分两种情况处理：

情况1：iframe与父页面同源（可控制iframe内容域名）

这种情况可直接访问iframe内部DOM，只需等待iframe加载完成后获取真实高度，再同步设置iframe和父容器的高度：

const iframe = document.getElementById('friendsgiving');
const iframeContainer = iframe.parentElement;

// 监听iframe加载完成事件，确保内容已渲染
iframe.addEventListener('load', () => {
  try {
    // 获取iframe内部内容的实际高度（兼容不同文档结构）
    const contentHeight = Math.max(
      iframe.contentWindow.document.body.scrollHeight,
      iframe.contentWindow.document.documentElement.scrollHeight
    );
    // 设置iframe高度
    iframe.style.height = `${contentHeight}px`;
    // 同步设置父容器高度，覆盖默认固定高度
    iframeContainer.style.height = `${contentHeight}px`;
    // 移除父容器可能存在的高度限制样式
    iframeContainer.style.minHeight = 'auto';
    iframeContainer.style.maxHeight = 'none';
  } catch (e) {
    console.error('获取iframe高度失败:', e);
  }
});

情况2：iframe为外部跨域URL（当前场景）

浏览器同源策略禁止跨域访问iframe内部DOM，必须依赖iframe所在页面的开发者配合，通过postMessage传递高度信息：

步骤1：在iframe目标页面添加代码（需目标网站开发者配合）

在https://cesar-canine-cuisine.campaign.playable.com/cesarfriendsgiving页面中添加以下代码，用于向父页面发送高度信息：

// 页面加载完成后发送初始高度
window.addEventListener('load', () => {
  const contentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
  // 生产环境建议替换为父页面的具体域名，避免安全风险
  window.parent.postMessage({ type: 'iframeHeight', height: contentHeight }, '*');
});

// 若内容有动态变化（如展开/折叠），实时更新高度
window.addEventListener('resize', () => {
  const contentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
  window.parent.postMessage({ type: 'iframeHeight', height: contentHeight }, '*');
});

步骤2：父页面添加监听代码

在你的页面中添加以下代码，接收来自iframe的高度信息并更新容器：

const iframe = document.getElementById('friendsgiving');
const iframeContainer = iframe.parentElement;

// 监听来自iframe的消息
window.addEventListener('message', (event) => {
  // 验证消息来源，防止恶意注入（生产环境替换为iframe的实际域名）
  if (event.origin !== 'https://cesar-canine-cuisine.campaign.playable.com') return;
  
  if (event.data.type === 'iframeHeight') {
    const contentHeight = event.data.height;
    iframe.style.height = `${contentHeight}px`;
    iframeContainer.style.height = `${contentHeight}px`;
    // 移除父容器的固定高度限制
    iframeContainer.style.minHeight = 'auto';
    iframeContainer.style.maxHeight = 'none';
  }
});

替代方案（无法获取iframe页面配合时） #

如果无法让外部网站开发者配合，只能退而求其次，启用iframe滚动条：

<iframe class="iframe-container__inner" id="friendsgiving" src="https://cesar-canine-cuisine.campaign.playable.com/cesarfriendsgiving" title="Friendsgiving" scrolling="auto" marginheight="0" frameborder="0"></iframe>

同时移除父容器的固定高度样式，让iframe自适应内容高度（但会出现滚动条）。

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