JavaScript操作iframe分同域和跨域：同域可直接访问DOM和JS上下文；跨域须用postMessage通信，并校验origin，注意加载时机、错误处理及浏览器限制。

JavaScript操作iframe主要分两种场景：同域和跨域。同域下可以直接访问iframe的DOM和JS上下文；跨域则受同源策略限制，必须通过postMessage机制安全通信。

同域iframe的直接操作

当iframe与父页面同源（协议、域名、端口完全一致）时，可直接读写其内容：

• 获取iframe元素：const iframe = document.getElementById('myIframe');
• 访问内部window对象：const iframeWin = iframe.contentWindow;
• 操作内部DOM：iframe.contentDocument.body.innerHTML = 'Hello'; 或 iframeWin.document.querySelector('h1').textContent = 'Updated';
• 调用内部函数：iframeWin.sayHello();（前提是该函数已挂载在iframe的全局作用域）

跨域iframe的通信：postMessage

跨域时唯一标准、安全的通信方式是window.postMessage()。它允许两个不同源的窗口（包括iframe）交换字符串消息。

• 父页向iframe发消息：iframe.contentWindow.postMessage('data', 'https://example.com'); 第二个参数必须是目标源（可写'*'但不推荐）
• iframe内监听消息：window.addEventListener('message', e => { if (e.origin === 'https://parent.com') console.log(e.data); });
• iframe向父页回传：window.parent.postMessage('response', 'https://parent.com');
• 务必校验e.origin，防止恶意站点伪造消息；敏感操作还需验证e.source或加签名

注意iframe加载时机与错误处理

iframe内容未加载完成前，contentDocument可能为null，需监听load事件：

立即学习“Java免费学习笔记（深入）”；

• iframe.addEventListener('load', () => { /* 此时可安全访问 contentDocument */ });
• 跨域iframe无法通过onerror捕获资源加载失败，但可通过load后尝试postMessage并监听响应超时来间接判断是否可用
• 若iframe被浏览器拦截（如禁用第三方cookie或启用了Strict-Origin-When-Cross-Origin），contentWindow可能为null，需做好降级处理

替代方案与限制说明

除postMessage外，其他跨域方法均不可靠或已被废弃：

• document.domain仅适用于子域通信（如a.example.com ↔ b.example.com），且要求两端显式设置相同domain，现代浏览器中限制更严，不推荐新项目使用
• 服务器代理、JSONP、CORS等不适用于iframe通信场景，它们解决的是HTTP请求跨域问题，而非DOM/JS上下文互通
• Safari和部分iOS版本对postMessage有额外限制（如iframe未用户交互激活时可能被静默丢弃），建议触发前确保iframe可见或由用户手势驱动