BOM 包含 window 对象, 从而包含 DOM
BOM 简介
- 什么是BOM?
- DOM就是一套操作HTML标签的API(接口/方法/属性)
- BOM就是一套操作浏览器的API(接口/方法/属性)
- BOM中常见的对象
- window: 代表整个浏览器窗口 (注意: window是BOM中的一个对象, 并且是一个顶级的对象(全局))
- navigator: 代表当前浏览器的信息, 通过这个对象我们就能判断用户当前是什么浏览器
- location: 代表浏览器地址栏的信息, 通过这个对象我们就能设置或者获取当前地址信息
- history: 代表浏览器的历史信息, 通过这个对象来实现刷新/上一步/下一步 注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿到当前的历史记录
- screen: 代表用户的屏幕信息 ()
BOM 的常用对象
navigator
代表当前浏览器的信息, 通过 navigator.userAgent 我们就能判断用户当前是什么浏览器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript-Navigator</title
</head>
<body>
<script>
// console.log(window.navigator);
var agent = window.navigator.userAgent;
if (/chrome/i.test(agent)) {
alert("当前是谷歌浏览器");
} else if (/firefox/i.test(agent)) {
alert("当前是火狐浏览器");
} else if (/msie/i.test(agent)) {
alert("当前是低级IE浏览器");
} else if ("ActiveXObject" in window) {
alert("当前是高级IE浏览器");
}
</script>
</body>
</html>
location
代表浏览器地址栏的信息, 通过 location.href 我们就能设置或者获取当前地址信息
- 给 location.href 赋值可以实现跳转到指定网址, 这里无法只在地址栏赋值而不跳转
- location.reload()
- location.reload(true)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript-Location</title>
</head>
<body>
<button id="btn1">获取</button>
<button id="btn2">设置</button>
<button id="btn3">刷新</button>
<button id="btn4">强制刷新</button>
<script>
let oBtn1 = document.querySelector("#btn1");
let oBtn2 = document.querySelector("#btn2");
let oBtn3 = document.querySelector("#btn3");
let oBtn4 = document.querySelector("#btn4");
// 获取当前地址栏的地址, 一般就是网址嘛
oBtn1.onclick = function () {
console.log(window.location.href);
};
// 设置当前地址栏的地址, 这里 return false 不管用
oBtn2.onclick = function () {
window.location.href = "http://www.it666.com";
return false;
};
// 刷新页面, 作用相当于按 F5
oBtn3.onclick = function () {
window.location.reload();
};
// 强制刷新页面, 作用相当于按 ctrl + F5
oBtn4.onclick = function () {
window.location.reload(true);
};
</script>
</body>
</html>
history
代表浏览器的历史信息, 通过History来实现刷新/前进/后退
- history.forward()
- history.back()
- history.go(number)
注意点:
- 只有当前访问过其它的界面且有后退, 才能通过 forward/go 方法前进
- 只有当前访问过其它的界面且有得退, 才能通过 back/go 方法后退
- 如果给 go 方法传递 1, 就代表前进 1 个界面, 传递 2 就代表进行 2 个界面 如果给 go 方法传递 -1, 就代表后退 1 个界面, 传递 -2 就代表后退 2 个界面 如果给 go 方法传递 0, 就代表刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript-History1</title>
</head>
<body>
<h1>我是第一个界面</h1>
<button id="btn1">前进</button>
<button id="btn2">刷新</button>
<a href="JavaScript-History2.html">新的界面222</a>
<script>
let oBtn1 = document.querySelector("#btn1");
let oBtn2 = document.querySelector("#btn2");
oBtn1.onclick = function () {
// window.history.forward();
window.history.go(1);
}
// 如果给go方法传递0, 就代表刷新
oBtn2.onclick = function () {
window.history.go(0);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript-History2</title>
</head>
<body>
<h2>我是第2222个界面</h2>
<button id="btn1">后退</button>
<script>
let oBtn1 = document.querySelector("#btn1");
// 如果给go方法传递-1, 就代表后退1个界面, 传递-2就代表后退2个界面
oBtn1.onclick = function () {
// window.history.back();
window.history.go(-1);
}
</script>
</body>
</html>
