【ECMAScript】BOM的5个对象梳理和总结

1. 前言

        BOM的5个对象分别是window对象、location对象、navigator对象、screen对象、history对象，本篇对这5个对象进行梳理和总结。

2. window对象

        window对象是浏览器的实例，一是作为全局对象使用，挂载在window对象的变量，全局范围可访问；二是作为访问浏览器窗口的介质或者说是浏览器窗口的引用。

常用属性和方法	说明	示例
window.innerWidth	返回浏览器窗口中页面视口宽度（含滚动条，不含浏览器边框和工具栏）	<略>
window.innerHeight	返回浏览器窗口中页面视口高度（含滚动条，不含浏览器边框和工具栏）	<略>
window.outerWidth	返回浏览器自身宽度	<略>
window.outerHeigth	返回浏览器自身高度	<略>
window.open(url, target, str, )	打开新窗口	<略>
window.close()	关闭当前窗口	<略>
window.moveTo()	移动当前窗口	<略>
window.resizeTo(width,height)	窗口尺寸宽高各调整到多少	<略>
window.resizeBy(width,heigth)	窗口尺寸宽高各增加多少	<略>
window.scroll()		<略>
window.scrollTo(x,y)	滚动到x,y位置	<略>
window.scrollBy(x,y)	相对于当前视口，水平和垂直滚动多少	<略>

3. screen对象

         screen引用浏览器窗口外的客户端显示器的宽高信息，使用较少。

常用属性和方法	说明	示例
screen.availWidth	屏幕像素宽度减去系统组件宽度	<略>
screen.availHeigth	屏幕像素高度减去系统组件高度 （比如去掉任务栏高度）	<略>
screen.availLeft	没有被系统组件占用的屏幕的最左侧像素	<略>
screen.availTop	没有被系统组件占用的屏幕的最顶端像素	<略>
screen.width	屏幕像素宽度 （整个电脑屏幕的宽度）	<略>
screen.height	屏幕像素高度 （整个电脑屏幕的高度）	<略>
screen.colorDepth	表示屏幕颜色的位数，一般是32位	<略>
screen.pixelDepth.	屏幕位深	<略>
scree.isExtended	<略>	<略>
screen.orientation	返回Screen Orientation API中屏幕朝向	<略>
screen.onchange	略	<略>

4. location对象

        location提供当前加载文档的信息，以及导航功能。window.location和document.location都指向location。

常用属性和方法	说明	示例
属性
location.href	当前加载页面完整URL， 修改href会导航到一个新页面	'http://user:[email protected]:8080 /src/index/?page_no=1&page_size=10#anchor'
location.origin	URL的源地址（只读）	'http://www.test.com:8080'
location.protocol	页面使用的协议，http,https,ftp等	'http:'
location.host	主机名+端口号	'www.test.com:8080'
location.hostname	主机名	'www.test.com'
location.port	端口号，默认80端口时，返回空字符串	'8080'
location.pathname	URL中的路径和（或）文件名	'/src/index/'
location.search	URL中的查询字符串，以?开始	'?page_no=1&page_size=10'
location.hash	URL散列值，以#开始，修改hash不会引起页面重新加载，修改其他属性会引起页面重新加载，但会增加历史记录 通过监听hashchange事件，得到hash发生改变的消息	'#anchor' HashRouter基于此实现
location.username	域名前指定的用户名	‘user’
location.password	域名前指定的密码	'123456'
方法
location.reload()	功能：重新加载当前页面，传入true，则是强制从服务器加载	location.reload(true)
location.assign(url)	功能：导航到一个新页面	location.assign('http://www.demo.com')
location.replace(url)	功能：导航到一个新页面，但会从历史记录中删除当前页面	location.replace('http://www.demo.com')
location.toString()	功能：返回location.href	<略>
location.valueOf()	功能：返回location引用	<略>

5. history对象

常用属性和方法	说明	示例
history.length	功能：历史会话，栈的长度	<略>
History.prototype.forward()	功能：与浏览器中点击前进按钮相同，加载后一个页面	<略>
Hisotry.prototype.back()	功能：与浏览器中点击后退按钮相同，加载前一个页面	<略>
History.prototype.go(steps)	功能：接收一个整数，表示前进或后退的步数，正整数表示前进，负整数表示后退 输入：number	<略>
History.prototype.pushState(state, '', url)	功能：增加历史记录，但不会重新加载页面 点击“后退”按钮，会在window对象上触发popstate事件，事件对象有一个state对象	BrowserRouter基于此实现
History.prototype.replaceState(state, '')	功能：替换状态，但不增加历史记录，但不会重新加载页面	<略>
History.prototype.state	功能：返回栈顶状态对象	<略>

6. navigator对象

        navigator对象包含浏览器的信息，属性比较多，这里列出几个常用的属性。

常用属性 （仅列出一部分）	说明	示例
appCodeName	非Mozilla浏览器也会返回‘Mozilla’	<略>
appName	浏览器全名	<略>
appVersion	浏览器版本，通常不是实际浏览器版本	<略>
cookieEnabled	启用Cookie	<略>
geolocation	地理信息	<略>
mimeTypes	浏览器中注册的MIME类型数组	<略>
plugins	浏览器安装的插件数组	<略>
userAgent	浏览器的用户代理字符串	<略>

注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~