React中如何获取iframe滚动位置？useRef无响应求助

首先明确：可以获取iframe的滚动位置，你的代码问题在于监听对象不对，另外还要考虑跨域限制。

核心问题原因 #

1. 直接给<iframe>元素绑定onScroll事件通常不生效，因为滚动行为发生在iframe内部的文档（contentDocument）中，而非iframe元素本身。
2. 如果iframe的src与当前页面不同域，浏览器的同源策略会阻止你直接访问iframe内部的文档对象，自然拿不到滚动数据。

同域场景解决方案 #

修改代码，监听iframe内部文档的滚动事件，而非iframe元素：

import { useRef, useEffect } from 'react';

const YourComponent = () => {
  const iframeRef = useRef(null);

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;

    // 监听iframe内部窗口的滚动事件
    const handleScroll = () => {
      const innerDoc = iframe.contentDocument || iframe.contentWindow.document;
      const { scrollTop, scrollHeight, clientHeight } = innerDoc.documentElement;
      
      // 用>=0.99避免精度问题，确保确实滚动到底部
      if ((scrollTop + clientHeight) / scrollHeight >= 0.99) {
        console.log('Reached bottom');
      }
    };

    const innerWindow = iframe.contentWindow;
    innerWindow.addEventListener('scroll', handleScroll);

    // 组件卸载时清理监听
    return () => {
      innerWindow.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <iframe
      ref={iframeRef}
      src={document.path}
    />
  );
};

跨域场景解决方案 #

如果iframe和当前页面不同域，只能通过postMessage跨域通信来传递滚动数据，前提是你能控制iframe内部的页面代码：

1. iframe内部页面代码 #

在iframe的页面中添加滚动监听，发送消息给父页面：

window.addEventListener('scroll', () => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  // 建议替换*为父页面的具体域名，提升安全性
  window.parent.postMessage({
    type: 'IFRAME_SCROLL',
    scrollTop,
    scrollHeight,
    clientHeight
  }, '*');
});

2. 父页面React组件代码 #

在父组件中监听message事件接收数据：

import { useEffect } from 'react';

const YourComponent = () => {
  useEffect(() => {
    const handleMessage = (e) => {
      // 验证消息来源，防止恶意数据
      if (e.origin !== 'https://你的iframe域名.com') return;
      
      if (e.data.type === 'IFRAME_SCROLL') {
        const { scrollTop, scrollHeight, clientHeight } = e.data;
        if ((scrollTop + clientHeight) / scrollHeight >= 0.99) {
          console.log('Reached bottom');
        }
      }
    };

    window.addEventListener('message', handleMessage);
    return () => {
      window.removeEventListener('message', handleMessage);
    };
  }, []);

  return <iframe src="https://你的iframe域名.com" />;
};

额外注意点 #

• 确保iframe加载完成后再访问contentWindow，上面的代码用useEffect在组件挂载后添加监听，若iframe加载较慢，可额外绑定onLoad事件再初始化监听。
• 判断滚动到底部时用>=0.99而非>1，因为浏览器计算滚动高度可能存在微小精度误差，导致scrollTop + clientHeight永远不会严格大于scrollHeight。

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