IE 、Firefox、Chrome 浏览器在 F12 控制台下切换至不同框架介绍
2016-03-19 21:57
232 查看
有不少网页的页面,还在使用 iframe 标签,而此时,相当于页面有两个 window 对象,一个为当前页面 window ,另一个则为 iframe 页面下的 window 。因为,有时候需要在 console 控制台下获取 iframe 下元素,此时,如果不切换框架,将会写一堆 JS 代码 。
如下图示,获取页面下 iframe 中 id 为 '1498_1' dom 元素结点,如果处于顶级页面框架集下,需要先获取 iframe 的 document 对象,再调用 getElementById 方法,方可获取该对象。
而如果在调试过程中,相当麻烦。不过,各大浏览器的 f12 调试工具都具备该功能,可切换页面下不同的框架集。
chrome : f12 打开调试界面,选择 console ,如图所示,可手动选择不同的框架集。
IE :f12 ---- 控制台---- 右上角目标选项,同 f12 一样。(IE 不同版本中,可能会有不同,如果没有目标选项,可采用如下方法)
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
如下图示,获取页面下 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
相关文章推荐
- 立方体环境贴图(Cube Mapping)之OpenGL原理
- 网页页面自动刷新的3中实现方式
- 猜数字
- hdu 4417(树状数组+离线算法)
- 多维数组
- 二维数组中的查找
- Could not reliably determine the server's fully qualified domain name
- Oracle ADF Development Essentials - Part 4
- 【WebService开发】其他调用webservice的方法
- Redis源码解析:11RDB持久化
- zjnu 1744 EKSPLOZIJA(模拟栈)
- mybatis主键返回
- Flexpaper播放swf的问题
- 并查集
- 机器学习:线性判别分析LDA
- IndentationError: unindent does not match any outer indentation level
- 你认为扁平化模式好还是树形结构好?
- 7-8-无向图的关节点-图-第7章-《数据结构》课本源码-严蔚敏吴伟民版
- hdu1231 最大连续子序列--DP
- Java单例你所不知道的事,与Volatile关键字有染