react如何获取iframe

获取 iframe 的 DOM 元素

在 React 中获取 iframe 的 DOM 元素可以通过 ref 实现。使用 useRef 钩子创建一个 ref，并将其附加到 iframe 元素上。

import React, { useRef, useEffect } from 'react';

function IframeComponent() {
  const iframeRef = useRef(null);

  useEffect(() => {
    if (iframeRef.current) {
      const iframe = iframeRef.current;
      console.log('iframe contentWindow:', iframe.contentWindow);
    }
  }, []);

  return <iframe ref={iframeRef} src="https://example.com" />;
}

访问 iframe 的内容

通过 contentWindow 或 contentDocument 属性可以访问 iframe 的内部文档和窗口对象。需要注意跨域限制，如果 iframe 的源与父页面不同源，浏览器会阻止访问。

useEffect(() => {
  if (iframeRef.current) {
    const iframe = iframeRef.current;
    const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
    console.log('iframe document:', iframeDoc);
  }
}, []);

与 iframe 通信

使用 postMessage 可以实现跨域 iframe 通信。父页面和 iframe 页面都需要监听 message 事件并发送消息。

// 父页面发送消息
useEffect(() => {
  if (iframeRef.current) {
    const iframe = iframeRef.current;
    iframe.contentWindow.postMessage('Hello from parent', '*');
  }
}, []);

// 父页面接收消息
useEffect(() => {
  const handleMessage = (event) => {
    console.log('Message from iframe:', event.data);
  };
  window.addEventListener('message', handleMessage);
  return () => window.removeEventListener('message', handleMessage);
}, []);

动态加载 iframe

动态修改 iframe 的 src 属性或重新渲染 iframe 组件可以实现内容更新。使用 key 属性强制重新加载 iframe。

function DynamicIframe({ src }) {
  return <iframe key={src} src={src} />;
}

处理 iframe 加载事件

监听 iframe 的 load 事件可以在内容加载完成后执行操作。确保 iframe 完全加载后再访问其内容。

<iframe
  ref={iframeRef}
  src="https://example.com"
  onLoad={() => console.log('iframe loaded')}
/>