折叠菜单触发后 iframe 高度不更新，须在子页折叠状态变更后主动上报新高度：同域用 documentelement.scrollheight + requestanimationframe 校验；跨域必须通过 postmessage 二次发送，且监听 toggle/shown/hidden 等事件，禁用 onload 单次设高。

折叠菜单触发后 iframe 高度不更新怎么办

折叠菜单（如 details、accordion、Vue/React 的展开收起）会动态改变子页面内容高度，但父页的 iframe 不会自动响应——因为 DOM 变化发生在子文档内，父页无感知。常见现象是：菜单展开后出现内部滚动条，或底部被截断。

关键不是“等 onload”，而是监听子页内容真实变化后的重排完成时机。尤其在移动端或使用 CSS Flex/Grid 布局时，scrollHeight 读取过早会偏小。

• 子页必须在每次折叠状态变更后重新上报高度，不能只依赖 DOMContentLoaded 一次
• 推荐用 ResizeObserver 监听 document.documentElement 或根容器，比轮询 setInterval 更精准、低开销
• 若用 jQuery UI Accordion 或 Bootstrap Collapse，需在 shown.bs.collapse / hidden.bs.collapse 回调里调用发高度函数
• React 中应在 useEffect 里监听相关 state 变化后触发 sendHeight()；Vue 中对应 watch 或 nextTick 后发送

同域下怎么安全读取折叠后的 scrollHeight

同域时看似可直接访问 iframe.contentDocument，但折叠操作常伴随 CSS 过渡、字体加载、图片解码，直接在事件回调里读 body.scrollHeight 极易取到旧值。iOS Safari 和微信 WebView 尤其明显。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 必须用 document.documentElement.scrollHeight，它比 body.scrollHeight 更稳定（尤其当 html { height: 100% } 或 box-sizing: border-box 生效时）
• 加 setTimeout(() => { /* read & set */ }, 100) 确保重排完成；更优方案是用 requestAnimationFrame + offsetHeight 校验是否已稳定
• body 必须重置：body { margin: 0; padding: 0; }，否则默认边距会让高度多出 8px
• 避免在 iframe.onload 里一次性设高——它只管初始加载，不管后续 JS 动态变化

跨域折叠页面怎么让父页收到新高度

跨域时父页完全无法读子页 DOM，唯一合规路径是子页主动发消息。但很多实现只在 load 时发一次，导致折叠后高度失准。

• 子页必须在两个时机都发消息：DOMContentLoaded（初始高度） + window.addEventListener('resize', ...)（含屏幕旋转、键盘弹起）
• 折叠逻辑触发后，要显式调用 sendHeight()，例如：details.addEventListener('toggle', sendHeight) 或 accordionEl.addEventListener('shown', sendHeight)
• 父页接收时必须校验 event.origin 和 event.source === iframe.contentWindow，防止伪造消息篡改高度
• 高度值建议传带单位的字符串，如 { height: '742px' }，避免父页拼接出错；若传数字，父页设 iframe.style.height = event.data.height + 'px'

为什么 ResizeObserver 不能直接观察 iframe 元素本身

ResizeObserver 只能观察当前 document 下的元素，iframe.contentDocument.body 属于另一个上下文，直接传进去会报 TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'。

• 正确做法是在子页内创建 ResizeObserver，目标是 document.documentElement 或一个包裹全部内容的 div#app
• 观察回调中加防抖（clearTimeout + setTimeout），避免折叠动画过程中高频触发
• 如果子页用了 Vue 3 的 v-show（display: none 切换），ResizeObserver 不会触发，此时需配合 visibilitychange 或手动通知
• 不要依赖 iframe.onload 初始化 ResizeObserver——它可能在子页 DOM 尚未就绪时执行，应放在 DOMContentLoaded 后

实际中最容易被忽略的是：折叠菜单的 JS 执行和浏览器 layout 完成之间存在微小延迟，这个间隙会导致高度计算错误。无论同域还是跨域，都必须把“读高度”这一步推到渲染管线真正稳定之后，而不是事件一触发就立刻执行。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！