如何在JavaScript(ReactJS)中处理iframe父元素的点击事件

问题原因 #

iframe 属于浏览器独立的浏览上下文，父级 DOM 绑定的点击事件默认无法穿透到 iframe 内部触发，尤其是你这里加载的是跨域站点，出于浏览器同源策略限制，父页面无权直接操作 iframe 内部的 DOM 绑定事件。

可用解决方案 #

方案1：添加透明遮罩层（最通用，跨域场景也适用） #

在 iframe 上方叠加一个透明的 div 层，所有点击事件会先触发在遮罩层上，就能被父容器捕获。这是不需要控制 iframe 内容的最优解法。
代码示例：

export default function App() {
  return (
    <div className="App">
      <div 
        onClick={() => alert("Testing")}
        style={{ position: "relative", width: "100%", height: "500px" }}
      >
        <iframe
          src="https://google.com.vn"
          title="stackoverflow"
          style={{ width: "100%", height: "100%", border: "none" }}
        />
        {/* 透明遮罩层 */}
        <div 
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            background: "transparent"
          }}
        />
      </div>
   </div>
 );
}

注意：如果需要 iframe 内部的交互可正常触发，这个方案不适用，因为遮罩层会拦截所有交互操作。

方案2：同域 iframe 直接绑定内部事件 #

如果 iframe 加载的是和你站点同域的内容，可以直接获取 iframe 的 contentDocument 绑定点击事件：

import { useEffect, useRef } from 'react';

export default function App() {
  const iframeRef = useRef(null);

  useEffect(() => {
    const iframe = iframeRef.current;
    const handleIframeClick = () => alert("Testing");
    const bindEvent = () => {
      iframe.contentDocument?.addEventListener('click', handleIframeClick);
    };
    iframe?.addEventListener('load', bindEvent);
    return () => {
      iframe?.removeEventListener('load', bindEvent);
      iframe?.contentDocument?.removeEventListener('click', handleIframeClick);
    }
  }, []);

  return (
    <div className="App">
      <iframe
        ref={iframeRef}
        src="/你的同域页面地址"
        title="同域示例"
        style={{ width: "100%", height: "500px" }}
      />
   </div>
 );
}

方案3：跨域但可控制 iframe 内容时用 postMessage 通信 #

如果 iframe 的站点你可以控制开发，就在 iframe 内部绑定点击事件，通过 postMessage 把点击事件通知给父页面，父页面监听 message 事件做对应处理即可。

内容的提问来源于stack exchange，提问作者Pham Minh Tan