由于浏览器同源策略限制，父页面无法直接读取跨域 iframe 的 baseuri；必须通过 postmessage 机制由 iframe 主动向父页面发送 uri 信息。
由于浏览器同源策略限制，父页面无法直接读取跨域 iframe 的 baseuri；必须通过 postmessage 机制由 iframe 主动向父页面发送 uri 信息。
在 React（或其他前端框架）中，你可能会遇到这样的问题：尽管 iFrameRef.current 在 load 事件中已指向当前 iframe 元素，但 iFrameRef.current!.baseURI 返回的仍是旧值（如初始空白页 about:blank 或上一次加载的 URL），而非 iframe 实际加载完成后的最新 URL。这并非 React 的引用更新问题，而是浏览器强制实施的安全限制——当 iframe 加载的是跨域资源时，父页面对 iframe.contentDocument、iframe.contentWindow.location 及 baseURI 等属性的访问会被拒绝或返回空/过期值。
✅ 正确解决方案：采用 postMessage 跨域通信
需在 iframe 内部页面（即被嵌入的目标页面）中主动向父窗口发送当前 URL：
// iframe 内部页面（需你可控）的 JS
if (window.parent !== window) {
window.addEventListener('load', () => {
window.parent.postMessage(
{ type: 'IFRAME_URI_UPDATE', url: window.location.href },
'*' // 生产环境请替换为具体父域，如 'https://your-app.com'
);
});
}
父页面监听并更新状态：
useEffect(() => {
const handleMessage = (event: MessageEvent) => {
if (event.data?.type === 'IFRAME_URI_UPDATE' && typeof event.data.url === 'string') {
// ✅ 安全验证（推荐）：
// if (event.origin !== 'https://trusted-iframe-domain.com') return;
console.log('最新 iframe URL:', event.data.url);
// 更新 state 或执行后续逻辑
setIframeUrl(event.data.url);
}
};
window.addEventListener('message', handleMessage);
return () => window.removeEventListener('message', handleMessage);
}, []);
⚠️ 注意事项：
- postMessage 是唯一标准、安全且兼容性良好的跨域 iframe 通信方式；
- 切勿使用 * 作为 targetOrigin（尤其在生产环境），应明确指定可信源以防范 XSS 风险；
- 若 iframe 页面不可控（如第三方嵌入页），则无法获取其真实 URL —— 这是浏览器有意为之的安全保护，无绕过方案；
- baseURI 属性仅在同源 iframe 中可靠，跨域时始终不可信，不应依赖。
总结：不要尝试“读取”跨域 iframe 的 baseURI，而应推动 iframe 内容方主动“上报”。这是现代 Web 安全模型下的最佳实践，也是所有主流框架（React/Vue/Svelte）中处理该场景的统一范式。
