通过 window.frames 或 htmliframeelement.contentwindow 获取 iframe 的窗口对象，再使用 .document 访问其内部 dom 进行查询。前提是 iframe 必须与主页面同源，否则浏览器会因跨域安全策略阻止访问。

如何获取 iframe 的 window 对象

可以使用 contentWindow 属性直接获取 iframe 对应的窗口实例，这是最直观且推荐的方式。获取到窗口后，即可通过 contentWindow.document 拿到文档对象，进而执行常规的 DOM 查询操作。

const iframe = document.getElementById('myFrame');
const win = iframe.contentWindow;
const doc = win.document;
console.log(doc.body); // 输出 iframe 内部的 body 元素

iframe 内容加载完成前能查到元素吗

在 iframe 内容尚未完全加载时，其内部的 DOM 树是空的，此时查询会返回空结果或报错。必须等待 load 事件触发后，才能确保 iframe 内部的 HTML 已经解析完毕并可供查询。

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

const iframe = document.getElementById('myFrame');
iframe.addEventListener('load', () => {
  const btn = iframe.contentWindow.document.querySelector('.btn');
  console.log(btn); // 此时能正确找到按钮
});

跨域 iframe 还能查内部 DOM 吗

如果 iframe 指向的是不同源（协议、域名或端口任一不同）的地址，JavaScript 将无法访问其 contentWindow.document，直接抛出安全异常。这种情况下，只能通过 postMessage 通信让 iframe 自身去操作 DOM，或者依赖后端代理解决跨域问题。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南