直接获取iframe内部dom元素的前提是同源；同域下可用contentdocument或contentwindow.document获取document对象再查询元素，须等iframe加载完成；跨域时只能通过postmessage双向通信间接获取。
直接获取 iframe 内部 DOM 元素的前提是：父页面与 iframe 页面同源（协议、域名、端口完全一致）。跨域时无法直接访问，必须走 postMessage 通信机制。
同域下获取 iframe 内部 DOM 的两种可靠写法
核心是先拿到 iframe 的 document 对象，再用常规 DOM 方法查找元素。注意必须等 iframe 加载完成后再操作，否则 contentDocument 可能为空或报错。
-
推荐写法：用
contentDocument（简洁安全）
它兼容性好，且在大多数现代浏览器中可直接使用：const iframe = document.getElementById('myFrame');const doc = iframe.contentDocument || iframe.contentWindow.document;const target = doc.getElementById('header'); -
备选写法：通过
contentWindow.document
本质相同，但多一层属性链，适合需要调用 iframe 内 JS 函数的场景：const win = iframe.contentWindow;const target = win.document.querySelector('.btn');
确保 iframe 已加载完成再操作
未加载完就访问 contentDocument，会返回 null 或空文档，导致 getElementById 等方法失效。正确时机是监听 load 事件或检查 readyState：
- 监听 load 事件（最常用）：
iframe.addEventListener('load', () => { /* 此处执行 DOM 获取 */ }); - 动态插入的 iframe，可用轮询判断：
const checkLoaded = () => { if (iframe.contentDocument?.readyState === 'complete') { /* 开始操作 */ } else { requestAnimationFrame(checkLoaded); } };
跨域 iframe 怎么“间接”获取内部元素
浏览器禁止直接读取跨域 iframe 的 DOM，但可通过双向 postMessage 协作实现目标：
- 父页发送请求消息：
iframe.contentWindow.postMessage({ type: 'GET_ELEMENT', selector: '#user-name' }, 'https://third-party.com'); - iframe 页面监听并响应：
window.addEventListener('message', e => { if (e.origin !== 'https://your-site.com') return; const el = document.querySelector(e.data.selector); e.source.postMessage({ type: 'ELEMENT_VALUE', value: el?.textContent }, e.origin); }); - 父页接收返回值：
window.addEventListener('message', e => { if (e.data.type === 'ELEMENT_VALUE') console.log(e.data.value); });
常见错误和避坑提示
实际开发中容易忽略的细节：
- 不要在 iframe src 为空或为 about:blank 时尝试访问 contentDocument——会触发 SecurityError；
- Vue/React 等框架中，若 iframe 是动态渲染的，需在
nextTick或useEffect中确认元素已挂载； - IE8–IE10 不支持
contentDocument，必须用contentWindow.document，且需确保 iframe 有 id 或 name 属性； - 修改 iframe 内样式或内容后，如需触发重绘，可对目标元素执行
offsetHeight强制刷新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
