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

  

          

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM