javascript中BOM的window对象的属性

BOM也叫浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。BOM缺少规范，每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准。所以，BOM本身是没有标准的或者还没有哪个组织去标准它。

window对象：BOM的核心对象是window，它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层，对于每个打开的窗口，系统都会自动为其定义 window 对象。

Window 对象属性

一、location对象：是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location对象是window对象的属性，也是document对象的属性;所以window.location和document.location等效，都表示当前页面的url地址。

location对象的属性：

hash：设置或返回从井号 (包含#) 开始的 URL(锚)

host：设置或返回主机名和当前 URL 的端口号，80端口不输出。

origin：设置或返回协议和主机名和当前 URL 的端口号，80端口不输出。

hostname：设置或返回当前 URL 的主机名。

href：设置或返回完整的 URL。

pathname：设置或返回当前 URL 的路径部分。

port：设置或返回当前 URL 的端口号。

protocol：设置或返回当前 URL 的协议。

search：置或返回从问号 (包含?) 开始的 URL(查询部分)。

location对象的方法

assign()：加载新的文档。跳转到指定页面，与href等效：location.assign('http://www.baidu.com');

reload()：重新加载当前文档，有可能从缓存加载

replace()：用新的文档替换当前文档，可以避免产生跳转前的历史记录

二、history对象：是window对象的属性，它保存着用户上网的记录，从窗口被打开的那一刻算起。

1、history对象的length属性，记录history对象中的记录数，可以通过判断history.length == 0，得到是否有历史记录。

2、history对象的方法

back()：前往浏览器历史条目前一个URL，类似后退

forward()：前往浏览器历史条目下一个URL，类似前进

go(num)：浏览器在history对象中向前或向后，为正数n时，浏览器在历史条目中前进n个url，为负数n时，浏览器在历史条目中后退n个url，为0时刷新当前页面。

history.pushState(state, unused, url):向浏览器的历史记录中增加一个记录
    state：是一个对象，与历史记录关联
    unused：一个字符串，将来可能有用，该参数存在且不能忽略，一般传递一个空字符串
    url：新历史记录的URL
        浏览器不会尝试加载该URL内容，仅仅是地址栏显示更改
        新的URL必须与当前URL同源，否则将抛出异常
        如果该参数没有指定，则将其设置为当前URL

history.replaceState(state, unused, url)：修改当前浏览页面保存在历史记录中的信息

当导航到新的state会触发popstate事件(window下)，且该事件对象的state属性为历史条目state对象的副本

三、screen对象：包含有关客户端显示屏幕的信息，没有应用于 screen 对象的公开标准，不过所有浏览器都支持该对象

screen 对象的属性：

availHeight：返回显示屏幕的高度 (除 Windows 任务栏之外)。

availWidth：返回显示屏幕的宽度 (除 Windows 任务栏之外)。

bufferDepth：设置或返回调色板的比特深度。

colorDepth：返回目标设备或缓冲器上的调色板的比特深度。

deviceXDPI：返回显示屏幕的每英寸水平点数。

deviceYDPI：返回显示屏幕的每英寸垂直点数。

fontSmoothingEnabled：返回用户是否在显示控制面板中启用了字体平滑。

width：返回显示器屏幕的宽度。

height：返回显示屏幕的高度。

logicalXDPI：返回显示屏幕每英寸的水平方向的常规点数。

logicalYDPI：返回显示屏幕每英寸的垂直方向的常规点数。

pixelDepth：返回显示屏幕的颜色分辨率(比特每像素)。

updateInterval：设置或返回屏幕的刷新率。

四、窗口的位置

alert(typeof screenLeft);//打印窗口的左上角在屏幕上的 x 坐标，浏览器支持则显示number，不支持的显示undefined
var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;
var topY = (typeof screenTop == 'number') ? screenTop : screenY;

五、窗口页面大小：innerWidth和innerHeight返回浏览器窗口本身的尺寸;outerWidth和outerHeight返回浏览器窗口本身及边框的尺寸(这四个属性IE不支持)。

在Chrome中，innerWidth=outerWidth、innerHeight=outerHeight;

document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面窗口的信息。

var width = window.innerWidth; //这里要加window，避免产生无效
var height = window.innerHeight;
if (typeof width != 'number') { //如果是IE，就使用document
    if (document.compatMode == 'CSS1Compat') {
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
    } else {
        width = document.body.clientWidth; //非标准模式使用body
        height = document.body.clientHeight;
    }
}

以上方法可以通过不同浏览器取得各自的浏览器窗口页面可视部分的大小。document.compatMode可以确定页面是否处于标准模式，如果返回CSS1Compat即标准模式。