BOM(Browser object Model)
:浏览器对象模型,也就是通过代码来操作浏览器的一些能力。
可以操作哪些内容?
-
获取一些浏览器的相关信息(如:窗口大小等)
-
操作浏览器进行页面的跳转
-
获取当前浏览器地址栏的信息
-
操作浏览器的滚动条
-
浏览器的信息(如:浏览器的版本信息)
-
让浏览器出现一个弹出框(alert/prompt/confirm)
-
...
BOM的核心是window对象。window是浏览器内置的一个对象,里面包含着操作浏览器的方法。
注意:事件和对象不同,在使用window上的方法时不可以省略window,但如果是在使用window下的对象时,可以省略window。
目录
★sessionStorage和localStorage的区别
1、获取浏览器窗口的尺寸
1)、innerWidth和innerHeight
这两个方法分别是用来获取浏览器可视窗口的高度和宽度(包含滚动条)。
var windowHeight=window.innerHeight //直接innerHeight也可以
var windowWidth=window.innerWidth
console.log(windowHeight)
console.log(windowWidth)
2)、outerWidth和outerHeight
这两个方法用来获取整个浏览器的完整大小,包括顶部地址栏和标签页部分。
var windowHeight=window.outerHeight
var windowWidth=window.outerWidth
console.log(windowHeight)
console.log(windowWidth)
3)、screen.width
和screen.height
获取整个电脑屏幕的大小,每个人的电脑分辨率是不一样的。
var scwidth=screen.width
var scheight=screen.height
console.log(scwidth)
console.log(scheight)
2、浏览器的弹出层
window.alert("提示信息")--提示框
window.confirm("提示信息")--询问框 点击确定是true,取消是false
window.prompt("提示信息")--输入框 输入内容点击确定是输入的内容,点击取消是null
注意:弹出层会阻塞后续代码的执行,得用户点击按钮之后,才会执行后续代码。
3、浏览器的地址栏
在window中有一个对象叫做location,是专门用于存储浏览器的地址栏内的信息的。
1)、location.href
这个属性存储的是浏览器地址栏内url地址的信息。
console.log(window.location.href) // 直接location.href也可以
也可以给这个属性进行赋值操作。
window.location.href="./index.html" //其他网站也可以
2)、location.replace
用于替换当前地址栏内的地址。
btn.onclick=function(){
location.replace("新地址")
}
3)、location.reload()
该属性是用于刷新页面的。
xxx.onclick=function(){
location.reload()
}
4、浏览器事件
1)、onload事件
该事件是在页面所有资源加载完毕之后执行的。
window.onload=function(){
console.log("页面资源已经加载完成")
}
2)、onresize事件
该事件是在浏览器的可视窗口尺寸被改变时会触发的事件。
window.onresize = function () {
console.log("尺寸被改变了");
};
3)、onscroll事件
该事件在浏览器滚动条滚动时触发。
window.onscroll=function(){
console.log("滚动条在滚动")
}
4)、获取浏览器滚动距离
有<!DOTYPE html>
时使用:document.documentElement.scrollTop
当没有<!DOCTYPE html>
时使用:document.body.scrollTop
//通过document.documentElement.scrollTop获取距离
// window.onscroll = function () {
// // scrollTop指的是窗口顶端距离滚动条顶端的距离
// console.log(document.documentElement.scrollTop);
// };
// 当没有<!DOCTYPE html>时,会发现该方法失效,不能获取滚动的距离。
// 此时应该将documentElement换成body
window.onscroll = function () {
// scrollTop指的是窗口顶端距离滚动条顶端的距离
console.log(document.body.scrollTop);
};
注意:当存在<!DOCTYPE html>
时,使用document.body.scrollTop也不会获取到值。
说明该方法存在浏览器版本的兼容性问题。
解决办法:使用兼容性写法。
window.onscroll=function(){
console.log(document.documentElement.scrollTop || document.body.scrollTop)
//使用逻辑运算符 || ,当有一个获取到的值为0时,就使用另一个方法。
}
上面的两种写法都是获取到的纵向滚动条的距离,还可以获取横向滚动条的距离。
通过:document.documentElement/body.scrollLeft
window.onscroll=function(){
console.log(document.documentElement.scrollLeft || document.body.scrollLeft)
}
5)、回到顶部事件
在浏览器往下或者往右滚动到一定距离时,有时候希望能够一下子就回到最开始的位置,或者是跳转到页面的指定位置,可以通过:scrollTo(x,y)事件实现。
scrollTo的两个参数:
x:表示窗口横坐标,0表示浏览器的原始位置横坐标;
y:表示窗口纵坐标,0表示浏览器的原始位置纵坐标
btn.onclick=function(){
window.scrollTo(0,0) //回到浏览器的原始位置
}
除了直接传坐标外,还可以传对象形式的参数,对象中保存的是指定位置的坐标,以及跳转时的效果。
btn.onclick=function(){
window.scrollTo({
left:0,
top:0,
beavior:"smooth" //平滑的移动
})
}
其中,behavior的值有两个,smooth和auto,auto是默认值,smooth表示平滑的移动到指定位置。
6)、open和close事件
window.open(url,target,"配置参数")
:默认新窗口打开指定网址。
window.close()
:关闭当前网页。
// 打开新网页
btn1.onclick=function(){
window.open("http://www.baidu.com","_self")
}
// 关闭当前网页
btn2.onclick=function(){
window.close() //要关闭哪个网页,就xxx.close()
}
注意:
- open的第三个配置参数可以是:width,height,left,top。但如果该项没有传入时,窗口大小和浏览器一样,并和浏览器融于一体;
- 写入第三个实参后,会脱离浏览器并成为一个独立的小窗口,还可以保存起来;
- 宽高不能写的太小,否则设置的宽高会失效;
// 打开新网页
btn1.onclick=function(){
window.open("http://www.baidu.com","_self","width=300,height=200,left=50,top=30")
}
7)、浏览器的历史记录
window中有一个对象叫做history,是专门用来存储历史记录信息的。
history.back()
该方法用于回退历史记录,即回退到前一个页面,相当于浏览器上的⬅按钮。
window.history.back()
但使用这个方法的前提是要有上一条记录,不然就会一直在这个界面,也不会回退。
浏览器会话历史记录处于第一页时调用此方法没有效果,而且也不会报错。
history.forword()
该方法是去到下一个历史记录里面,也就是去下一个页面,相当于浏览器上的➡按钮。
window.history.forword()
前提是之前有过回退操作,不然的话现在就是在最后一个,没有下一个。
当浏览器历史栈处于最顶端时 ( 当前页面处于最后一页时 ) 调用此方法没有效果也不报错。
history.go()
该方法根据传的参数,来决定是前进还是后退。
-
当传入的参数是正数时:前进,并且正数是多少,就前进多少页;
-
当传入的参数是负数时:后退,并且负数的绝对值是多少,就后退多少页;
-
当传入0时:相当于刷新页面;
-
当传入参数超过历史记录长度时,不会报错但也没有效果
8)、浏览器的本地存储
浏览器本地存储又称:WebStorage,存储内容大小一般为 5MB 左右(不同浏览器可能不一样)。
浏览器的存储分为两种:window.localStorage和window.sessionStorage。
localStorage
// 增
localStorage.setItem("name","谭小霖")
// 取
localStorage.getItem("name") //谭小霖
// 删除
localStorage.removeItem("name")
// 清空
localStorage.clear()
sessionStorage
// 增
sessionStorage.setItem("name","谭小霖")
// 取
sessionStorage.getItem("name") //谭小霖
// 删除
sessionStorage.removeItem("name")
// 清空
sessionStorage.clear()
注意1:当要取的值不存在时,返回的结果是null。
注意2:如果要存储的键和在浏览器中已经有的键相同,就是修改。
注意3:存储数据时,只能保存的是字符换类型,如果要存储的类型不是字符串类型的话,那么浏览器会自动地进行转换。
如:存储数字100,当获取时会发现值类型为String。
特殊:存一个对象类型,当获取时会变成[object Object]样子的字符串,不再是原本存储时的样子了。
所以在存储时,需要使用JSON.stringify(对象类型的数据),将对象类型的数据转成JSON格式的字符串;获取时,需要使用JSON.parse(json格式字符串)将json格式字符串解析为对象类型的数据。
★sessionStorage和localStorage的区别
-
sessionStorage会在窗口关闭后消失,是临时存储。;
-
localStorage是保存在磁盘的,只有手动删除才会消失,只要不手动删除就是永久存储。;
使用两个方法如果获取存储的key不存在,就都会返回null。
9)、修改窗口的尺寸和位置
window.resizeTo
:修改窗口尺寸。
window.moveTo
:修改窗口显示位置。
注意:这两个方法,只能用于window.open()
方法,并传入了第三个参数才能生效。
var newW=open("about:blank","_self","width=300,height=100")
btn1.onclick=function(){
newW.resizeTo(新的宽,新的高)
}
btn2.onclick=function(){
newW.moveTo(新的left,新的write)
}
10)、获取浏览器信息
window中的navigator对象,保存了当前浏览器的基本信息,可以使用js判断我们是什么浏览器以及版本型号从而进行兼容性的操作等,类似于css hack。
常用的一般就一个:navigator.userAgent
,能够得到一个字符串,包含着是什么浏览器以及版本号等信息。