HTML页面嵌入子页面：适配父宽度+父滚动条替代子滚动条需求

我来帮你搞定这个iframe嵌入的问题！你想要的效果是让嵌入页面宽度铺满父页面、去掉自身滚动条，靠主页面滚动来浏览长内容对吧？分两种场景给你针对性的解决方案：

这种情况我们可以直接通过JS获取嵌入页面的内容高度，动态设置iframe的高度，完美适配内容：

1. 先写iframe的基础结构

<iframe id="embeddedFrame" src="your-target-page.html" style="width:100%; border:none; overflow:hidden;"></iframe>

这里设置width:100%让它自动适配父页面宽度，border:none去掉默认边框，overflow:hidden隐藏自身滚动条。

2. 用JS动态适配高度
   添加这段脚本，它会在嵌入页面加载完成后获取内容高度，还能监听内容变化实时更新：

const iframe = document.getElementById('embeddedFrame');

// 页面加载完成后初始化高度
iframe.onload = function() {
  // 获取嵌入页面的实际内容高度
  const contentHeight = iframe.contentDocument.body.scrollHeight;
  iframe.style.height = contentHeight + 'px';
  
  // 监听嵌入页面的内容变化（比如动态加载的元素），实时更新高度
  const observer = new MutationObserver(() => {
    const newHeight = iframe.contentDocument.body.scrollHeight;
    iframe.style.height = newHeight + 'px';
  });
  
  observer.observe(iframe.contentDocument.body, {
    childList: true,
    subtree: true,
    attributes: true
  });
};

跨域情况下浏览器会限制我们直接访问嵌入页面的DOM，这时候分两种处理方式：

方法1：你能控制嵌入页面的代码 #

在嵌入页面里添加脚本，通过postMessage给父页面发送自身高度：

// 嵌入页面的JS代码
window.onload = function() {
  // 页面加载完成后发送初始高度
  const height = document.body.scrollHeight;
  // 这里的*可以替换成父页面的具体域名，比如'https://your-parent-domain.com'，更安全
  window.parent.postMessage({ type: 'updateFrameHeight', height: height }, '*');
  
  // 监听内容变化，实时发送新高度
  const observer = new MutationObserver(() => {
    const newHeight = document.body.scrollHeight;
    window.parent.postMessage({ type: 'updateFrameHeight', height: newHeight }, '*');
  });
  
  observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: true
  });
};

然后在父页面添加接收消息的脚本：

// 父页面的JS代码
window.addEventListener('message', function(event) {
  // 建议验证消息来源，避免安全风险
  // if (event.origin !== 'https://your-embedded-domain.com') return;
  
  if (event.data.type === 'updateFrameHeight') {
    const iframe = document.getElementById('embeddedFrame');
    iframe.style.height = event.data.height + 'px';
  }
});

方法2：你无法控制嵌入页面的代码 #

这种情况只能用变通方案，给iframe设置一个足够大的固定高度（比如10000px），确保内容能完全显示，同时隐藏自身滚动条：

<iframe src="external-page.html" style="width:100%; border:none; overflow:hidden; height:10000px;"></iframe>

缺点是如果内容没那么长，主页面会有多余空白，但能满足“靠主页面滚动浏览”的核心需求。

• 建议给嵌入页面的body设置margin:0; padding:0;，避免额外的留白导致高度计算不准
• 跨域场景下尽量不要用*作为postMessage的目标域名，指定具体域名能提升安全性
• 如果嵌入页面是响应式的，父页面可以监听窗口resize事件，触发高度重新计算（同域直接重新获取，跨域则让嵌入页面监听resize发送消息）

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