项目开发中，经常会遇到处理浏览器版本兼容性问题，我们如何判断用户使用的浏览器到底是哪一款浏览器？是浏览器的哪个版本？然后怎样给用户一个友好的提示？
JavaScript 标准语法中提供了一个对象模型：浏览器对象模型/ BOM ，可以用来操作和浏览器软件相关的各种信息
1、认识BOM
BOM ： Browser(浏览器) Object(对象) Model(模型) ，描述了 JavaScript 代码中访问和操作浏览器的各种信息的一系列特殊对象，包含了 浏览器窗口对象、地址信息对象、历史访问对象、版本信息对象、网页文档对象
- 窗口对象：可以操作浏览器弹窗、获取/设置浏览器尺寸、获取/设置浏览器位置等等
- 地址对象：可以操作浏览器访问 url 地址，实现根据地址切换不同页面
- 历史对象：可以操作浏览器访问历史记录
- 版本对象：可以获取浏览器和当前运行浏览器的操作系统信息
- 文档对象： BOM 对象，描述了当前浏览器打开的网页文档
2、常见操作对象
常见 BOM 对象：
- 窗口对象： window alert() / confirm() / prompt() / 其他bom对象…
- 地址对象： location || window.location href ：地址 url 信息
- 历史对象： history back() 后退 forward() 前进go() 访问某个记录
- 版本信息： navigator appName ：浏览器内核名称appVersion ： 浏览器版本信息 userAgent ：浏览器相关信息，一般和版本信息相同
- 文档对象： document 文档对象，当前浏览器打开的网页文档
- 屏幕对象： screen 当前计算机屏幕信息
3、常见操作属性
① window 属性
- 弹窗属性
- alert()/confirm()… ，一般实际项目中很少使用（不同浏览器 弹窗样式差异、弹窗影响网页加载）
- open()/close() ：代码直接打开新的网页、关闭网页
示例如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1、window属性
window.alert("弹窗")
window.open("http://www.baidu.com", "_blank")
var _open = document.getElementById("open")
_open.onclick = function() {
for(var i = 0; i < 10; i++ ) {
window.open("http://www.baidu.com", "_blank")
}
}
// 如：网站中一个登录的用户，点击按钮：退出并关闭窗口，通过close()实现
var _close = document.getElementById("close")
_close.onclick = function() {
window.close()
}
</script>
</body>
</html>
② location 地址信息：
href 属性：用于控制浏览器地址栏，一般用于代码中完成网页跳转或者刷新页面
示例如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lacation地址信息</title>
</head>
<body>
<script>
// 2、location对象.
// 实现页面的点击跳转，类似超链接功能，比超链接功能强大（可以在跳转页面时 编写逻辑代码实现一些功能）
var _baidu = document.getElementById("baidu")
_baidu.onclick = function() {
// 跳转网页
location.href = "http://www.baidu.com/s?wd=明日战记"
}
//实现当前页面刷新
var _refresh = document.getElementById("refresh")
_refresh.onclick = function() {
location.href = "#" // 一般这里写的都是当前网页网址
}
</script>
</body>
</html>
③ history 历史访问记录
- back() / forward()
- go()
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// history对象
var _b = document.getElementById("b");
var _f = document.getElementById("f");
var _back = document.getElementById("back");
_b.onclick = function () {
// 访问上一条记录
history.back();
};
_f.onclick = function () {
// 访问下一条记录
history.forward();
};
_back.onclick = function () {
// 访问上一条记录
history.go(-1);
};
</script>
</body>
</html>
拓展：面试题，请描述一下 location.go(-1) 和 history.go(-1) 有什么区别？
· 两个函数都可以用于页面回到上一页， location.go() 需要插件支持
· location.go(-1) ，回到上一页并且刷新页面
· history.go(-1) ，回到上一页
④ navigator 浏览器版本：经常用于判断浏览器产品和版本是否满足网站运行条件
- userAgent
- appName
- appVersion
- 注意：一般很少自己开发软件或者版本验证，都是直接添加第三方插件
4.常见的操作事件
浏览器对象模型 BOM 提供了一些重要的事件操作，可以让开发人员通过代码直接控制浏览器中的操作系统，如滚动条行为等等
- onload ：网页文档加载事件，当前网页中所有的标签加载完成后才会执行的事件代码
onresize ：浏览器窗口尺寸变化事件，浏览器窗口大小发生变化时执行
浏览器宽度高度： window.innerWidth/outerWidth | window.innerHeight/outerHeight
网页宽度高度：
通用： document.body.cilentHeight ||document.documentELement.clientHeight
苹果浏览器(了解)： window.paegYOffset / pageXOffset
onscroll ：浏览器滚动条事件，浏览器网页中滚动条一旦发生位移就会触发
scrollTop ：滚动条卷去网页的高度 / 滚动条滚动的高度
scrollLeft ：水平滚动条卷去网页的宽度 / 水平滚动条滚动的宽度
案例 吸顶菜单
代码示例如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#nav {
width: 100%;
height: 50px;
background: orangered;
color: white;
font-size: 22px;
text-align: center;
line-height: 50px;
}
#content{
width:100%;
height:2000px;
background-color: rgba(65, 158, 127, 0.57);
}
#content span{
display: block;
font-size: 300px;
position: fixed;
margin-left: 200px;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="nav">页面顶部菜单</div>
<div id="content"> <span>content</span> </div>
<script>
// 网页加载事件：代码写在body的前面，保障标签加载完成后执行代码
window.onload = function () {
// 获取导航条
var _nav = document.getElementById("nav");
// 滚动条事件
window.onscroll = function () {
// 获取滚动条高度
var top =
document.body.scrollTop || document.documentElement.scrollTop;
console.log(top, "滚动条");
// 判断滚动条位置，并设置菜单样式
if (top >= 500) {
_nav.style.position = "fixed";
_nav.style.left = 0;
_nav.style.top = 0;
} else {
_nav.style.position = "relative";
}
};
};
</script>
</body>
</html>
小总结
BOM ： Browser Object Model 浏览器对象模型，描述了通过 js 代码控制浏览器一些基础信息完成网页功能的操作，包含的内置对象：
- window 窗口对象
- location 地址对象
- history 历史记录对象
- navigator 版本信息对象
- screen 屏幕对象
- document 网页文档对象
比较重要的属性：
- window.innerHeight / window.innerWidth : 窗口尺寸
- window.onload / window.onresize / window.onscroll ：事件操作
- location.href ：访问地址
- history.back() / forward() / go() ：访问历史记录
- navigator.appName / appVersion / userAgent 浏览器版本信息
BOM思维导图
🆗 🆗 🆗 散会！！！