Python的selenium實現(xiàn)切換框架frame

Python的selenium實現(xiàn)切換框架frame的方法

. 介紹

1.1 介紹

福哥在使用selenium實現(xiàn)頁面爬取的時候發(fā)現(xiàn)遇到包含框架（frame）的網(wǎng)頁時候就無法通過find_xxx方法得到頁面上的元素，這可真是麻煩了??！

福哥在使用F12調(diào)試前端的時候發(fā)現(xiàn)在調(diào)試面板的控制臺欄里就可以選擇頁面上面的任意一個框架（frame）作為當(dāng)前框架，如果selenium也可以選擇頁面上面的框架就好了！

經(jīng)過一番折騰，福哥找到了答案！

2. 框架頁面

這是一個包含多級框架的頁面，下面的代碼都是以抓取這個頁面作為示例的。

3. 通過id定位

如果頁面內(nèi)的frame有id的話，可以直接定位。

chrome.get("http://192.168.2.168/tfams/test.html")
chrome.switch_to_frame("top")
print(chrome.find_element_by_tag_name("h3").text)

4. 通過name定位

如果頁面內(nèi)的frame有name的話，可以直接定位。

chrome.get("http://192.168.2.168/tfams/test.html")
chrome.switch_to_frame("content")
print(chrome.find_element_by_tag_name("h3").text)

5. 通過元素定位

如果頁面的frame既沒有id也沒有name的話，只能通過標(biāo)簽選擇了。

chrome.get("http://192.168.2.168/tfams/test.html")
iframes = chrome.find_elements_by_tag_name("iframe")
chrome.switch_to_frame(iframes[0])
print(chrome.find_element_by_tag_name("h3").text)

6. 多級嵌套框架

selenium的尋找元素是在“當(dāng)前”框架內(nèi)進行的，如果我們要定位的框架在“當(dāng)前”框架的子級框架里面（也就是孫級框架），那么就需要一級一級地進行定位了。

chrome.get("http://192.168.2.168/tfams/test.html")
chrome.switch_to_frame("content")
chrome.switch_to_frame("sub1")
print(chrome.find_element_by_tag_name("h3").text)

7. 返回上級框架

上一例當(dāng)中我們將“當(dāng)前”框架移動到了最里面的sub1上，如果要定位sub2框架就需要先回到content框架，這個時候就需要使用返回上級框架的功能了。

返回上級框架功能通過switch_to.parent_frame方法實現(xiàn)。

chrome.get("http://192.168.2.168/tfams/test.html")
chrome.switch_to_frame("content")
chrome.switch_to_frame("sub1")
print(chrome.find_element_by_tag_name("h3").text)
chrome.switch_to.parent_frame()
chrome.switch_to_frame("sub2")
print(chrome.find_element_by_tag_name("h3").text)

8. 返回頂級框架

如果框架層級很多，我們希望一下回到最外層的框架，可以使用switch_to.default_content方法實現(xiàn)。

chrome.get("http://192.168.2.168/tfams/test.html")
chrome.switch_to_frame("content")
chrome.switch_to_frame("sub1")
print(chrome.find_element_by_tag_name("h3").text)
chrome.switch_to.default_content()
chrome.switch_to_frame("top")
print(chrome.find_element_by_tag_name("h3").text)

9. 切換框架的兩種方法

selenium切換框架提供了兩種方法，福哥分別介紹一下。

9.1 通過switch_to_frame方法

一個是通過Chrome實例的switch_to_frame方法實現(xiàn)。

chrome.get("http://192.168.2.168/tfams/test.html")
chrome.switch_to_frame("top")
print(chrome.find_element_by_tag_name("h3").text)

9.2 通過switch_to.frame方法

一個是通過Chrome實例的switch_to屬性對象的frame方法實現(xiàn)。

chrome.get("http://192.168.2.168/tfams/test.html")
chrome.switch_to.frame("top")
print(chrome.find_element_by_tag_name("h3").text)

10. 總結(jié)

今天福哥帶著大家學(xué)會了在selenium里面切換“當(dāng)前”框架的方法，無論是一級框架結(jié)構(gòu)，還是多級框架結(jié)構(gòu)，我們都可以游刃有余地定位它們了。

框架設(shè)計在管理系統(tǒng)里面出現(xiàn)的比率還是非常高的，越是功能強大的系統(tǒng)使用的框架結(jié)構(gòu)就會越復(fù)雜，要能夠模擬用戶操作這樣的系統(tǒng)需要靈活掌握切換框架的技巧才行。

https://m.tongfu.net/home/35/blog/513253.html

頁可見區(qū)域?qū)挘篸ocument.body.clientWidth

網(wǎng)頁可見區(qū)域高：document.body.clientHeight

網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.offsetWidth (包括邊線的寬)

網(wǎng)頁可見區(qū)域高：document.body.offsetHeight (包括邊線的寬)

網(wǎng)頁正文全文寬：document.body.scrollWidth

網(wǎng)頁正文全文高：document.body.scrollHeight

網(wǎng)頁被卷去的高：document.body.scrollTop

網(wǎng)頁被卷去的左：document.body.scrollLeft

網(wǎng)頁正文部分上：window.screenTop

網(wǎng)頁正文部分左：window.screenLeft

屏幕分辨率的高：window.screen.height

屏幕分辨率的寬：window.screen.width

屏幕可用工作區(qū)高度：window.screen.availHeight

屏幕可用工作區(qū)寬度：window.screen.availWidth

HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 獲取對象的滾動高度。

scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離

scrollTop:設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離

scrollWidth:獲取對象的滾動寬度

offsetHeight:獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度

offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計算左側(cè)位置

offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計算頂端位置

event.clientX 相對文檔的水平座標(biāo)

