在JavaScript / HTML中，搭建`＜iframe＞` 自适应高度

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

---

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

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

<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 主动发送高度信息：

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

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

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 变化：

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 辅助优化

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

---

注意事项

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

---

完整代码示例（同源）

<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 高度自适应。若涉及跨域，需确保目标页面主动配合或使用服务端代理。