有不少網頁的頁面,還在使用 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