React中iframe点击事件监听在同窗口跳转后失效的解决问询

问题根源很明确：当iframe内的超链接进行同窗口跳转时，iframe的contentWindow会被替换成新的窗口实例，之前绑定在旧窗口上的click监听器自然就失效了。

解决思路是每次iframe加载完成后（包括初始加载和跳转后的重新加载），重新绑定click事件监听器，具体实现步骤如下：

• 抽离事件监听逻辑为独立函数，方便重复调用
• 监听iframe的load事件，每次加载完成后执行绑定逻辑
• 组件卸载时清理所有监听器，避免内存泄漏

修改后的代码示例：

import { useEffect, useRef } from 'react';

const IframeWithPersistentListener = () => {
  const ref = useRef<HTMLIFrameElement>(null);

  // 抽离绑定click监听器的逻辑
  const bindClickListener = () => {
    const iframeWin = ref.current?.contentWindow;
    if (!iframeWin) return;

    const handleClick = (event: Event) => {
      console.log("click!");
    };

    // 先移除可能存在的旧监听器，避免重复绑定
    iframeWin.removeEventListener('click', handleClick);
    iframeWin.addEventListener('click', handleClick);

    // 返回清理函数，方便后续卸载时使用
    return () => iframeWin.removeEventListener('click', handleClick);
  };

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

    // 初始加载时绑定一次
    const cleanupClick = bindClickListener();

    // 监听iframe的load事件，每次加载完成（包括跳转后）重新绑定
    const handleLoad = () => {
      cleanupClick(); // 清理旧的监听器
      bindClickListener();
    };
    iframe.addEventListener('load', handleLoad);

    // 组件卸载时清理所有监听器
    return () => {
      cleanupClick();
      iframe.removeEventListener('load', handleLoad);
    };
  }, []);

  return (
    <iframe 
      src="http://example.com"  
      loading='eager' 
      id="myiframe" 
      ref={ref} 
    ></iframe>
  );
};

export default IframeWithPersistentListener;

额外说明：

• 每次绑定监听器前先移除旧的，是为了避免重复绑定导致同一个click事件触发多次回调
• 必须监听iframe的load事件，因为跳转后的页面加载完成后才会生成新的contentWindow，此时绑定才有效

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