浏览器抓取网页(两个对象的scrollHeight和scrollWidth属性就是网页的另一种方法)

　　浏览器抓取网页(两个对象的scrollHeight和scrollWidth属性就是网页的另一种方法)

　　来自阮一峰的网络日志""

　　一、两个概念

　　网页大小：网页的整个区域就是它的大小。通常，网页的大小由内容和 CSS 样式表决定。

　　浏览器窗口大小：浏览器窗口的大小是指在浏览器窗口中看到的网页的面积，也称为视口。

　　显然，如果网页的内容可以在浏览器窗口中显示出来（即不出现滚动条），那么网页的大小和浏览器窗口的大小是相等的。

　　如果无法全部显示，请滚动浏览器窗口以显示网页的所有部分。

　　二、获取页面大小

　　网页上的每个元素都有 clientHeight 和 clientWidth 属性。这两个属性是指元素的内容部分加上padding所占用的可视区域，不包括边框和滚动条所占用的空间。

　　函数 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 都是只读属性，不能赋值。

　　三、另一种获取页面大小的方法

　　网页上的每个元素也有scrollHeight和scrollWidth属性，指的是包括滚动条在内的元素的可视区域。

　　那么，文档对象的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)

　　}

　　}

　　}

　　四、获取网页元素的绝对位置

　　网页元素的绝对位置是指元素左上角相对于整个网页左上角的坐标。这个绝对位置只能通过计算得到。

　　首先，每个元素都有offsetTop和offsetLeft属性，表示元素左上角到父容器（offsetParent对象）左上角的距离。

　　因此，只需要将这两个值累加就可以得到元素的绝对坐标。

　　可以使用以下两个函数来获取绝对位置的横坐标和纵坐标。

　　函数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 属性。

　　相应地重写上一节中的两个函数：

　　函数 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不支持。