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;
}
}
