在JavaScript / HTML中，实现`＜iframe＞` 自适应高度

在使用 <iframe> 时，自适应高度是一个常见需求。以下是实现高度自适应的详细方法，可避免出现滚动条：

方法一：纯 JavaScript 动态调整（适用于同源页面）

如果嵌入的页面与你的网站同源（无跨域限制），可以直接通过 JavaScript 监听内容高度变化。

html 复制代码

<iframe id="myIframe" src="your-page.html" width="100%" scrolling="no"></iframe>

<script>
  const iframe = document.getElementById('myIframe');
  
  // 监听 iframe 内容加载完成
  iframe.onload = () => {
    // 获取 iframe 内容的高度
    const contentHeight = iframe.contentDocument.body.scrollHeight;
    iframe.style.height = contentHeight + 'px';
  };

  // 可选：监听窗口大小变化（如响应式内容）
  window.addEventListener('resize', () => {
    const contentHeight = iframe.contentDocument.body.scrollHeight;
    iframe.style.height = contentHeight + 'px';
  });
</script>

方法二：处理跨域页面（需合作）

如果嵌入的是跨域页面 ，浏览器会因安全限制禁止直接访问 contentDocument。此时需要以下两种方法之一：

1. 目标页面配合（需修改外部页面代码）

在目标页面中添加代码，通过 postMessage 主动发送高度信息：

javascript 复制代码

// 目标页面中的代码
window.addEventListener('resize', () => {
  const height = document.body.scrollHeight;
  window.parent.postMessage({ type: 'iframeHeight', height }, '*');
});

在你的主页面中接收消息并调整高度：

javascript 复制代码

window.addEventListener('message', (event) => {
  if (event.data.type === 'iframeHeight') {
    const iframe = document.getElementById('myIframe');
    iframe.style.height = event.data.height + 'px';
  }
});

2. 服务端代理 + 同源处理

通过服务端代理将外部页面转为同源（需自行实现代理接口）。

方法三：MutationObserver（动态内容监听）

如果 iframe 内部内容会动态变化（如 AJAX 加载），需实时监听 DOM 变化：

javascript 复制代码

iframe.onload = () => {
  const observer = new MutationObserver(() => {
    const contentHeight = iframe.contentDocument.body.scrollHeight;
    iframe.style.height = contentHeight + 'px';
  });

  observer.observe(iframe.contentDocument.body, {
    childList: true,
    subtree: true,
    attributes: true
  });
};

方法四：CSS 辅助优化

css 复制代码

/* 隐藏 iframe 内部滚动条 */
#iframe {
  overflow: hidden;
  border: none;  /* 去除边框 */
}

注意事项

跨域限制：若无法修改目标页面，跨域高度自适应几乎不可行（现代浏览器安全策略严格）。
性能优化 ：频繁调整高度可能导致性能问题，建议用 setTimeout 或 requestAnimationFrame 节流。
移动端适配：部分移动浏览器对 iframe 高度计算存在差异，需实测。

完整代码示例（同源）

html 复制代码

<iframe id="myIframe" src="your-page.html" width="100%" scrolling="no"></iframe>

<script>
  const iframe = document.getElementById('myIframe');
  
  const setHeight = () => {
    try {
      const contentHeight = iframe.contentDocument.body.scrollHeight;
      iframe.style.height = contentHeight + 'px';
    } catch (e) {
      console.error('跨域限制，无法获取高度');
    }
  };

  iframe.onload = setHeight;
  window.addEventListener('resize', setHeight);
</script>

通过以上方法，可有效实现 iframe 高度自适应。若涉及跨域，需确保目标页面主动配合或使用服务端代理。