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

问：

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

例如，我想控制台 .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>
  )
}

JavaScript ReactJS iframe 侦听器 onclicklistener

你不能，没有现代浏览器会让你监听 iframe 内的点击，因为存在非常明显的安全问题。如果我在iframe中加载PayPal或Facebook或任何内容，那么一百万年来我都不应该能够收听这些页面上的事件。您自己的内容不需要 iframe，并且您对外部内容没有权限。您的网页与该网页上的 iframe 之间的唯一通信方式是 postMessage 机制。

答：

0赞 Unmitigated 9/15/2023 #1

您可以在加载帧后访问帧。contentDocument

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

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

How to listen for click inside an iframe in React?

评论

评论