如何使用jQuery检测iframe是否已滚动至底部

你写的检测逻辑不生效，核心原因是浏览器跨域安全限制：你现在iframe嵌入的是外域（维基百科）页面，受同源策略约束，父页面没有权限访问跨域iframe内部的window、document对象，自然没法绑定内部的滚动事件、读取滚动位置，你之前写的获取contentWindow绑定事件的逻辑会被浏览器直接拦截。
另外你写的两段代码本身也有逻辑错误：

• 第一段代码的触底计算逻辑错误，拿contentWindow高度减iframe标签本身高度，完全不符合触底判定的计算规则
• 第二段代码绑定的是父页面自身的window滚动事件，和iframe内部的滚动行为没有任何关系，只有父页面本身滚动到底才会触发，根本检测不到iframe内部的滚动状态

分两种实际场景处理：

场景1：iframe加载的是和父页面同域名、你自己可控的页面 #

这种场景下可以直接绑定iframe内部的滚动事件，修正后的jQuery代码如下：

$(function() {
  const $iframe = $("#iframec");
  // 等iframe内容完全加载完再绑定事件
  $iframe.on("load", function() {
    // 兼容不同浏览器取iframe内部window和document
    const iframeInnerWin = $iframe[0].contentWindow;
    const iframeInnerDoc = $iframe[0].contentDocument || iframeInnerWin.document;
    const $innerWin = $(iframeInnerWin);
    const $innerDoc = $(iframeInnerDoc);

    $innerWin.on("scroll", function() {
      const scrollTop = $innerWin.scrollTop();
      const viewportHeight = $innerWin.height();
      const totalContentHeight = $innerDoc.height();
      // 留1px容错，适配部分浏览器滚动值存在小数误差的情况
      if (scrollTop + viewportHeight >= totalContentHeight - 1) {
        alert("已滚动到iframe底部");
      }
    });
  });
});

触底判定的正确逻辑是：iframe内部滚动条向下偏移的距离 + iframe可视区域高度 ≥ iframe内部文档总高度，不要搞混计算对象。

场景2：iframe加载的是你无权控制的外域页面（比如你当前嵌入的维基百科页面） #

这种场景下没有任何原生JS/jQuery方案可以直接读取跨域iframe的内部滚动位置，可选的落地方式只有两种：

• 搭建服务端代理层：把目标外域页面的内容通过你自己的后端服务代理转发，和父页面部署在同域名下，再用场景1的逻辑实现检测，注意要同步替换页面内静态资源、跳转链接的路径，避免页面加载异常
• 放弃直接嵌入外域iframe：如果只需要展示目标页面内容+检测滚动触底，可以把目标内容合规抓取后存到自己站点同域下渲染，不要直接通过iframe嵌入外域地址

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