跨域 iframe 无法用 queryselector 访问，因同源策略在 dom 层直接阻断；破局关键是以 postmessage 实现通信协同，由子页主动查询并返回序列化数据，确保安全可控。
直接用 querySelector 穿透跨域 iframe 是浏览器明确禁止的，这不是“读取失败”，而是根本没入口——同源策略在 DOM 层就切断了访问链。沙箱（sandbox）还会进一步封死脚本执行能力，让问题雪上加霜。破局关键不在“怎么穿透”，而在于“绕过 DOM 访问，改用通信协同”。
确认是否真跨域 + 沙箱是否锁死 JS
先排除误判：
- 检查 iframe 的
src是否确实与父页协议、域名、端口任一不同；同域下无需 postMessage，可直接操作 DOM - 查看 iframe 标签是否有
sandbox属性：
若为sandbox=""或sandbox（无值），JS 默认被禁用 →querySelector根本不会运行
必须显式加allow-scripts才能执行任何脚本 - 即使加了
allow-scripts，若没加allow-same-origin，子页面仍被视为跨域，无法访问自身 document（即子页面内部 JS 也拿不到自己的document.querySelector）
用 postMessage 驱动子页面主动返回目标元素信息
这是最通用、最安全的解法：不越权读，而是请对方“报数”。
- 父页发消息请求：“请查出 class=‘stats-card’ 的元素文本和 dataset.id”
- 子页收到后，在自己可控的上下文中执行
document.querySelector('.stats-card')，提取需要的数据（非 DOM 对象，只传字符串/数字/布尔等可序列化内容） - 子页用
event.source.postMessage()把结果回传，父页监听并处理 - 注意始终校验
event.origin，避免中间人伪造响应
若需频繁交互，封装成轻量通信桥
避免每次手动写 message 监听器，可抽象一层：
- 子页面注入一个微型通信模块，暴露类似
window.IframeBridge.query(selector, fields)的方法 - 该方法内部调用
querySelector并返回结构化数据，再通过postMessage发出 - 父页面封装
callIframeMethod('query', '.user-avatar', ['src', 'alt'])，内部自动处理 ID 匹配、超时、错误回调 - 这样业务代码就不再感知跨域细节，写法接近直连 DOM
极端情况：连子页面 JS 都无法控制？
比如嵌入的是纯静态第三方广告页，你不能改它的代码：
- 无法获取其 DOM 内容，这是设计使然，必须接受限制
- 唯一可做的，是通过
sandbox="allow-scripts allow-same-origin"（仅当同主域且对方配合）或服务端代理（如 Nginx 反向代理抹平跨域）绕开浏览器限制 - 但注意：
allow-same-origin在跨域 iframe 上使用有严格条件，且现代浏览器已限制其生效场景，不可强依赖
