用Javaｓｃｒｉｐｔ计算网页中某个元素的位置

由于项目的需要，需要在测试中捕获Web页面元素，以确保它不会出现问题。我第一次用WebDriver做全屏幕截图，然后我会裁缝剪图片根据DOM元素的位置和保持位置，我们需要。

该代码具有很好直到我知道的东西：iframe。Iframe也是常见的框架相同，但架不很常见的现在。在iframe内容仅仅是作为一个独立的网页，甚至是从它的父窗口对象页面分离。在WebDriver（webelement。getLocation）方法只能回到webelement和窗户之间的位置，它没有意识到什么问题，但镜头画面不仅包含内容iframe，也可能有其母的网页内容，剪的时候需要知道目标元素在屏幕的位置。所以，问题是，这是挖掘机技术的力量如何计算一个元素相对于屏幕截图的位置

原因是Chrome和Firefox屏幕截图的行为不同。Chrome的截图是当前可见（视口）页面内容。例如，当Web的实际大小大于Chrome窗口的大小时，根据滚动条的位置，窗口中显示的内容是不同的。Chrome的截图内容显示。所以我们要计算目标元素的位置相对于当前的内容。和Firefox的使用，可以减少对整个网页内容的方法，忽视了当前窗口的大小。所以我们要计算Firefox的元素的绝对位置（绝对位置）。

获得一个元素的位置，你需要使用一个方法：Element.getBoundingClientRect（），这个方法返回在当前可见的内容其Windows相关元素的位置，这是由四个值上，左，右，和底部的代表。我们只关心顶部和左侧，和作为切割的大小，我们可以把它通过元素本身的长度和宽度，不需要计算，计算出目标元素的位置到顶部的窗口，我们只需要将顶部和左边反过来它的父窗口，代码如下：
功能calcviewportlocation（元）{
无功currentwindow =窗口；
var = element.getboundingclientrect（矩形）； / /元素位置
var = rect.top；
左= rect.left VaR；
而（currentwindow.frameelement！= NULL）父窗口处理
元= currentwindow.frameelement；
currentwindow = currentwindow.parent；
矩形= element.getboundingclientrect（）；
如果（rect.top > 0）{ =直接顶；}。
如果（rect.left > 0）{左=矩形左；}。
}
返回{ math.round（顶部），math.round（左）}；
}

以上代码适用于Chrome和Firefox，我们还需要计算元素的绝对位置。你需要使用window.pagexoffset here.pagexoffset，或scrollx，代表了水平滚动条的滚动当前窗口的位置。增加价值的左上方，我们可以得到目标元素的水平绝对位置。当然，iframe也可以处理具体的：
功能calcabsolutlocation（元）{
var = 0；
var = 0；
无功currentwindow =窗口；
而（元素）！= NULL）{
矩形= element.getboundingclientrect（）；
无功pageyoffset = currentwindow.pageyoffset；
无功pagexoffset = currentwindow.pagexoffset；
如果（typeof pageyoffset = 'undefined）{ / / IE8
currentdocument = currentwindow.document；
var =（currentdocument.documentelement部体元素
| | currentdocument.body.parentnode | | currentdocument身体）；
pageyoffset = bodyelement.scrolltop；
pagexoffset = bodyelement.scrollleft；
}
最高rect.top + pageyoffset；
左= rect.left + pagexoffset；
元= currentwindow.frameelement；
currentwindow = currentwindow.parent；
如果（元素）！= NULL）{
style= window.getcomputedstyle（元）；
顶= parseInt（style.bordertopwidth，10）；
左= parseInt（style.borderleftwidth，10）；
}
}
返回{ math.round（顶部），math.round（左）}；
}

由于IE8不支持pagexoffset和scrollx，一些特殊的处理需要在IE8，即部分的代码标记为IE8。用WebElement.getLocation取代这两段Javaｓｃｒｉｐｔ代码（）在以前的文本，你可以实现一个特定的元素在iframe的截图。