JavaScript中计算网页中某个元素的位置

由于项目的需要，测试中需要对网页元素进行截图，以确保它看上去没有问题。之前我写过一篇文章介绍过一种方法，先使用 WebDriver 进行全屏截图，然后根据目标元素（DOM Element）所在的位置，再对截下来的图片进行剪裁，保留我们需要的位置即可。

那段代码一直都工作得很好，直到我知道了一个东西：iframe。iframe（普通的 frame 也是一样的，不过 frame 现在不太常见，这里只用 iframe 举例）中的内容被视为一个独立的网页，连 Window 对象也是和它的父级网页分开的。而 WebDriver 中的 WebElement.getLocation()方法只能返回这个 WebElement 和它所在的 Window 的位置关系，它的实现没什么问题，但全屏截图不仅包含了 iframe 的内容，可能也包含了它的父级页面的内容，剪裁的时候需要知道目标元素在截图中的位置。那么问题来了，挖掘机技术哪家强？如何计算一个元素相对于截图的位置？

这个问题还要分类讨论，原因是：Chrome 和 Firefox 中截图的行为是不一样的。Chrome 的截图是当前可见（viewport）的网页内容，比方说，当网页的实际大小超过 Chrome 窗口大小时，根据滚动条的位置不同，窗口中显示的内容不同，Chrome 的截图就是显示出来的内容。于是我们要计算目标元素相对于当前可见内容的位置。而 Firefox 用了一个方法，可以截到整个网页的内容，无视当前窗口大小。于是对于 Firefox 我们要计算元素的绝对位置（Absolute Position）。

获得一个元素的位置，需要用到一个方法：Element.getBoundingClientRect()。这个方法返回这个元素相对于它所处的 Windows 在当前可见内容的位置，用 top、left、right、bottom 四个值来表示。我们只关心其中的 top 和 left，至于剪裁的尺寸，我们可以通过元素本身的长和宽来得到，不需要计算。要计算目标元素对于顶级 Window的位置，我们只需要依次加上它的父级 Window的 top 和 left 即可。代码如下：

function calcViewportLocation(element) {
 var currentWindow = window;
 var rect = element.getBoundingClientRect(); // 元素的位置
 var top = rect.top;
 var left = rect.left;
 while (currentWindow.frameElement != null) { // 处理父级 Window
  element = currentWindow.frameElement;
  currentWindow = currentWindow.parent;
  rect = element.getBoundingClientRect();
  if (rect.top > 0) { top += rect.top; }
  if (rect.left > 0) { left += rect.left; }
 }
 return [Math.round(top), Math.round(left)];
}

以上代码适用于 Chrome ，而在 Firefox 中，我们还需要计算元素的绝对位置。这里需要用到 Window.pageXOffset。pageXOffset，或者 scrollX，表示当前 Window 的横向滚动条滚动的位置，把这个值和上述的 left 相加，即可得到目标元素的横向绝对位置。当然，iframe 也可以特殊处理的：

function calcAbsolutLocation(element) {
 var top = 0;
 var left = 0;
 var currentWindow = window;
 while (element != null) {
  rect = element.getBoundingClientRect();
  var pageYOffset = currentWindow.pageYOffset;
  var pageXOffset = currentWindow.pageXOffset;
  if (typeof pageYOffset === 'undefined') { // IE8
   currentDocument = currentWindow.document;
   var bodyElement = (currentDocument.documentElement
     || currentDocument.body.parentNode || currentDocument.body);
   pageYOffset = bodyElement.scrollTop;
   pageXOffset = bodyElement.scrollLeft;
  }
  top += rect.top + pageYOffset;
  left += rect.left + pageXOffset;
  element = currentWindow.frameElement;
  currentWindow = currentWindow.parent;
  if (element != null) {
   style = window.getComputedStyle(element);
   top += parseInt(style.borderTopWidth, 10);
   left += parseInt(style.borderLeftWidth, 10);
  }
 }
 return [Math.round(top), Math.round(left)];
}

由于 IE8 不支持 pageXOffset 和 scrollX，于是在 IE8 中需要一些特殊处理，即代码中标注“IE8”的部分。把这两段 Javascript 代码，替换之前文中的 WebElement.getLocation()，即可实现在 iframe 中对特定元素截图。

