IFrame文档选择器在Chrome DevTools Console表现异常，命令执行结果矛盾

你碰到的这个情况其实挺常见的，大概率是Chrome DevTools的上下文切换机制导致的，既不是你不了解的JS预期行为，也不是什么bug，是DevTools的设计逻辑在起作用～

为什么前两次失败、第三次成功？ #

• 默认上下文是主页面：刚打开控制台时，它的默认执行环境是主页面（也就是top frame），这时候你执行document.querySelector，其实是在主页面的文档里找元素，自然找不到iframe内部的元素，返回null。
• 点击Elements标签触发了上下文切换：当你点击Elements标签并选中iframe里的元素时，DevTools会自动把控制台的执行上下文切换到这个iframe的环境中。这时候再执行相同的命令，就是在iframe自己的document里查找元素了，所以能成功返回结果。

验证和解决方法 #

你可以试试这两种方式，不用依赖点击Elements标签也能正常获取iframe元素：

1. 手动切换控制台上下文：
   看控制台左上角的下拉菜单（默认显示top），点击它选择目标iframe的域名或标识，切换后再执行document.querySelector命令，就能直接在iframe的环境里操作了。
2. 直接指定iframe的文档对象：
   如果不想切换上下文，可以用绝对路径访问iframe的contentDocument（注意必须是同源iframe，跨域的话浏览器会阻止访问）：

   // 先获取iframe元素，再访问它的文档
   const iframeDoc = document.querySelector('iframe').contentDocument;
   const targetElement = iframeDoc.querySelector('你的选择器');
   

排除其他可能性 #

• 不是JS预期行为：只要页面加载完成，iframe的DOM已经渲染完成，在正确的上下文里是可以正常获取元素的。
• 不是DevTools Bug：这是DevTools特意设计的多iframe上下文切换功能，方便开发者在不同的iframe环境中调试代码。

内容的提问来源于stack exchange，提问作者user4973992