1-JavaScript - BOM
about
浏览器对象模型(BOM,Browser Object Model)，专门用来完成对浏览器的各种操作。
BOM这部分，内容不多，主要包括：
- Window：代表的是浏览器的窗口。
- History：代表的是浏览器的历史记录。
- Location：代表的是浏览器的地址。
- Navigator：代表浏览器的信息。
- Screen：代表的是设备屏幕信息。
注意，BOM对象都是window对象的属性，所以可以通过window访问，也可以直接访问：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 直接访问
console.log(navigator);
// 通过window对象访问
console.log(window.navigator);
</script>
</body>
</html>
以上两种访问方式是等价的。
Window
window对象我们已经不陌生了，它代表的是浏览器的窗口对象，一些属性和方法我们也使用过，所以这里不在多表，可以参考：
History
由于隐私的原因，history无法访问具体的历史记录，只能用来控制浏览器向前向后翻页。
| 方法 | 描述 |
|---|---|
history.length |
当前窗口中，历史记录的数量 |
history.forward() |
向前跳转 |
history.back() |
向后跳转 |
history.go(number) |
跳转到历史记录中的第几个网址 |
注意，history是个只读属性，也就意味着，我们无法清空历史记录，从而达到禁止浏览器回退的目的，如果有此需求，最快捷的可用方式是使用window.location.replace()方法，提供指定的 URL 来替换当前的会话历史（session history）。
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/history
Location
location用来处理跟地址栏相关的信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">点我</button>
<script>
let bd = 'https://www.baidu.com';
let btn = document.getElementById('btn');
btn.addEventListener('click', function () {
// 获取完整的地址栏信息
// console.log(location);
// console.log(location.hostname); // localhost
// console.log(location.host); // localhost:63342
// console.log(location.protocol); // http:
// console.log(location.port); // 63342
// console.log(location.origin); // http://localhost:63342
// console.log(location.href); // http://localhost:63342/web/05.html?_ijt=usak6gkrt769ri6j80u28k7aij
// 跳转到指定地址，会保留历史记录
// location = bd;
// 跳转到指定地址，会保留历史记录
// location.assign(bd);
// 跳转到指定地址，不会保留历史记录，即无法通过回退按钮回退
// location.replace(bd);
// 刷新当前页
// location.reload();
});
</script>
</body>
</html>
获取地址栏中的中文字符
有些时候，我们需要获取地址栏中的中文，比如获取name=张开，而这个张开通常会进行转义b.html?name=%E5%BC%A0%E5%BC%80，那么如果需要在页面中使用这个参数值，就需要进行decode转义回来。
这里主要用到了decodeURIComponent方法，具体用法参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent
也来个示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<input type="text" id="msg">
<button type="button" id="btn">获取url上的中文</button>
<button type="button" id="add">添加参数</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<script>
// 懒得手动填地址栏输入参数值，就点击button按钮搞了
var path = window.location.href;
$("#add").click(function () {
window.location.href = path + "?name=张开";
})
// 获取参数值
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return (r[2]);
return null;
}
// 获取地址栏上指定参数的值，并展示到input框中
$("#btn").click(function () {
console.log('原始url： ', window.location.href)
var sname = GetQueryString("name");
if (sname != null) {
var sname_ = decodeURIComponent(sname);
alert(sname_);
}
var value = GetQueryString("name");
$("#msg").val(decodeURIComponent(value));
})
</script>
</body>
</html>
参考：
Navigator
navigator标识浏览器的信息，可以通过navigator来识别不同的浏览器，但现在，navigator中大部分属性都没有什么使用价值了！唯一一个还有那么点价值的就是userAgent了，一起来看看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">点我</button>
<script>
// 由于ie老版本不支持let关键字，所以，声明变量还是用的var
var btn = document.getElementById('btn');
btn.onclick = function () {
/*
* userAgent:
* chrome Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36
* firefox Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0
* IE11 Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko
* IE10 Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
* IE9 Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
* IE8 Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
* IE7 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
* IE5 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
* */
var ua = navigator.userAgent;
if ('ActiveXObject' in window) { // ActiveXObject是ie独有的属性，可以判断当前浏览器的身份是否是ie
alert('你是ie');
} else if (ua.indexOf('Chrome') !== -1) { // 其他浏览器就可以去ua中判断是否包含对应的浏览器的名字了
alert('你是chrome');
} else if (ua.indexOf('Firefox') !== -1) {
alert('你是Firefox');
}
};
</script>
</body>
</html>
Screen
window.screen 对象包含用户屏幕的信息，对我们来说，用的不多。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
console.log(screen.width); // 返回以像素计的访问者屏幕宽度。
console.log(screen.height); // 返回以像素计的访问者屏幕的高度。
console.log(screen.availWidth); // 返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。
console.log(screen.availHeight); // 返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征。
console.log(screen.colorDepth); // 返回用于显示一种颜色的比特数。
console.log(screen.pixelDepth); // 返回屏幕的像素深度。
</script>
</body>
</html>
that's all
