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可见或由用户手势驱动
