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

2023-12-21 13:46:26
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:123456@www.test.com:8080

/src/index/?page_no=1&page_size=10#anchor'

location.originURL的源地址（只读）'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.searchURL中的查询字符串，以?开始'?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浏览器的用户代理字符串<略>

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

文章来源:https://blog.csdn.net/weixin_45620943/article/details/135124116
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。