這篇文章主要介紹了JavaScript中計算網(wǎng)頁中某個元素的位置,本文先是講解了一些必要的知識和實現(xiàn)難點,然后給出實現(xiàn)代碼,需要的朋友可以參考下

由于項目的需要，測試中需要對網(wǎng)頁元素進(jìn)行截圖，以確保它看上去沒有問題。之前我寫過一篇文章介紹過一種方法，先使用 WebDriver 進(jìn)行全屏截圖，然后根據(jù)目標(biāo)元素(DOM Element)所在的位置，再對截下來的圖片進(jìn)行剪裁，保留我們需要的位置即可。

那段代碼一直都工作得很好，直到我知道了一個東西：iframe。iframe(普通的 frame 也是一樣的，不過 frame 現(xiàn)在不太常見，這里只用 iframe 舉例)中的內(nèi)容被視為一個獨立的網(wǎng)頁，連 Window 對象也是和它的父級網(wǎng)頁分開的。而 WebDriver 中的 WebElement.getLocation()方法只能返回這個 WebElement 和它所在的 Window 的位置關(guān)系，它的實現(xiàn)沒什么問題，但全屏截圖不僅包含了 iframe 的內(nèi)容，可能也包含了它的父級頁面的內(nèi)容，剪裁的時候需要知道目標(biāo)元素在截圖中的位置。那么問題來了，挖掘機技術(shù)哪家強?如何計算一個元素相對于截圖的位置?

這個問題還要分類討論，原因是：Chrome 和 Firefox 中截圖的行為是不一樣的。Chrome 的截圖是當(dāng)前可見(viewport)的網(wǎng)頁內(nèi)容，比方說，當(dāng)網(wǎng)頁的實際大小超過 Chrome 窗口大小時，根據(jù)滾動條的位置不同，窗口中顯示的內(nèi)容不同，Chrome 的截圖就是顯示出來的內(nèi)容。于是我們要計算目標(biāo)元素相對于當(dāng)前可見內(nèi)容的位置。而 Firefox 用了一個方法，可以截到整個網(wǎng)頁的內(nèi)容，無視當(dāng)前窗口大小。于是對于 Firefox 我們要計算元素的絕對位置(Absolute Position)。

獲得一個元素的位置，需要用到一個方法：Element.getBoundingClientRect()。這個方法返回這個元素相對于它所處的 Windows 在當(dāng)前可見內(nèi)容的位置，用 top、left、right、bottom 四個值來表示。我們只關(guān)心其中的 top 和 left，至于剪裁的尺寸，我們可以通過元素本身的長和寬來得到，不需要計算。要計算目標(biāo)元素對于頂級 Window的位置，我們只需要依次加上它的父級 Window的 top 和 left 即可。代碼如下：

1. function calcViewportLocation(element) { 
2. var currentWindow = window; 
3. var rect = element.getBoundingClientRect(); // 元素的位置 
4. var top = rect.top; 
5. var left = rect.left; 
6. while (currentWindow.frameElement != null) { // 處理父級 Window 
7. element = currentWindow.frameElement; 
8. currentWindow = currentWindow.parent; 
9. rect = element.getBoundingClientRect(); 
10. if (rect.top > 0) { top += rect.top; } 
11. if (rect.left > 0) { left += rect.left; } 
12. } 
13. return [Math.round(top), Math.round(left)]; 
14. } 

以上代碼適用于 Chrome ，而在 Firefox 中，我們還需要計算元素的絕對位置。這里需要用到 Window.pageXOffset。pageXOffset，或者 scrollX，表示當(dāng)前 Window 的橫向滾動條滾動的位置，把這個值和上述的 left 相加，即可得到目標(biāo)元素的橫向絕對位置。當(dāng)然，iframe 也可以特殊處理的：

1. function calcAbsolutLocation(element) { 
2. var top = 0; 
3. var left = 0; 
4. var currentWindow = window; 
5. while (element != null) { 
6. rect = element.getBoundingClientRect(); 
7. var pageYOffset = currentWindow.pageYOffset; 
8. var pageXOffset = currentWindow.pageXOffset; 
9. if (typeof pageYOffset === 'undefined') { // IE8 
10. currentDocument = currentWindow.document; 
11. var bodyElement = (currentDocument.documentElement 
12. || currentDocument.body.parentNode || currentDocument.body); 
13. pageYOffset = bodyElement.scrollTop; 
14. pageXOffset = bodyElement.scrollLeft; 
15. } 
16. top += rect.top + pageYOffset; 
17. left += rect.left + pageXOffset; 
18. element = currentWindow.frameElement; 
19. currentWindow = currentWindow.parent; 
20. if (element != null) { 
21. style = window.getComputedStyle(element); 
22. top += parseInt(style.borderTopWidth, 10); 
23. left += parseInt(style.borderLeftWidth, 10); 
24. } 
25. } 
26. return [Math.round(top), Math.round(left)]; 
27. } 

由于 IE8 不支持 pageXOffset 和 scrollX，于是在 IE8 中需要一些特殊處理，即代碼中標(biāo)注“IE8”的部分。把這兩段 Javascript 代碼，替換之前文中的 WebElement.getLocation()，即可實現(xiàn)在 iframe 中對特定元素截圖。