react如何获取iframe

获取 iframe 的 DOM 元素

在 React 中，可以通过 useRef 钩子或 createRef 方法获取 iframe 的 DOM 元素。以下是一个使用 useRef 的示例：

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

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

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

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

访问 iframe 的内容窗口和文档

获取 iframe 的 DOM 元素后，可以进一步访问其 contentWindow 和 contentDocument 属性。需要注意的是，由于同源策略限制，只有当 iframe 的源与父页面同源时才能访问这些属性。

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

处理跨域 iframe

对于跨域 iframe，由于安全限制，无法直接访问其内部内容。可以通过 postMessage API 实现父子页面之间的通信。父页面发送消息：

useEffect(() => {
  if (iframeRef.current) {
    iframeRef.current.contentWindow.postMessage(
      { type: 'message', data: 'Hello from parent' },
      '*'
    );
  }
}, []);

iframe 内部页面监听消息：

window.addEventListener('message', (event) => {
  if (event.data.type === 'message') {
    console.log('Received message:', event.data.data);
  }
});

监听 iframe 加载事件

可以通过 onLoad 事件监听 iframe 加载完成的状态：

function handleIframeLoad() {
  console.log('iframe loaded');
}

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

动态修改 iframe 属性

通过 ref 可以动态修改 iframe 的属性，例如更改其 src：

function updateIframeSrc(newSrc) {
  if (iframeRef.current) {
    iframeRef.current.src = newSrc;
  }
}