event.clientY 相對文檔的垂直座標(biāo)

event.offsetX 相對容器的水平坐標(biāo)

event.offsetY 相對容器的垂直坐標(biāo)

document.documentElement.scrollTop 垂直方向滾動的值

event.clientX+document.documentElement.scrollTop 相對文檔的水平座標(biāo)+垂直方向滾動的量

IE，F(xiàn)ireFox 差異如下：

IE6.0、FF1.06+：

clientWidth=width + padding

clientHeight=height + padding

offsetWidth=width + padding + border

offsetHeight=height + padding + border

IE5.0/5.5：

clientWidth=width - border

clientHeight=height - border

offsetWidth=width

offsetHeight=height

(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關(guān))

網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth

網(wǎng)頁可見區(qū)域高： document.body.clientHeight

網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)

網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的高)

網(wǎng)頁正文全文寬： document.body.scrollWidth

網(wǎng)頁正文全文高： document.body.scrollHeight

網(wǎng)頁被卷去的高： document.body.scrollTop

網(wǎng)頁被卷去的左： document.body.scrollLeft

網(wǎng)頁正文部分上： window.screenTop

網(wǎng)頁正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的寬： window.screen.width

屏幕可用工作區(qū)高度： window.screen.availHeight

屏幕可用工作區(qū)寬度： window.screen.availWidth

－－－－－－－－－－－－－－－－－－－

技術(shù)要點

本節(jié)代碼主要使用了Document對象關(guān)于窗口的一些屬性，這些屬性的主要功能和用法如下。

要得到窗口的尺寸，對于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在IE下需要深入Document內(nèi)部對body進行檢測；在DOM環(huán)境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window對象的innerWidth屬性包含當(dāng)前窗口的內(nèi)部寬度。Window對象的innerHeight屬性包含當(dāng)前窗口的內(nèi)部高度。

Document對象的body屬性對應(yīng)HTML文檔的標(biāo)簽。Document對象的documentElement屬性則表示HTML文檔的根節(jié)點。

document.body.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。document.body. clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。

實現(xiàn)代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>請調(diào)整瀏覽器窗口</title>

</head>

<body>

<h2 align="center">請調(diào)整瀏覽器窗口大小</h2><hr>

瀏覽器窗口的實際高度: <input type="text" name="availHeight" size="4"><br>

瀏覽器窗口的實際寬度: <input type="text" name="availWidth" size="4"><br>

</form>

<!--

var winWidth=0;

var winHeight=0;

function findDimensions() //函數(shù)：獲取尺寸

{

//獲取窗口寬度

if (window.innerWidth)

winWidth=window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth=document.body.clientWidth;

//獲取窗口高度

if (window.innerHeight)

winHeight=window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight=document.body.clientHeight;

//通過深入Document內(nèi)部對body進行檢測，獲取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

{

winHeight=document.documentElement.clientHeight;

winWidth=document.documentElement.clientWidth;

}

//結(jié)果輸出至兩個文本框

document.form1.availHeight.value=winHeight;

document.form1.availWidth.value=winWidth;

}

findDimensions();

//調(diào)用函數(shù)，獲取數(shù)值

window.onresize=findDimensions;

//-->

</script>

</body>

</html>

源程序解讀

（1）程序首先建立一個表單，包含兩個文本框，用于顯示窗口當(dāng)前的寬度和高度，并且，其數(shù)值會隨窗口大小的改變而變化。

（2）在隨后的JavaScript代碼中，首先定義了兩個變量winWidth和winHeight，用于保存窗口的高度值和寬度值。

（3）然后，在函數(shù)findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和寬度，并將二者保存在前述兩個變量中。

（4）再通過深入Document內(nèi)部對body進行檢測，獲取窗口大小，并存儲在前述兩個變量中。

（5）在函數(shù)的最后，通過按名稱訪問表單元素，結(jié)果輸出至兩個文本框。

（6）在JavaScript代碼的最后，通過調(diào)用findDimensions ( )函數(shù)，完成整個操作。

CSS3炫酷的下拉框的原理：

1.首先就是一個導(dǎo)航下拉，就是鼠標(biāo)放上去出現(xiàn)一個下拉列表

2.然后發(fā)現(xiàn)，下拉里面，每一個選項是從不同的兩個方向出現(xiàn)的

3.出現(xiàn)的方式是奇數(shù)項從左邊進，偶數(shù)項從右邊進，進入方式是滑動淡入。

效果圖

其實這個是用CSS3過渡和動畫制作的，沒有用到JS也是可以做出這樣的效果，那么他的代碼是怎樣的呢？我給大家羅列出來：

HTML代碼

CSS

完整的代碼

代碼有點多已經(jīng)上傳到群文件里了，最后也說下小編的群，可以分享交流，小編也會經(jīng)常分享一些資料干貨供大家學(xué)習(xí)：661473108，歡迎初學(xué)和進階中的小伙伴。

這個動畫，我感覺雖然性能上css3是比js要好一些。畢竟js也是控制css或者class來實現(xiàn)！

靈活性的話，這個就要比js差了，比如div的顯示與隱藏，我不想通過鼠標(biāo)移入移出的方式控制，如果我想通過點擊的方式控制div的顯示與隱藏呢。對于js的方式來說，這個就是觸發(fā)的事件就可以了，對于插件來說，可能就改一個插件就行了！對于css3實現(xiàn)的話，這個就不但要改css樣式了，也要改html結(jié)構(gòu)了！

這里，我的建議就是，這個動畫最理想的還是用js和css3結(jié)果，結(jié)果是最好的。如果針對靈活性不高的需求，可以只用css3。

在線咨詢

上一篇：世界靈巧ERP平臺都有哪些
下一篇：CSS新特性@layer(層疊樣式表)