如何在React中监听iframe内的点击？

Question

我正在使用 iframe 在 React 中显示获取的 HTML 文档，并希望监听 iframe 内 DOM 元素的点击。

例如，我想 console.log 我在 iframe 中单击的 DOM 元素

我尝试过使用 useRef 和 onClick 但它似乎不适用于 iFrame

我使用 Next.js 在添加到 iframe 之前获取网站 HTML

export default function Home() {
  const [html, setHtml] = useState()
  const ref = useRef(null);

  const getDownload = async () => {
    const response = await fetch('http://localhost:3000/api/getWebsite')
    const data = await response.json()
    setHtml(data)
  }


  return (
    <main>
    <iframe srcDoc={html} ref={ref} ></iframe>
    </main>
  )
}

Answer 1

加载后您可以访问框架的

contentDocument

。

useEffect(() => {
    const frame = ref.current;
    function loadHandler() {
      frame.contentDocument.addEventListener('click', e => {
        console.log('clicked');
      });
    }
    frame.addEventListener('load', loadHandler);
    return () => frame.removeEventListener('load', loadHandler);
}, []);