IE 、Firefox、Chrome 浏览器在 F12 控制台下切换至不同框架介绍

有不少网页的页面，还在使用 iframe 标签，而此时，相当于页面有两个 window 对象，一个为当前页面 window ，另一个则为 iframe 页面下的 window 。因为，有时候需要在 console 控制台下获取 iframe 下元素，此时，如果不切换框架，将会写一堆 JS 代码。

如下图示，获取页面下 iframe 中 id 为 '1498_1' dom 元素结点，如果处于顶级页面框架集下，需要先获取 iframe 的 document 对象，再调用 getElementById 方法，方可获取该对象。

document.getElementById('tabs_iframe_66264360-2164-4872-9bac-c4f96ec2ef21').contentDocument.getElementById('1498_1')

window.frames['tabs_iframe_66264360-2164-4872-9bac-c4f96ec2ef21'].document.getElementById('1498_1')

而如果在调试过程中，相当麻烦。不过，各大浏览器的 f12 调试工具都具备该功能，可切换页面下不同的框架集。

chrome ： f12 打开调试界面，选择 console ，如图所示，可手动选择不同的框架集。

IE ：f12 ---- 控制台---- 右上角目标选项，同 f12 一样。（IE 不同版本中，可能会有不同，如果没有目标选项，可采用如下方法）

cd 命令： 可以将命令行表达式计算 从网页的默认顶级窗口更改为帧的窗口。调用不带参数的 cd() 会返回顶级窗口。

cd() ---- 回到顶级框架

cd(window.frames[下标]）---- 切换至不同 iframe 下框架

Firefox：选用 firebug 插件，操作类似 IE 浏览器，同样，在控制台下，采用 cd 命令，不过，其 cd 命令一定需要一个参数（ Window 类型），不然，将会报错，通过 cd(window.top) 回到顶级框架 window。

参考资料：

https://msdn.microsoft.com/library/gg589530(v=vs.85).aspx#UsingCDacrossFrames

https://getfirebug.com/wiki/index.php/Cd

http://www.cnblogs.com/ziyunfei/archive/2012/12/13/2815543.html#3384563

巴特西

IE 、Firefox、Chrome 浏览器在 F12 控制台下切换至不同框架介绍

最新文章

热门文章