27、JavaScript学习笔记——查看及操控窗口

查看及操控窗口

1. 获得窗口属性和元素尺寸

BOM的核心是window对象，表示浏览器的实例。window对象在浏览器中有两重身份，一个是ES的Global对象，另一个就是浏览器窗口的JavaScript接口。

window对象被复用为ECMAScript的Global对象。

1.1 查看滚动条的滚动距离

浏览器窗口尺寸通常无法满足完整显示整个页面，为此用户可以通过滚动在有限视口中查看文档。

• window.pageXOffset/pageYOffset属性返回文档在窗口左上角水平和垂直方向滚动的像素。

IE8以及IE8以下不兼容

• document.body.scrollLeft/scrollTop或document.documentElement.scrollLeft/scrollTop

兼容性比较混乱，两个不同时有值，其中一个有值，则另一个的值一定为0。因此用时通常取两者之和。

封装查看滚动条滚动距离的方法(解决兼容性)

function getScrollOffset() {
    if(window.pageXOffset) {
        return {
            x : window.pageXOffset,
            y : window.pageYOffset
        };
    } else {
        return {
            x : document.body.scrollLeft + document.documentElement.scrollLeft,
            y : document.body.scrollTop + document.documentElement.scrollTop
        };
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

1.2 可视区窗口的属性

• window.innerWidth/innerHeight返回浏览器窗口中页面视口的大小（不包含浏览器的边框和工具栏）

IE8以及IE8以下不兼容

• document.documentElement.clientWidth/clientHeight标准模式下，任意浏览器都兼容；

• document.body.clientWidth/clientHeight适用于怪异模式下的浏览器。

目前浏览器的排版引擎使用三种模式：怪异模式、接近标准模式、以及标准模式。在怪异模式下，排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。为了支持在网络标准被广泛采用前，就已经建好的网站，这么做是必要的。在标准模式下，行为由 HTML 与 CSS 的规范描述的行为。在接近标准模式下，只有少数的怪异行为被实现。
标准模式的width和height指的是内容盒的宽高，而怪异模式则指的是边框盒的宽高；

封装兼容性方法，返回浏览器视口尺寸getViewportOffset()

function getViewportOffset() {
    if(window.innerWidth){
        return {
            w : window.innerWidth,
            h : window.innerHeight
        };
    } else {
        if(document.compatMode === 'BackCompat'){
            return {
                w : document.body.clientWidth,
                h : document.body.clientHeight
            };
        } else {
            return {
                w : document.documentElement.clientWidth,
                h : document.documentElement.clientHeight
            };
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

1.3 查看元素的几何尺寸

• .getBoundingClientRect();返回一个对象，对象中有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表该元素右下角的X和Y坐标。

这个方法的兼容性很好。

height和width属性老版本的IE并未实现。

返回的结果并不是实时的。获取元素尺寸并保存后，修改元素尺寸，之前保存的尺寸信息不会相应改变。

• .offsetWidth/offsetHeight查看元素在水平/垂直方向上视觉上占用的像素尺寸（包括自身的宽/高，垂直/水平滚动条的宽度以及边框的宽度），同getBoundingClientRect()返回对象中的width和height。

• .offsetLeft/offsetTop查看元素左/上边框到第一个存在定位的父级元素左/上边框的距离。

最开始有定位的元素是body，body默认margin为8px。

• .offsetParent返回最近的有定位的父级。

若没有有定位的父级，则返回body；body.offsetParent返回null。

2. 操控窗口属性

2.1 让滚动条滚动

window上有三个方法：

• scroll()
• scrollTo()
• scrollBy()

scroll()和scrollTo()没有任何区别，将横向和纵向的滚动条要滚动到的位置传入，实现让滚动轮滚动到当前位置。

而scrollBy()是在当前滚动位置上累加滚动距离。