BOM——浏览器对象模型
作用
BOM可以使我们通过JS来操作浏览器
BOM对象
在BOM中为我们提供了一组对象,用来完成对浏览器的操作
BOM对象:
window
代表的是整个浏览器的窗口,同时window也是网页中的全局对象Navigator
-代表的当前浏览器的信息.,通过该对象可以来识别不同的浏览器Location
-代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面History
代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页而且该操作只在当次访问时有效screen
代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息
(1)Navigator
Navigator:代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
但是由于历史原因,Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
userAgent
—般我们只会使用Navigator的userAgent
属性来判断浏览器的信息,userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容,不同的浏览器会有不同的userAgent。
<script>
window.onload =function(){
alert(navigator.userAgent);
}
</script>
输出:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36
判断是什么浏览器
在IE11中已经将微软和工E相关的标识都已经去除了,所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了。
<script>
window.onload =function(){
var ua = navigator.userAgent;
if(/firefox/i.test(ua)){
alert("火狐浏览器");
}else if(/chrome/i.test(ua)){
alert("Chrome浏览器");
}else if(/MSIE/i.test(ua)){
alert("IE浏览器");
}
}
</script>
问题:IE11中没有 MSIE
字样。
所以我们去寻找IE中有其他浏览器中没有的对象去判断:如ActiveXobject
<script>
window.onload =function(){
var ua = navigator.userAgent;
if(/firefox/i.test(ua)){
alert("火狐浏览器");
}else if(/chrome/i.test(ua)){
alert("Chrome浏览器");
}else if("ActiveXObject" in window){
alert("IE浏览器");
}
}
</script>
(2)History
可以用来操作向前向后翻页
属性:
- length属性,可以获取到当前访问的链接(网页)的数量。
方法
- back() 返回到上一个页面 ,和浏览器的回退按钮一样。
- forward() 课题跳转到下一个页面,和浏览器的前进按钮一样。
- go() 跳转到某一个指定的页面。
它需要一个整数作为参数
1:表示向前跳转—个页面
2:表示向前跳转两个页面
-2:表示向后跳转两个页面
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
window.onload =function(){
// alert("访问了"+history.length+"个页面");
var btn =document.getElementById("btn");
btn.onclick=function(){
// 回退到上一个页面
history.back();
}
var btn2 =document.getElementById("btn2");
btn2.onclick=function(){
// 回退到上一个页面
history.go(-2);
}
}
</script>
</head>
<body>
<h1>History</h1>
<button id="btn">点我回退</button>
<button id="btn2">点我回退2个页面</button>
</body>
</html>
(3)Location
- 直接打印
location
获取浏览器地址栏信息
<script>
window.onload = function () {
var btn = document.getElementById("btn");
btn.onclick = function () {
alert(location);
};
};
</script>
- 修改location的值可以跳转到对应的页面
可以使用绝对路径也可以使用相对路径。
<script>
window.onload = function () {
var btn = document.getElementById("btn");
btn.onclick = function () {
// location = "https://www.baidu.com/";
location ="target.html";
};
};
</script>
即,如果直接将location属性修改为一个完整的路径,或相对路径,则我们页面会自动跳转到该路径,并且会生成相应的历史记录
- 方法:assign():加载新的文档
用来跳转到新的页面,和直接修改location的效果一样。
<script>
window.onload = function () {
var btn = document.getElementById("btn");
btn.onclick = function () {
// location ="target.html";
location.assign("target.html");
};
};
</script>
-
方法:reload() 重新加载当前页面——刷新
可以有参数:reload(true)
:代表强制清空缓存,书刷新页面。
强制清空缓存的作用:如果不是强制清空缓存,输入框的内容在刷新后仍然存在,强制清空缓存将输入框中缓存的内容也删除掉。 -
方法:replace() 用一个新的页面替换当前页面,即跳转页面。但是他不会生成历史记录,不能使用回退按钮。
(4)window
方法:
循环定时器
setInterval()
:按时调用函数
eg:实现数字的自动切换
JS的程序的执行速度是非常非常快的,如果希望一段程序,可以每间隔一段时间执行一次(循环执行),可以使用定时调用函数。
参数:
- 回调函数,该函数会每隔一段时间被调用一次
- 每次调用间隔的时间,单位是毫秒
setInterval()的返回值:返回一个Number类型的数据这个数字用来作为定时器的唯一标识。
clearInterval()
:关闭定时器,参数:是定时器的标识。
clearInterval()可以接收任意参数,如果参数是一个有效的定时器的标识,则停止对应的定时器如果参数不是一个有效的标识,则什么也不做。
eg:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<script>
window.onload=function(){
var count = document.getElementById("count");
var num = 1;
var timer= setInterval(function(){
count.innerHTML = ++num;
if(num==10)
clearInterval(timer);
}, 100);
// alert(timer);
}
</script>
</head>
<body>
<h1 id="count">1</h1>
</body>
</html>
延时定时器
setTimeout
延时调用:一个函数不马上执行,隔一段时间才执行,执行且只执行一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
var num =1;
// 定时调用:每隔一段时间执行一次,调用多次
setInterval(function(){
alert(num++);
},3000);
// 延时调用:一个函数不马上执行,隔一段时间才执行,执行且只执行一次
var timer =setTimeout(function(){
alert(num++);
},3000);
clearTimeout(timer);//关闭延时调用
</script>
</head>
<body>
</body>
</html>