JS BOM了解-Toy模板网

这篇具有很好参考价值的文章主要介绍了JS BOM了解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

概述

BOM(Browser Object Model)浏览器对象模型，就是操作浏览器的一些能力，可以操作的内容如下：

获取一些浏览器相关信息（窗口大小）
操作浏览器的滚动条
浏览器的信息（浏览器的版本）
让浏览器出现一个弹窗（alert，confirm，prompt）

BOM的核心就是window对象，window是浏览器的一个对象，里面包含着操作浏览器的方法。

1 History浏览器记录

window 中有一个对象叫做history，是专门用来存储历史记录信息的，在编写时可不使用 window 这个前缀。

1.1 history.go

history.go(n): n为正数时向前n页，n为负数时向后退n页

window.history.go(-2); 	// 返回上上页
window.history.go(-1); 	// 返回上一页
window.history.go(0); 	// 刷新当前页
window.history.go(1); 	// 前往下一页

1.2 history.back()

history.back是用来回退历史记录的，就是回到前一个页面，相当于浏览器上的返回按钮，前提是要有上一条记录，不然就是一直在当前页面，也不会回退。
```
window.history.back();
```

1.3 history.forword()

history.forword是到一个历史记录里面，也就是下一个页面，前提是之前有过回退操作，不然当前就是最后一个页面，没有下一个。
```
window.history.forward();
```

2 Location浏览器地址

2.1 操作属性

注意：pathname、search属性在HashRouter路由模式下会失效，只能在BrowserRouter路由模式下使用。
假定当前浏览器加载的URL是：http://test.csdn.com:3000/#/build_table?id=1
常用属性如下表所示：

属性	值	说明
location.protocol	http:	页面使用的协议，通常是http或https
location.hostname	test.csdn.com	服务器域名
location.port	3000	请求的端口号
location.host	test.csdn.com:3000	服务器名及端口号
location.origin	http://text.csdn.com:3000	url源地址，只读
location.href	完整的URL地址	等价于window.location
location.pathname	/(这里指端口号3000后面的/)	URL中的路径和文件名，不会返回hash和search后面的内容，只有当打开的页面是一个文件时才会生效

以下是几个特殊属性：

location.hash：URL散列值（#号之后的部分，包括#号）；

location.search：URL的查询字符串（?号后面的部分，包括?，指的是端口后面紧接着的?号，而不是#号后面的?号）

- url为：http://test.csdn.com:3000/#/build_table?id=1
console.log(location.hash)		// "#/build_table?id=1"
console.log(location.search )	// ""

- url为：http://test.csdn.com:3000/?id=1#/build_table
console.log(location.hash)		// "#/build_table"
console.log(location.search)	// "?id=1#/build_table"

设置属性，URL为：http://test.csdn.com:3000/#/build_table?id=1

location.hash = '#/cerate_table?id=2'
console.log(location.href)	// http://test.csdn.com:3000/#/cerate_table?id=2

location.search= '?/id=2'
console.log(location.href)	// http://test.csdn.com:3000/#/?id=2

其他属性示例：http://foouser:barpassword@www.wrox.com:80/HB/new_file2.html

属性值说明

location.username foouser 域名前指定的用户名

location.password barpassword 域名前指定的密码

属性	值	说明
location.username	foouser	域名前指定的用户名
location.password	barpassword	域名前指定的密码

2.2 操作方法

跳转：location.assign()

// 指定协议跳转
location.assign("http://www.baidu.com")
/* 等同于 */ 
location.href = "http://www.baidu.com"

// 以当前页面协议跳转
location.assign("//www.baidu.com")
/* 等同于 */ 
location.href = "//www.baidu.com"

刷新：location.reload()

// 重新加载，可能是从缓存加载
location.reload();
// 重新加载，从服务器加载
location.reload(true)

3 window界面属性

窗口：指的是浏览器窗口
视口：指的是浏览器窗口中的页面视口（不包含浏览器边框和工具栏）
屏幕：指的是电脑屏幕

3.1 窗口和屏幕的位置

screenLeft：表示窗口相对于屏幕左侧的位置，返回值的单位是像素值

screenTop：表示窗口相对于屏幕顶部的位置，返回值的单位是像素值

console.log("screenLeft 位置：", window.screenLeft);
console.log("screenTop 位置：", window.screenTop);

moveTo：接收要移动到的新位置的绝对坐标x和y；

moveBy：接收相对当前位置在两个方向上移动的像素值

// 把窗口移动到左上角
window.moveTo(0,0)

// 把窗口移动到坐标位置（200，300）
window.moveTo(200,300)

// 把窗口向下移动100像素
window.moveBy(0,100)

// 把窗口向左移动10像素
window.moveBy(-10,0)

3.2 窗口和视口的大小

视口：innerHeight和innerWidth，返回浏览器窗口中页面视口大小（不包含浏览器边框和工具栏）

console.log("innerWidth 宽度：",window.innerWidth);
// innerWidth 宽度： 1002
console.log("innerHeight 高度：",window.innerHeight);
// innerHeight 高度： 907

窗口：outerHeight和outerWidth，返回浏览器自身窗口的大小

console.log("outerWidth 宽度：",window.outerWidth);
// outerWidth 宽度： 1680
console.log("outerHeight 高度：",window.outerHeight);
// outerHeight 高度： 1010

浏览器的onscroll事件
浏览器滚动其实其本身没有动，只不过是页面向上平移了，所以滚动应该使用document对象，onscroll事件是当浏览器滚动条滚动时触发或者鼠标滚轮滚动时触发，前提是页面的高度超过浏览器的可视窗口。
```
window.onscroll = function(){
	console.log('浏览器滚动了');
}
```

3.3 视口与滚动的关系

Safari浏览器使用的是window.pageXOffset和window.pageYOffset

距离，scrollX：文档向右滚动的距离，当窗口无法展示整个页面，这时候需要滚动查看；

距离，scrollY：文档向下滚动的距离，当窗口无法展示整个页面，这时候需要滚动查看；

console.log("scrollX 向右滚动了多少距离：",window.scrollX);
// scrollX 向右滚动了多少距离： 0
console.log("scrollY 向下滚动了多少距离：",window.scrollY);
// scrollY 向下滚动了多少距离： 0

定位，scrollTo（绝对）和scrollBy（相对），这两个方法接收x和y坐标，表示要滚动到的位置

// 滚动到页面左上角
window.scrollTo(0,0)

// 滚动到页面左边100像素和顶部200像素的位置
window.scrollTo(100,200)

// 相对于当前视口向下滚动100像素
window.scrollBy(0,100)

// 相对于当前视口向右滚动40像素
window.scrollBy(40,0)

4 其他不常用属性

4.1 Screen客户端屏幕

属性	描述
screen.height	获取整个屏幕的高
screen.width	获取整个屏幕的宽
screen.availHeight	整个屏幕的高减去系统部件的高，可用屏幕的高
screen.availWidth	整个屏幕的宽减去系统部件的宽，可用屏幕的宽

4.2 Navigator浏览器信息

属性	描述
navigator.userAgent	获取浏览器的整体信息
navigator.appName	获取浏览器名称
navigator.appVersion	获取浏览器的版本号
navigator.platform	获取当前计算机操作系统