由于同源策略和沙盒限制，无法直接访问跨域 iframe 的 contentdocument.title；但可通过 postmessage api 由子页面主动向父页面发送标题信息，实现安全、合规的跨域通信。
由于同源策略和沙盒限制，无法直接访问跨域 iframe 的 contentdocument.title；但可通过 postmessage api 由子页面主动向父页面发送标题信息，实现安全、合规的跨域通信。
在构建基于 HTML 的轻量级浏览器（如标签页式界面）时，常需动态显示 iframe 加载页面的 <title>。然而，当 iframe 同时满足 跨域（如 src="https://www.bing.com"）和 沙盒化（如 sandbox="allow-scripts"）两个条件时，iframe.contentDocument 将为 null，iframe.contentWindow.document.title 同样不可访问——这是浏览器强制实施的安全隔离机制，无法绕过，也不应尝试绕过。
可行且标准的解决方案是利用 跨域窗口通信机制 postMessage()，由子页面（iframe 内的文档）主动向父页面发送标题数据：
✅ 前提条件：
- 子页面可执行脚本（即 sandbox 属性中包含 allow-scripts）；
- 你有能力在目标子页面中注入或修改 JS（适用于可控站点）；
- 若目标页面不可控（如第三方公网页面），则此方案不适用——此时获取标题属于浏览器核心功能范畴，需依赖原生 WebView 或扩展权限（非纯前端可解）。
? 实现步骤：
-
在子页面中添加标题上报逻辑（需部署或注入到目标页面）：
// 仅在 iframe 环境中执行，避免影响独立访问 if (window !== window.parent) { // 页面加载完成后立即发送标题 document.addEventListener('DOMContentLoaded', () => { window.parent.postMessage({ type: 'iframe-title', title: document.title, url: location.href }, '*'); // 生产环境建议替换为具体 origin，如 'https://your-app.com' }); } -
在父页面监听并更新 UI：
window.addEventListener('message', (event) => { // 安全校验：建议验证 event.origin（尤其生产环境） if (event.source !== document.querySelector('iframe').contentWindow) return;
if (event.data?.type === 'iframe-title') { const titleSpan = document.getElementById('title'); if (titleSpan) { titleSpan.textContent = event.data.title || '(无标题)'; } } });
⚠️ 注意事项： - `postMessage` 的第二个参数 `' * '` 表示允许任意源接收消息，存在安全风险；**强烈建议指定可信源**（如 `https://example.com`）； - 沙盒 iframe 默认禁用 `document.domain` 修改与 `window.name` 等传统通信方式，`postMessage` 是唯一推荐方案； - 若子页面使用 `<base target="_blank">` 或弹窗打开新页，其 `window.parent` 可能指向非预期上下文，需额外判断； - 标题可能在后续 DOM 更新中变更（如 SPA 动态更新 `<title>`），可补充 `MutationObserver` 监听 `<title>` 元素变化并重新 post。 ? 总结： 跨域沙盒 iframe 的标题获取本质是**单向、受控的数据传递问题**，而非“突破安全限制”。正确做法是设计协同通信协议——由子页面负责采集并上报，父页面负责接收与渲染。这既符合浏览器安全模型，也具备良好的可维护性与扩展性（例如后续可扩展发送 favicon、状态码等元信息）。
