iframe.contentWindow读取失败主因是跨域或DOM未就绪；同源下需等待onload事件，跨域则必须用postMessage并严格校验origin和data类型。
iframe.contentWindow 读取失败的常见原因
直接访问 iframe.contentWindow 报 TypeError: Cannot read property 'document' of null，大概率是跨域或 DOM 未就绪。同源 iframe 才能安全访问其 window 对象；跨域时该属性存在但内部所有属性（如 document、location）均被浏览器屏蔽，读取会抛出异常。
即使同源，也必须等 iframe 加载完成。不能在 DOMContentLoaded 触发时就操作——父页面 DOM 就绪 ≠ iframe 内容就绪。
- 用
iframe.onload事件监听加载完成（推荐），而非依赖父页面生命周期 - 避免在
iframe标签未插入 DOM 前就访问contentWindow - 动态创建的 iframe，需先
appendChild再设置src，否则部分浏览器不触发load
同源 iframe 内部 DOM 操作示例
确认同源且已加载后，可像操作普通 window 一样读写 iframe 内容：
const iframe = document.getElementById('myIframe');
iframe.onload = () => {
const win = iframe.contentWindow;
const doc = win.document;
// 修改 iframe 内标题
doc.title = 'New Title';
// 插入一个 div
const div = doc.createElement('div');
div.textContent = 'Injected from parent';
doc.body.appendChild(div);
// 绑定 iframe 内按钮点击事件
const btn = doc.querySelector('#submit-btn');
if (btn) {
btn.addEventListener('click', () => {
console.log('Clicked inside iframe');
});
}
};
跨域 iframe 通信必须用 postMessage
跨域场景下，contentWindow 不可读取内容，但允许调用 postMessage 发送消息；iframe 内页面也需监听 message 事件并校验 event.origin，否则存在 XSS 风险。
立即学习“Java免费学习笔记（深入）”；
动态切换AI模型以优化成本与性能。当用户发出“eco mode”、“balanced mode”、“smart mode”或“max mode”等模式指令，或使用“/modes status”查询状态及“/modes setup”配置模式时触发。
- 父页向 iframe 发送：
iframe.contentWindow.postMessage(data, targetOrigin) - iframe 向父页发送：
window.parent.postMessage(data, targetOrigin) -
targetOrigin必须写具体协议+域名（如'https://example.com'），不可用'*'（除非完全信任所有来源） - 接收方必须检查
event.origin是否匹配预期，再处理event.data
典型错误：只校验 event.source 而忽略 origin，导致恶意站点伪造消息。
iframe 中监听 message 的安全写法
iframe 内 JS 必须主动监听，并严格过滤来源：
window.addEventListener('message', (event) => {
// 只接受来自可信父域的消息
if (event.origin !== 'https://trusted-parent.com') return;
// 验证数据结构（防止意外类型）
if (typeof event.data !== 'object' || !event.data.type) return;
switch (event.data.type) {
case 'setTheme':
document.body.className = event.data.theme;
break;
case 'notifyReady':
// 向父页回传确认
window.parent.postMessage({ type: 'readyAck' }, event.origin);
break;
}
});
注意：event.source 是发送方 window 对象，可用于直接回复（event.source.postMessage(...)），但 origin 校验不能省略——因为任何脚本都能构造 source，唯独无法伪造真实 origin。
实际项目里最容易漏掉的是 origin 校验和 data 类型防护，这两项缺失会让 postMessage 形同裸奔。
