【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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。