无需修改父页面，实现嵌入页面高度随内容自适应

需要将自己的网页嵌入另一网页，但无父页面管理权限，仅能通过文本/HTML编辑器在<p class="card-text"> ... </p>容器中添加内容。要求嵌入的网页能根据内容自动调整高度、不显示滚动条，无需修改父页面容器；目前用iframe实现但固定了min-height，内容变化（比如折叠板块展开）时不够灵活，希望达到原生内容的呈现效果。请问：

1. 是否有无需脚本的可行方案？有没有比iframe更好的方式？
2. 若必须用脚本，针对该父页面结构的最小有效方案是什么？

一、无需脚本的最优方案：直接嵌入HTML片段 #

如果你的内容是静态或可导出的纯HTML+CSS（无复杂JS交互），直接把内容的完整代码（包括样式）复制到card-text容器里是最佳选择：

• 完全原生内容，高度自动适配父容器，折叠板块展开时不会出现滚动条
• 无需依赖iframe，避免跨域和高度固定的问题

注意事项： #

• 为避免样式冲突，给所有嵌入内容的元素加专属隔离类（比如.my-embed-container），所有样式都嵌套在该类下，示例：

  <div class="my-embed-container">
    <!-- 你的内容HTML -->
  </div>
  <style>
    .my-embed-container p { margin: 0; }
    .my-embed-container .collapse-panel { /* 折叠板块样式 */ }
  </style>
  

• 如果内容包含JS驱动的动态交互（比如点击折叠），这种方法无法实现，必须用脚本方案。

二、必须用脚本的最小有效方案（基于iframe+postMessage） #

因为只能在card-text容器内添加内容，所以将iframe和脚本直接写在该容器中，通过postMessage实现跨页面高度同步：

1. 父页面（嵌入端）代码（写在card-text容器内） #

<iframe id="custom-embed" src="你的网页地址" style="width:100%;border:none;overflow:hidden;" scrolling="no"></iframe>
<script>
const iframe = document.getElementById('custom-embed');
// 监听iframe加载完成
iframe.onload = () => {
  // 请求iframe初始高度
  iframe.contentWindow.postMessage({type: 'req-height'}, '*');
  // 接收iframe发送的高度更新
  window.addEventListener('message', e => {
    if (e.data?.type === 'height-update') {
      iframe.style.height = `${e.data.height}px`;
    }
  });
};
</script>

2. 你的嵌入网页代码（需要修改自己的网页） #

添加一段极简脚本，主动向父页面发送高度变化：

// 计算并发送当前页面高度
const sendHeight = () => {
  const height = document.body.scrollHeight;
  window.parent.postMessage({type: 'height-update', height}, '*');
};

// 初始加载发送高度
window.onload = sendHeight;

// 监听折叠板块点击（假设折叠按钮类名为collapse-trigger）
document.querySelectorAll('.collapse-trigger').forEach(btn => {
  btn.addEventListener('click', () => setTimeout(sendHeight, 100));
});

// 监听DOM动态变化（比如内容加载、元素修改）
new MutationObserver(sendHeight).observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true
});

注意事项： #

• 确保父页面允许跨域postMessage通信（现代浏览器默认允许）
• 如果父页面的编辑器禁止添加<script>标签，该方案不可行，只能回到HTML片段嵌入

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