BOM的常用操作和有关获取页面/窗口高度、宽度及滚动的兼容性写法

简介：

BOM是 Browse Object Model,简称浏览器对象模型。

浏览器的文档对象模型，并不没有统一标准，并不像DOM（文档对象模型）是有W3C联盟制定的提供对HTML文档操作的接口；BOM虽然不是标准的接口，但是浏览器厂商提供的这个接口的功能都大致相同。

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的。

window下的几大功能对象(window的属性)有:navigatior,screen,document,history,location

1、navigator对象

它的属性：

appCodeName 返回浏览器的代码名 ；

appName 返回浏览器的名称 ；

appVersion 返回浏览器的平台和版本信息 ；

cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值；

platform 返回运行浏览器的操作系统平台 ；

userAgent 返回由客户机发送服务器的user-agent 头部的值。

2、screen对象

它的属性：

availHeight 返回屏幕的高度（不包括Windows任务栏）；

availWidth 返回屏幕的宽度（不包括Windows任务栏）；

height 返回屏幕的总高度；

width 返回屏幕的总宽度；

pixelDepth 返回屏幕的颜色分辨率（每象素的位数）。

3、document对象

我们前面已经单独学习过document对象，这里不再阐述。

4、history对象

它的属性：

length返回访问历史列表中的网址数 ；

back() 加载 history 列表中的前一个 URL；

forward() 加载 history 列表中的下一个 URL；

go(number|url)加载 history列表中的某个具体页面//负数后退,正数前进

5、location对象

它的属性：

hash 返回一个URL的锚部分//192.168.1.102:8081?name=jack&pwd=123#page1；

host 返回一个URL的主机名和端口；

hostname 返回URL的主机名 ；

href 返回完整的URL ；

pathname 返回的URL路径名；

port 返回一个URL服务器使用的端口号；

protocol 返回一个URL协议 ；

search 返回一个URL的查询部分。

方法:

assign(url) 载入一个新的文档；

reload() 重新载入当前文档；

replace(url) 用新的文档替换当前文档。

window的其他属性：

closed 返回窗口是否已被关闭。

innerHeight 返回窗口的文档显示区的高度

innerWidth 返回窗口的文档显示区的宽度

outerHeight 返回窗口的外部高度，包含工具条与滚动条

outerWidth 返回窗口的外部宽度，包含工具条与滚动条

screenLeft 返回相对于屏幕窗口的x坐标

screenTop 返回相对于屏幕窗口的y坐标

screenX 返回相对于屏幕窗口的x坐标

screenY 返回相对于屏幕窗口的y坐标

onload 指定所有配置都加载完成时(图片例外)调用的函数.

pageXOffset 返回当前页面相对于窗口显示区左上角的 X 位置(body横向滚动的距离)

pageYOffset 返回当前页面相对于窗口显示区左上角的 Y 位置(body纵向滚动的距离)

window的方法：

alert() 显示带有一段消息和一个确认按钮的警告框。

close() 关闭浏览器窗口。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

open(url,打开方式,新窗口配置,BOOL) 打开一个新的浏览器窗口 //4个参数都可选(一般就填第一个参数) //url:新窗口地址 打开方式:blank(默认),parent,self,top 配置(各种):一般默认 BOOL:新窗口在历史记录里面有,要不要替换 print() 打印当前窗口的内容。

prompt(tishi,value) 显示可提示用户输入的对话框。

scrollBy() 按照指定的像素值来滚动内容(前提是你的有滚动条:内容够多)

scrollTo() 把内容滚动到指定的坐标。(前提是你的有滚动条:内容够多)

setInterval(callback,times) 按照指定的周期（以毫秒计）来调用函数

setTimeout(callback,times) 在指定的毫秒数后调用函数

clearInterval() 取消由 setInterval() 设置的 timeout。

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

5.navigator

让窗口滚动到指定位置

1.滚到指定坐标, 前提是页面够长，要能滚动

window.scrollTo(x,y)；

window.scroll(x,y)；

scrollBy(x,y);

前两个方法功能类似，用法都是将x,y坐标传入，实现滚动到指定位置。 而scrollBy()会在之前的数据基础上做累加。

2.el.scrollIntoView()

滚动到指定元素可见,调用元素的底部会尽量与视口的顶部齐平,也不一定 主要是能不能滚 能滚多远 el.scrollIntoView(true)默认为true，将元素和视口的上边缘对齐; 如果传递参数false，则将元素的下边缘和视口的下边缘对齐；

一些方法存在兼容性问题，采用兼容性写法解决。

页面滚动的距离

window.pageXOffset/window.pageYOffset （x轴和y轴），IE8及IE8以下不兼容

能够兼容：

document.body.scrollLeft/scrollTop

document.documentElement.scrollLeft/scrollTop

合并起来，兼容写法：

sY=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop
 
sX=window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft

窗口的可视区域尺寸

window.innerWidth/window.innerHeight// bom操作，IE8及IE8以下不兼容;

document.documentElement.clientWidth/clientHeight//标准模式下(，渲染模式)，任意浏览器都兼容;

document.body.clientWidth/clientHeight//适用于怪异/混杂模式下的浏览器;

document.compatMode//可区分标准模式与否。(BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启)

兼容写法：

  let cWidth,cHeight;
	if (document.compatMode == "BackCompat") {
		cWidth = window.innerWidth||document.body.clientWidth;
		cHeight =window.innerHeight||document.body.clientHeight;
	} else {
		//document.compatMode == "CSS1Compat"
		cWidth = window.innerWidth||document.documentElement.clientWidth;
		cHeight = window.innerHeight||document.documentElement.clientHeight;
	}

元素的几何尺寸

el.getBoundingClientRect();
该方法返回一个对象，对象里边有 left,top,right,bottom,height,width属性。

left和 top代表该元素左上角的 X和 Y坐标，right和 bottom代表元素右下角的 X和 Y坐标，返回的对象里边还有属性x,y，表示的是元素左顶点相对于页面body左顶点的距离。