浏览器抓取网页(如何获取网页的大小一张网页位置的全部面积？ )
优采云 发布时间: 2021-11-07 02:16浏览器抓取网页(如何获取网页的大小一张网页位置的全部面积？
)
获取页面大小
一个网页的总面积就是它的大小，通常由内容和css样式表决定。
浏览器窗口的大小是您在浏览器中看到的网页部分的面积。也称为视口。
如果网页的内容可以在浏览器窗口中显示（即不出现滚动条），那么网页的大小和浏览器窗口的大小是相等的。如果无法显示所有内容，请滚动浏览器窗口以显示网页的所有部分。
function getViewport(){
if (document.compatMode == "BackCompat"){//（兼容quirks模式）
//document.compatMode用来判断当前浏览器采用的渲染方式。
//BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}
浏览器窗口内部高 window.innerHeight
内部宽 window.innerWidth
IE 5 6 7 8 //一般返回的是正确值,documentElement代表根元素，一般指html
html文档所在窗口的当前高度 document.documentElement.clientHeight
宽度 document.documentElement.clientWidth
或者Document对象的body属性对应HTML文档的Body标签
document.body.clientHeight
document.body.clientWidth
function getPagearea(){
if (document.compatMode == "BackCompat"){
return {//判断网页内容刚好在浏览器中全部显示，取最大值
width: Math.max(document.body.scrollWidth,
document.body.clientWidth),
height: Math.max(document.body.scrollHeight,
document.body.clientHeight)
}
} else {
return {
width: Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),
height: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
网页实际内容的宽度和高度（元素的可视区域包括滚动条，滚动条的所有长度和宽度）
scrollHeight
scrollWidth
网页内容宽高(包含滚动条等边线，会随着窗口的显示大小改变)
offsetHeight
offsetHeight=clientHeight+滚动条+边框
offsetWidth
元素绝对位置
网页元素的绝对位置是指元素左上角相对于整个网页左上角的坐标。这个绝对位置只能通过计算得到。
首先，每个元素都有offsetTop和offsetLeft属性，表示元素左上角到父容器（offsetParent对象）左上角的距离。因此，只需要将这两个值累加就可以得到元素的绝对坐标。
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
function getElementTop(element){ //元素距顶部文档的距离
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
元素的相对位置
网页元素的相对位置是指元素左上角相对于浏览器窗口左上角的坐标。
有了绝对位置，就很容易得到相对位置，只需用页面滚动距离减去绝对坐标即可。滚动条的垂直距离是文档对象的scrollTop属性；滚动条的水平距离是文档对象的 scrollLeft 属性。
function getElementViewLeft(element){//offset包括border
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollLeft=document.body.scrollLeft;
} else {
var elementScrollLeft=document.documentElement.scrollLeft;
}
return actualLeft-elementScrollLeft;
}
function getElementViewTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current. offsetTop;
current = current.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollTop=document.body.scrollTop;
} else {
var elementScrollTop=document.documentElement.scrollTop;
}
return actualTop-elementScrollTop;
}
scrollTop 和 scrollLeft 属性可以赋值，它们会立即自动将网页滚动到相应的位置，因此您可以使用它们来改变网页元素的相对位置。另外 element.scrollIntoView() 方法也有类似的效果，可以让网页元素出现在浏览器窗口的左上角。
页面元素的位置
即使用 getBoundingClientRect() 方法。它返回一个收录四个属性的对象：left、right、top和bottom，分别对应元素左上角和右下角相对于浏览器窗口（视口）左上角的距离。
因此，网页元素的相对位置为 this=ele
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;
滚动条的位置
function getScrollTop() {
if (window.pageYOffset) {
scrollPos = window.pageYOffset;//
}
else if (document.compatMode && document.compatMode != 'BackCompat') {
scrollPos = document.documentElement.scrollTop;
}
else if (document.body) {
scrollPos = document.body.scrollTop;
}
return scrollPos;
}
滚动距离和偏移
scrollLeft 设置或者取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离
scrollTop 设置或取位于对象最顶端与窗口中可见内容的最顶端之间的距离
offsetLeft 获取指定对象位于版面或由offsetParent属性指定的父坐标的计算左侧位置
offsetTop 获得指定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置
offsetParent指的是布局中设置position属性 Relative Absolute Fixed的父容器，
从最近的父节点开始，一层层向上找，直到html的body
屏幕的宽度和高度
1. 整个屏幕的宽高: screen对象: 封装当前屏幕的信息
完整屏幕宽高: screen.width/height
去掉任务栏后，可用的宽高:
screen.availWidth/availHeight
: 如何判断用户现在使用设备的种类:
1. screen.width/height
2. 获得鼠标的坐标位置:
获得鼠标相对于屏幕的位置: e.screenX/screenY
图片说明
HTML精确定位：scrollLeft、scrollWidth、clientWidth、offsetWidth
ele.scrollHeight：获取对象的滚动高度。
ele.scrollWidth: 获取对象的滚动宽度
ele.scrollLeft：设置或获取对象左边缘与窗口中当前可见内容最左端的距离
ele.scrollTop：设置或获取元素到文档顶部的距离，滚动条拉动的距离
//可以通过style.width,height,left,top来设置
offsetWidth：获取对象相对于布局的宽度或父坐标offsetParent属性指定的父坐标
offsetHeight：获取对象相对于布局的高度或父坐标offsetParent属性指定的父坐标
offsetLeft：获取计算出的对象相对于布局或offsetParent属性指定的父坐标的左侧位置
offsetTop：获取计算出的对象相对于布局或offsetTop属性指定的父坐标的顶部位置
event.clientX 相对于文档的水平坐标
event.clientY 相对于文档的垂直坐标
event.offsetX 相对于容器的水平坐标
event.offsetY 相对于容器的垂直坐标
document.documentElement.scrollTop 垂直滚动的值
event.clientX+document.documentElement.scrollTop 相对于文档的水平坐标+垂直方向的滚动量
以下是在 JavaScript 中构建迁移和转换代码的常用属性
页面可见区域的宽度：document.body.clientWidth；
网页可见区域的高度：document.body.clientHeight；
网页可见区域的宽度：document.body.offsetWidth（包括边线的宽度）；
网页可见区域的高度：document.body.offsetHeight（包括边线的宽度）；
页面正文的全文宽度：document.body.scrollWidth；
页面正文全文高度：document.body.scrollHeight；
被滚动页面的高度：document.body.scrollTop；
页面向左滚动：document.body.scrollLeft;
在页面主体项组上：window.screenTop；
左侧页面主体项组：window.screenLeft；
高屏幕分辨率：window.screen.height；
屏幕分辨率的宽度：window.screen.width；
屏幕上可用工作区的高度：window.screen.availHeight；
2、clientHeight
认为是内容可见区域的高度，即页面浏览器中可以看到内容的区域的高度，一般是从最后一个对象栏下方的区域到状态栏上方的区域，与页面内容无关。
clientHeight 是通过浏览器查看内容的区域的高度。
offsetHeight和scrollHeight都是网页内容的高度，但是当网页内容高度<clientHeight时，scrollHeight=clientHeight，offsetHeight可以是<clientHeight。
offsetHeight = 可视区域 clientHeight + 滚动条 + 边框。scrollHeight 则是网页内容实际高度。
3、scrollLeft
scrollTop 是“卷起”的高度值，例如：
<p>
