React中如何监听iframe的src变化事件？

下面是几个经过验证的实用方案，覆盖不同场景，你可以根据需求选择：

方案1：直接监听src状态/属性变化（最推荐，适用于React控制src的场景） #

如果iframe的src由React的state或props驱动，直接用useEffect监听这个值的变化即可，核心是确保依赖数组正确包含src：

import { useEffect, useState } from 'react';

function IframeWithSrcListener({ src }) {
  useEffect(() => {
    if (src) {
      // 这里处理src变化后的逻辑，比如打印、统计上报等
      console.log('iframe src 已更新:', src);
    }
  }, [src]); // 关键：依赖数组必须包含src

  return <iframe src={src} />;
}

如果src是引用类型（比如对象），要确保引用更新时才能触发监听，避免浅比较导致的失效。

方案2：用MutationObserver监听DOM属性变化（适用于iframe自主修改src的场景） #

如果iframe的src不是React控制的（比如内部页面跳转导致src变化），可以用MutationObserver结合useRef监听iframe元素的src属性变更：

import { useEffect, useRef } from 'react';

function IframeWithDomListener({ initialSrc }) {
  const iframeRef = useRef(null);

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

    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.attributeName === 'src') {
          const newSrc = iframe.src;
          console.log('iframe src 已变更（DOM监听）:', newSrc);
          // 这里写你的处理逻辑
        }
      });
    });

    // 配置观察选项：监听属性变化
    observer.observe(iframe, { attributes: true });

    // 组件卸载时清理观察者
    return () => observer.disconnect();
  }, []); // 空依赖，只初始化一次

  return <iframe ref={iframeRef} src={initialSrc} />;
}

注意：即使iframe是跨域的，监听当前页面DOM元素的src属性变化不受影响，不需要担心跨域限制。

方案3：结合onLoad事件+缓存src（适用于需要在src加载完成后处理的场景） #

每次src变化且新旧src不同时，iframe会触发onLoad事件，用useRef缓存上一次的src可以避免重复触发：

import { useRef } from 'react';

function IframeWithOnLoadListener({ src }) {
  const prevSrcRef = useRef('');

  const handleLoad = () => {
    if (src !== prevSrcRef.current) {
      console.log('iframe src 已加载完成:', src);
      // 执行加载完成后的逻辑
      prevSrcRef.current = src;
    }
  };

  return <iframe src={src} onLoad={handleLoad} />;
}

这个方案的优势是能确保页面加载完成后再执行逻辑，但要注意：如果两次src完全相同，浏览器可能从缓存加载，不会触发onLoad，缓存对比可以避免无效执行。

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