需通过iframe.contentwindow.document.documentelement获取scrollheight和scrolltop，且必须等load事件后访问；跨域时用postmessage通信，并注意容差判断和事件绑定时机。
怎么获取iframe内部的scrollHeight和scrollTop
不能直接在父页面用window.scrollY或document.body.scrollHeight——这些值属于父页面，跟iframe内部完全无关。必须通过iframe.contentWindow.document拿到子文档对象，再读取其documentElement或body的尺寸属性。
关键点：
- 优先读
iframe.contentWindow.document.documentElement.scrollHeight，它在多数现代浏览器中更稳定；document.body.scrollHeight在某些iOS WebView里可能为0或不更新 -
scrollTop要从document.documentElement上读，不是body（尤其当页面有doctype时，滚动容器是html元素） - 必须等
iframe触发load事件后再访问，否则contentWindow可能为null或文档未解析完成 - 跨域iframe无法访问其内容，会抛
SecurityError；此时只能靠子页面主动postMessage通知
为什么scrollTop === scrollHeight - clientHeight经常失效
这个等式看似合理，但在实际中极易误判：iOS Safari、Chrome for Android、部分缩放/字体渲染场景下，scrollHeight可能滞后一帧更新，或因小数像素四舍五入导致差值为0.9999而非0。
稳妥做法是引入容差（threshold），比如5–10px：
const doc = iframe.contentWindow.document.documentElement; const isAtBottom = doc.scrollTop + doc.clientHeight >= doc.scrollHeight - 10;
注意：clientHeight要用documentElement的，不是body的；否则在无doctype的怪异模式下会错。
如何安全监听iframe内的滚动事件
不能在父页面直接写iframe.onscroll——iframe本身不触发滚动事件，滚动发生在其内部文档上。
正确路径是：在iframe.load后，用contentWindow.addEventListener('scroll', ...)绑定到子文档。
但要注意：
- 必须确保iframe同源，否则
contentWindow不可访问 - 移动端WebView中，有些版本需要显式给
iframe加style="height: 100%"并设父容器overflow: auto，否则documentElement.clientHeight可能恒为视口高度 - 滚动事件高频触发，务必节流（如用
requestIdleCallback或简单时间戳判断间隔≥100ms） - 避免重复绑定：每次
src变更后都要重新绑定，且旧监听器需手动removeEventListener
跨域iframe怎么办：用postMessage通信
如果iframe来自不同域名，唯一可行方式是让子页面自己判断滚动位置，并通过postMessage通知父页。
子页面（iframe内）需写：
window.addEventListener('scroll', () => {
const doc = document.documentElement;
if (doc.scrollTop + window.innerHeight >= doc.scrollHeight - 10) {
parent.postMessage('SCROLL_TO_BOTTOM', '*');
}
});
父页面监听：
window.addEventListener('message', (e) => {
if (e.data === 'SCROLL_TO_BOTTOM') {
console.log('iframe content scrolled to bottom');
}
});
注意：*在生产环境应替换为具体源地址；子页面也需校验e.source是否可信，防止伪造消息。
真正容易被忽略的是：子页面的scroll监听必须在DOMContentLoaded之后注册，否则可能错过初始滚动状态；而父页面的message监听必须在iframe创建前就挂好，否则首条消息会丢失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
