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外，其他跨域方法均不可靠或已被废弃：