认识BOM

1、认识BOM
- 2、常见操作对象
- - 3、常见操作属性
  - - 4.常见的操作事件
案例吸顶菜单
- 小总结

项目开发中，经常会遇到处理浏览器版本兼容性问题，我们如何判断用户使用的浏览器到底是哪一款浏览器？是浏览器的哪个版本？然后怎样给用户一个友好的提示？
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思维导图

JavaScript BOM相关推荐

javascript BOM对象详解
javascript BOM对象详解目标:本章节将分为9点详细介绍有关BOM对象的知识点 1.什么是BOM 2.BOM的构成 3.顶级对象window 4.window对象常见事件(页面加载事件和体 ...
JavaScript (八) -- JavaScript BOM
目录 1. JavaScript BOM的概述: 2. Window 对象(浏览器窗口对象) 2.1 Window 对象的调用方式:
JavaScript Bom和Dom
JavaScript Bom和Dom这一篇就够啦 JavaScript Bom和Dom 1.Web API 基本认知 2.DOM -- 基础 2.1 DOM简介 2.2 获取元素 2.3 事件基础 2 ...
JavaScript——BOM知识
BOM概述 BOM(浏览器对象模型,Browser Object Model),即可以将浏览器的各个部分抽象成对象在JavaScript中进行调用和完成特定的功能.比如对历史记录,地址栏,整个窗口等都 ...
Javascript（十三）javascript BOM详解
一.BOM定义 ECMAScript无疑是JavaScript的核心,但是要想在浏览器中使用JavaScript,那么BOM(浏览器对象模型) 才是真正的核心. BOM 提供了很多对象,用于访问浏览器 ...
Java JavaScript BOM和正则表达式
一.作业二.BOM 浏览器对象模型 (BOM-Browser Object Model) 使 JavaScript 有能力与浏览器"对话". 由于现代浏览器已经(几乎)实现了 J ...
JavaScript:BOM
目录一.BOM介绍 1.BOM的构成二.window对象常用方法 1.窗口加载事件 2.window.onresize 3.confirm()方法 4.open()方法 5.setTimeout( ...
JavaScript BOM浏览器对象模型
什么是BOM浏览器对象模型? 浏览器对象模型(Browser Object Model(BOM))允许JavaScript与浏览器对话 BOM:浏览器对象模型 //宿主对象 BOM 提供了很多对象,用 ...
javascript BOM与DOM介绍
Javascript中bom介绍 IE 3.0 和Netscape Navigator 3.0提供了一种特性- BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用BOM,开发者可以移动窗口 ...
JavaScript BOM对象和DOM对象(DHTML)
一.BOM对象 BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作;使用BOM,开发者可以移动窗口/改变状态栏中的文本/执行其他与页面内容不直接相关的动作功能:使JS有能力与浏览器" ...

JavaScript BOM

认识BOM

1、认识BOM

2、常见操作对象

3、常见操作属性

4.常见的操作事件

案例吸顶菜单

小总结

JavaScript BOM相关推荐

最新文章

热门文章

JavaScript BOM

认识BOM

1、认识BOM

2、常见操作对象

3、常见操作属性

4.常见的操作事件

案例 吸顶菜单

小总结

JavaScript BOM相关推荐

最新文章

热门文章

案例吸顶菜单