赞 (0)

相关推荐

  • js获得网页背景色和字体色的方法

    获得网页的背景色和字体颜色,方法如下: 思想: 通过取得颜色属性值得到的是 rgb 色,不是我们想要的,所以需要将 rgb 色装换为 十六进制色 ,首先获得rgb色 : 复制代码 代码如下: var rgb = document.getElementById('color').style.backgroundColor: 得到格式如下: rgb(225, 22, 23); 然后进行拆分: 复制代码 代码如下: var rgb = rgb.split('(')[1]; //拆分后为 [rgb, 2

  • js简单实现调整网页字体大小的方法

    本文实例讲述了js简单实现调整网页字体大小的方法.分享给大家供大家参考,具体如下: //var tgs = new Array('div','td','tr'); var tgs = new Array('td','tr'); //Specify spectrum of different font sizes: //var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );

  • JavaScript实现自动生成网页元素功能（按钮、文本等）

    JavaScript实现自动生成网页元素功能（按钮、文本等）

    创建元素的方法: 1.利用createTextNode()创建一个文本对象 2.利用createElement()创建一个标签对象 3.直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的"html代码",不是我们认为的对象树的操作 详解代码: <body> <input type="button" value="创建并添加节点1" onclick="addNode1()"/>

  • js调用打印机打印网页字体总是缩小一号的解决方法

    今天要做一个打印网页的小功能,直接调用window.print(),但是打印出来后,字体总是缩小一号,找不到原因... 后来尝试用一个IE的打印控件,但仅支持ie有点恶心,只能返回去继续找原因 原来,我要打印的页面因为是哥弹出层,所以出现这种现象,后来直接target="_blank",就可以正常打印了. 另外, 复制代码 代码如下: function preview() { bdhtml=window.document.body.innerHTML; sprnstr="&l

  • 原生JS操作网页给p元素添加onclick事件及表格隔行变色

    原生JS操作网页给p元素添加onclick事件及表格隔行变色

    1. 给网页中的所有p元素添加onclick事件: 复制代码 代码如下: <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.

  • JavaScript实现更改网页背景与字体颜色的方法

    JavaScript实现更改网页背景与字体颜色的方法

    本文实例讲述了JavaScript实现更改网页背景与字体颜色的方法.分享给大家供大家参考.具体分析如下: JavaScript,通过点击按钮更改网页背景与字体的颜色,网页中有N个改变颜色的按钮,点击不同的按钮,网页的字体与背景就会改变成不同的颜色.很简单的JavaScript小程序. 一.基本目标 一打开网页首先提示问候信息"你好" 网页中有N个改变颜色的按钮,其中返回是返回网页的默认颜色,背景是白的,字体是黑的 点击不同的按钮,网页的字体与背景就会改变成不同的颜色. 本来想做出彩虹起

  • js获取及修改网页背景色和字体色的方法

    本文实例讲述了js获取及修改网页背景色和字体色的方法.分享给大家供大家参考,具体如下: 获得网页的背景色和字体颜色,方法如下: 思想: 通过取得颜色属性值得到的是 rgb 色,不是我们想要的,所以需要将 rgb 色装换为 十六进制色 ,首先获得rgb色 : 代码如下: 复制代码 代码如下: var rgb = document.getElementById('color').style.backgroundColor; 得到格式如下: rgb(225, 22, 23); 然后进行拆分: 代码如下

  • JavaScript动态修改网页元素内容的方法

    本文实例讲述了JavaScript动态修改网页元素内容的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码当用户点击提交按钮后,通过元素的textContent或者innerHTML动态指定元素的内容 <script type="text/javascript"> function showCard() { var message = document.getElementById("CCN").value; var element = docu

  • JavaScript中计算网页中某个元素的位置

    由于项目的需要,测试中需要对网页元素进行截图,以确保它看上去没有问题.之前我写过一篇文章介绍过一种方法,先使用 WebDriver 进行全屏截图,然后根据目标元素(DOM Element)所在的位置,再对截下来的图片进行剪裁,保留我们需要的位置即可. 那段代码一直都工作得很好,直到我知道了一个东西:iframe.iframe(普通的 frame 也是一样的,不过 frame 现在不太常见,这里只用 iframe 举例)中的内容被视为一个独立的网页,连 Window 对象也是和它的父级网页分开的.

  • javascript实现在网页中运行本地程序的方法

    本文实例讲述了javascript实现在网页中运行本地程序的方法.分享给大家供大家参考,具体如下: <input onclick="exec('notepad.exe')" value="执行noteppad.exe" type="button"> <input onclick="exec('cmd.exe')" value="执行cmd.exe" type="button&qu

  • javascript动态向网页中添加表格实现代码

    javascript动态向网页中添加表格实现代码

    //此段代码在IE9.Firefox.Chorme.safair中测试显示没有问题,给该表格添加了一些简单的样式,基本功能可以实现,还有少量问题有待改进! 效果图如下:  以下是代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

  • JavaScript实现计算字符串中出现次数最多的字符和出现的次数

    "计算出字符串中出现次数最多的字符是什么,出现了多少次?" 看到这个需求,我想大多数人应该首先想到的是转换成数组,再做处理,当然是可以解决问题的,然后这里提供一个巧妙的算法设计,无需转数组,可以很快解决问题,代码如下: 复制代码 代码如下: var str = "adadfdfseffserfefsefseeffffftsdg"; var maxLength = 0; var result = ""; while(str!=''){     ol

  • C#中计算时间差中的小数问题解决

    问题: startTime = DateTime.Now;            -----------slExecutedTime.Text = (DateTime.Now - startTime).ToString();执行结果:已执行:00:00:03.1234434(后面会多出很多的小数位)想要的执行结果:已执行:00:00:03 -------------------------------------------------------------------------------

  • JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序

    看到网上这个程序 发现了处错误这里改正了一下: function counter() { var date = new Date(); var year = date.getFullYear(); var date2 = new Date(year, 11, 30, 23, 59, 59); /*转换成秒*/ var time = (date2 - date) / 1000; var day = Math.floor(time / (24 * 60 * 60)) var hour = Math.

  • JavaScript 全面解析各种浏览器网页中的JS 执行顺序

    我们知道javaScript是一种解释型语言,他的执行是自上而下,但是各个浏览器对于至上而下的理解是有细微差别的,而代码的上下游也就是程序流又对于程序正确至关重要,所以我觉得有必要深入理解多个js块儿的执行顺序. 首先得知道有多少方法能把javaScript加入到页面中呢?常见下述的前2种,其实还有更多. 1.页面中直接引入外部js文件:<script src="my.js"></script> 2.页面中直接写如js片段<script>alert(

  • 用hta+javascript实现替换网站被下木马网页中的iframe

    服务器中了病毒是件超级麻烦的事情,尤其是什么熊猫烧香之类的或者变种病毒,因为它们不单单潜伏于计算机里,还会把所有的一些网页文件加上了一些iframe,让访问者继续中毒,我想这也是它得已迅速蔓延的手段吧!     如果要把网页中的iframe去掉,是件吃力的苦力活.     所以,写了这样的一个小工具,希望能起到一点点的作用.      请把代码复制,保存在本地,以hta为扩展名.然后双击执行 复制代码 代码如下: <html> <head> <hta:application 

  • JavaScript获取网页中第一个图片id的方法

    本文实例讲述了JavaScript获取网页中第一个图片id的方法.分享给大家供大家参考.具体如下: 下面的代码通过document.images获取网页中的所有图片,然后获取第一个图片的id属性 <!DOCTYPE html> <html> <body> <img id="klematis lilac" border="0" src="klematis.jpg" width="148"

  • 同一个网页中实现多个JavaScript特效的方法

    同一个网页中实现多个JavaScript特效的方法

    本文实例讲述了同一个网页中实现多个JavaScript特效的方法.分享给大家供大家参考.具体分析如下: 一般来说,在网页中,如果出现两次<script type="text/javascript"></script>标签,所有的JavaScipt脚本都不会再生效,只能出现一次<script type="text/javascript"></script>标签,但是,同一个网页中常常需要多个JavaScript特效. 一

随机推荐