一、BOM的screen对象
window.screen对象 包含有关用户屏幕的信息
console.log(window.screen);
http://127.0.0.1:5500
availLeft: 1920
availTop: 0
availWidth: 1920 可用宽度
availHeight: 1032 可以高度
colorDepth: 24 色彩深度
pixelDepth: 24 色彩分辨率
width: 1920 屏幕的宽
height: 1080 屏幕的高
px 像素 图像元素 picture element
二、BOM的navigator对象
window.navigator对象 包含有感访问者浏览器的信息
console.log(window.navigator);
appCodeName 返回浏览器的代码名
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本号
cookieEnabled 返回是否启用cookie
language 返回浏览器语言
languages 返回代理语言
platform 返回浏览器运行的操作平台
product 浏览器内核
userAgent 返回由客户机发送服务器的user-agent头部的值 用户代理
三、BOM的history对象
window.history对象 包含浏览器的历史
console.log(window.history);
属性
length 返回历史记录/列表中的网址数
scrollRestoration 允许应用程序在历史导航上显式的设置默认滚动回复行为
auto 恢复用户已滚动到的页面上的位置
manual 未还原上页的位置
window.history.scrollRestoration="manual";
state:null 状态
方法
back() 加载history列表中的前一个URL 后退
forword() 加载history列表中的下一个URL 前进
go(number) 加载history列表中的某个具体页面 -1 1 2 3 4
aBnts[1].onclick=function(){
window.history.forward()
}
aBnts[2].onclick=function(){
window.history.go(2)
}
四、BOM的history对象state相关
window.history对象 包含浏览器的历史
console.log(window.history);
属性
length 返回历史记录/列表中的网址数
scrollRestoration 允许应用程序在历史导航上显式的设置默认滚动回复行为
auto 恢复用户已滚动到的页面上的位置
manual 未还原上页的位置
state:null 状态
方法
pushState(stateObj,title,URL) 向当前浏览器的history中添加一个状态
aBnts[3].onclick=function(){
window.history.pushState({page:1},"标题01","index.html")
}
replaceState(stateObj,title,URL) 修改浏览器当前history的实体状态
aBnts[4].onclick=function(){
window.history.replaceState({page:2},"标题02","index.html")
}
五、BOM的location对象
window.location对象 用于获取当前页面的地址(URL),并把浏览器重定向到新的页面
console.log(window.location);
href 获取或设置完整的URL
console.log(decodeURI(window.location.href));
//http://127.0.0.1:5500/JavaScript/BOM/BOM中的对象/05BOM的location对象.html
document.getElementsByTagName("button")[0].onclick=function(){
window.location.href="index.html"
}
href: "http://127.0.0.1:5500/JavaScript/BOM/BOM中的对象/05BOM的location对象.html"
http://127.0.0.1:5500/JavaScript/BOM/BOM中的对象/01BOM的screen对象.html
http://127.0.0.1:5500/JavaScript/DOM/0505/03事件捕获.html
protocol 返回URL的协议http(超文本传输协议)https(加密) file(本地文件) ftp(文件传输协议)
protocol: "http:"
hostname 返回主机名 域名(网址) ip地址
hostname: "127.0.0.1"
port 返回一个URL服务器使用的端口号
port: "5500"
host 返回主机名加端口号
host: "127.0.0.1:5500"
源 返回一个URL的协议,主机名,端口号
origin: "http://127.0.0.1:5500"
同源策略
pathname 返回URL的路径名 资源在当前服务器上的地址
pathname: "/JavaScript/BOM/BOM中的对象/05BOM的location对象.html"
hash 返回URL的锚的部分 #后面的部分(包含#)
hash: ""
search 返回URL的查询部分 ?后面的部分(包含?)
search: ""
https://detail.tmall.com/item.htm?id=670078399035&spm=a21bo.jianhua/evo255811b326289.201876.12.5af911d9tfCikL&scm=1007.34127.211940.0&pvid=b9ec14ad-64c1-491b-a1fa-1a2d737219bd
https://detail.tmall.com/item.htm?id=668504272466&spm=a21bo.jianhua/evo255811b326289.201876.13.5af911d9tfCikL&scm=1007.34127.211940.0&pvid=b9ec14ad-64c1-491b-a1fa-1a2d737219bd&sku_properties=20509:28383