如何判断基于iframe-resizer的React组件中iframe内容已加载完成？

嘿，这个场景我太熟了！既然你在用iframe-resizer做React组件，想要判断iframe内容加载完成来隐藏环形进度条，给你几个实用的方案，适配不同的需求：

这个库本身就提供了专门的回调来通知iframe准备就绪——不仅内容加载完成，连它的尺寸调整逻辑也执行完毕了，特别适合你用这个库的场景。

你可以在初始化iframe-resizer的时候传入onReady参数，在回调里把加载状态设为false，就能隐藏进度条了。给你写个React组件的示例：

import { useEffect, useState } from 'react';
import iframeResizer from 'iframe-resizer';

const IframeWithLoader = ({ src }) => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 获取iframe元素
    const iframe = document.getElementById('target-iframe');
    // 初始化iframe-resizer并传入onReady回调
    const resizerInstance = iframeResizer({
      onReady: () => {
        // 内容加载+尺寸调整完成，隐藏进度条
        setIsLoading(false);
      },
      // 你的其他配置项，比如log、checkOrigin等
    }, iframe);

    // 组件卸载时清理实例，避免内存泄漏
    return () => resizerInstance.close();
  }, [src]);

  return (
    <div className="iframe-wrapper">
      {/* 环形进度条只在加载中显示 */}
      {isLoading && <div className="circular-progress">加载中...</div>}
      <iframe
        id="target-iframe"
        src={src}
        frameBorder="0"
        style={{ display: isLoading ? 'none' : 'block' }}
      ></iframe>
    </div>
  );
};

export default IframeWithLoader;

如果你需要更早感知“内容加载完成”的信号（比如不需要等尺寸调整完成就隐藏进度条），可以搭配原生iframe的onLoad事件。不过要注意：如果iframe内部有页面跳转，onLoad会多次触发，所以最好结合状态做判断，避免重复切换。

示例代码：

import { useEffect, useState } from 'react';
import iframeResizer from 'iframe-resizer';

const IframeWithLoader = ({ src }) => {
  const [isLoading, setIsLoading] = useState(true);

  const handleLoad = () => {
    // 内容加载完成，隐藏进度条
    setIsLoading(false);
  };

  useEffect(() => {
    const iframe = document.getElementById('target-iframe');
    const resizerInstance = iframeResizer({
      // 你的配置项
    }, iframe);

    return () => resizerInstance.close();
  }, [src]);

  return (
    <div className="iframe-wrapper">
      {isLoading && <div className="circular-progress">加载中...</div>}
      <iframe
        id="target-iframe"
        src={src}
        frameBorder="0"
        onLoad={handleLoad}
        style={{ display: isLoading ? 'none' : 'block' }}
      ></iframe>
    </div>
  );
};

万一iframe加载失败（比如资源不存在、跨域限制），总不能让进度条一直转着吧？可以加上onError事件，及时切换状态并提示用户：

// 在组件里新增状态
const [hasError, setHasError] = useState(false);

// 处理错误的函数
const handleError = () => {
  setIsLoading(false);
  setHasError(true);
};

// 在iframe上绑定事件
<iframe
  // ...其他属性
  onError={handleError}
/>

// 渲染错误提示
{hasError && <div className="error-message">加载失败，请稍后重试</div>}

总结一下，优先用iframe-resizer的onReady，因为它和库的核心功能（自动调整尺寸）完全同步，能确保用户看到的是已经调整好的iframe内容；如果需要更早的加载完成信号，再搭配原生onLoad。别忘了处理异常情况，提升用户体验～

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