document.getElementById为一个已知元素返回null - 为什么？

Question

我正在使用Google Chrome浏览器JavaScript控制台，我只是在查看Gmail页面，只是练习操纵DOM。然而，当我这样做只是回来为空：

document.getElementById('gbx3'); 

有在具有“gbx3”的ID在页面div元素 - 那么，为什么返回null？什么会/可能造成这种情况？使用Firefox Web控制台也会出现同样的情况。

如果您尝试访问同一个Gmail页面中的'gb' id（这是主要的顶部工具栏），它将返回null，但如果您在google.com上访问此元素，它将返回元素。

Answer 1

GMail由框架组成。这其中的工作原理：

frames[3].document.getElementById('gbx3'); 

在一般情况下，如果你知道了iframe元素的ID，该contentDocument属性可以使用（前提是你没有同源问题，该文件被加载）：

document.getElementById('hist_frame').contentDocument.getElementById('gbx3'); 

Answer 2

按我的评论：

我最好的选择是，GBX的是，包含在搜索结果 的iframe里面，作品的document.getElementById在相同的范围内，你[R 控制台

您可以搜索所有的帧找到你需要的东西：

for(var i = 0; i < frames.length; i++) { 
    var curDoc = frames[i].document; 
    if(curDoc.getElementById('gbx')) console.log(curDoc.getElementById('gbx')); 
}