浏览器抓取网页(Javascript在网页定位方面的相关知识在定位中的应用)
优采云 发布时间: 2021-12-21 19:18浏览器抓取网页(Javascript在网页定位方面的相关知识在定位中的应用)
下面的教程总结了网页定位中Javascript的相关知识。
一、网页的绝对和相对大小
首先，我们必须澄清两个基本概念。
一个网页的总面积就是它的绝对大小。通常，网页的绝对大小由内容和 CSS 样式表决定。
网页的相对大小是指在浏览器窗口中看到的网页部分，即浏览器窗口的大小，也称为视口。
下图中央的方框代表浏览器窗口，一次只能显示网页的一部分。
（图1网页的绝对和相对大小）
显然，如果网页的内容可以在浏览器窗口中显示出来（即不出现滚动条），那么网页的绝对大小和相对大小是相等的。
二、获取网页的相对大小
网页上的每个元素都有 clientHeight 和 clientWidth 属性，您可以使用它们来获取网页的相对大小。这两个属性所代表的大小是指元素的内容部分加上padding的大小，但不包括边框和滚动条所占用的空间。
（图 2 clientHeight 和 clientWidth 属性）
因此，文档元素的 clientHeight 和 clientWidth 属性表示网页的相对大小。
函数 getViewport(){
if (patMode == "BackCompat"){
返回 {
宽度：document.body.clientWidth，
高度：document.body.clientHeight
}
} 别的 {
返回 {
宽度：document.documentElement.clientWidth，
高度：document.documentElement.clientHeight
}
}
}
上面的getViewport函数可以返回浏览器窗口的高度和宽度。使用时，有三个地方需要注意：
1）这个函数必须在页面加载完成后运行，否则文档对象还没有生成，浏览器会报错。
2） 在大多数情况下，document.documentElement.clientWidth 返回正确的值。但是在IE6的quirks模式下，document.body.clientWidth返回的是正确的值，所以在函数中加入了文档模式的判断。
3）clientWidth 和 clientHeight 都是只读属性，不能赋值。
三、获取网页的绝对大小
document对象的scrollHeight和scrollWidth属性是网页的绝对大小，即滚动条的所有长度和宽度。
以 getViewport() 函数为模型，您可以编写 getPagearea() 函数。
函数 getPagearea(){
if (patMode == "BackCompat"){
返回 {
宽度：document.body.scrollWidth，
高度：document.body.scrollHeight
}
} 别的 {
返回 {
宽度：document.documentElement.scrollWidth，
高度：document.documentElement.scrollHeight
}
}
}
但是，这个功能有问题。前面说过，如果网页的内容可以在没有滚动条的浏览器窗口中显示，那么网页的绝对大小和相对大小应该相等，即clientWidth和scrollWidth应该相等。但实际上，不同浏览器的处理方式不同，这两个值可能并不相等。因此，我们需要取其中较大的值，因此需要重写getPagearea()函数。
函数 getPagearea(){
if (patMode == "BackCompat"){
返回 {
宽度：Math.max(document.body.scrollWidth,
document.body.clientWidth),
高度：Math.max(document.body.scrollHeight,
文档.body.clientHeight)
}
} 别的 {
返回 {
宽度：Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),
高度：Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
四、获取网页元素的绝对位置
由于网页的大小可以分为绝对和相对，因此网页元素的位置也可以分为绝对和相对。网页元素左上角相对于整个网页左上角的坐标为绝对位置；相对于浏览器窗口左上角的坐标是相对位置。
在Javascript中，网页元素的绝对坐标只能通过计算来获得。每个元素都有 offsetTop 和 offsetLeft 属性，表示元素左上角到父容器（offsetParent 对象）左上角的距离。因此，只需要将这两个值累加就可以得到元素的绝对坐标。
（图3 offsetTop和offsetLeft属性）
可以使用以下两个函数来获取绝对位置的横坐标和纵坐标。
函数getElementLeft（元素）{
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
而（当前！== 空）{
actualLeft += current.offsetLeft;
当前 = current.offsetParent;
}
返回实际左；
}
函数 getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
而（当前！== 空）{
actualTop += current.offsetTop;
当前 = current.offsetParent;
}
返回实际顶部；
}
由于在tables和iframes中，offsetParent对象可能不等于父容器，所以上述函数不适用于tables和iframes中的元素。
五、获取网页元素的相对位置
一旦有了元素的绝对位置，就很容易得到相对位置，只需从绝对坐标中减去滚动条的距离即可。滚动条的垂直距离是文档对象的scrollTop属性；滚动条的水平距离是文档对象的 scrollLeft 属性。
（图4 scrollTop和scrollLeft属性）
相应地重写上一节中的两个函数：
函数 getElementViewLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
而（当前！== 空）{
actualLeft += current.offsetLeft;
当前 = current.offsetParent;
}
if (patMode == "BackCompat"){
var elementScrollLeft=document.body.scrollLeft;
} 别的 {
var elementScrollLeft=document.documentElement.scrollLeft;
}
返回actualLeft-elementScrollLeft；
}
函数 getElementViewTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
而（当前！== 空）{
实际顶部 += 当前。偏移顶部；
当前 = current.offsetParent;
}
if (patMode == "BackCompat"){
var elementScrollTop=document.body.scrollTop;
} 别的 {
var elementScrollTop=document.documentElement.scrollTop;
}
返回actualTop-elementScrollTop；
}
scrollTop 和 scrollLeft 属性可以赋值，它们会立即自动将网页滚动到相应的位置，因此您可以使用它们来改变网页元素的相对位置。另外 element.scrollIntoView() 方法也有类似的效果，可以让网页元素出现在浏览器窗口的左上角。
六、快速获取元素位置的方法
除了上述功能外，还有一种快速获取网页元素位置的方法。
即使用 getBoundingClientRect() 方法。它返回一个收录四个属性的对象：left、right、top和bottom，分别对应元素左上角和右下角相对于浏览器窗口（视口）左上角的距离。
所以，网页元素的相对位置是
var X = this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
加上滚动距离，可以得到绝对位置
var X = this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
目前IE、Firefox 3.0+、Opera 9.5+都支持这种方式，但Firefox 2.x、Safari、Chrome、Konqueror不支持。
（结束）
