BOM

用户7428254102502
145 阅读5分钟

BOM

BOM是三个单词的首拼--Browser Object Model，即浏览器对象模型。

既然是对象模型，那么所有内容，都是用对象来描述的。

BOM中最大的对象叫window，是浏览器窗口对象。他包含了很多浏览器的操作。

浏览器的信息

浏览器的名称、版本等信息。关于浏览器的信息，window交给了他的子对象navigator去记录。

console.log(window.navigator.appCodeName); // 返回浏览器的代码名
console.log(window.navigator.appName); // 返回浏览器的名称
console.log(window.navigator.appVersion); // 返回浏览器的平台和版本信息
console.log(window.navigator.cookieEnabled); // 返回指明浏览器是否启用cookie的布尔值
console.log(window.navigator.platform); // 返回运行浏览器的操作系统平台
console.log(window.navigator.userAgent); // 返回由客户机发送服务器的user-agent头部的值

使用说明：其实navigator对象是属于window对象的，但是window是所有对象的顶级对象，所以通常在写的时候，可以省略掉window。

浏览器的历史记录

历史记录的操作是window的子对象history。可以操作网页的前进和后退。


history.back(); # 返回到上一个页面，相当于浏览器的后退按钮
history.forward(); # 前进到下一个页面（下一个页面必须是点击以后的页面），相当于浏览器的前进按钮
history.go()

浏览器的地址栏信息

浏览器的地址栏操作，window对象交给了自己的子对象location对象去处理。


console.log(location.hash); // 设置或返回从#开始的url --- 锚点
console.log(location.href); // 设置或返回完整的的url
console.log(location.search); // 设置或返回url中的参数部分

方法：


语法：
    location.assign("要跳转的地址"); # 这个方法是设置要跳转的地址
    location.reload(); # 重新加载本页面
    location.replace() # 使用新地址替换掉旧地址（跳转）

浏览器的弹出层


window.alert("恭喜你！");
window.prompt("请输入数字：",1);
window.confirm("你确定要删除吗？")

浏览器窗口尺寸

  • window.innerHeight - 浏览器窗口的高度
  • window.innerWidth - 浏览器窗口的宽度

var w = window.innerWidth;
console.log(w);
var h = window.innerHeight;
console.log(h);

说明：

  1. 这两个属性返回的单位是像素
  2. 这两个属性计算的范围包含滚动条的区域

浏览器的事件

onload事件：当网页中的所有资源都加在完成之后执行这个事件


window.onload = function(){
    console.log("当网页中所有资源加载完成才打印");
}

使用说明：通常是将script标签放到head标签中的时候使用。因为放在head中默认是获取不到body中的内容的，但是有了这个事件后，就可以了。

onscroll 滚动事件：当网页滚动条的位置发生改变的时候触发这个事件


window.onscroll = function () {
  console.log('浏览器滚动了')
}

使用说明：浏览器要有滚动条才行。

浏览器窗口改变事件：resize


window.onresize = function(){
    // 当浏览器的窗口大小发生改变的时候触发这个事件
}

浏览器滚动的距离

获取文档向下滚动的距离，以下两个都可以：

  • document.documentElement.scrollTop
  • document.body.scrollTop

window.onscroll = function () {
  var t = document.documentElement.scrollTop;
  console.log(t);
  var t1 = document.body.scrollTop;
  console.log(t1);
}

使用说明：这两个的区别在于当前文档有没有doctype，有就用document.documentElement.scrollTop，没有就用document.body.scrollTop

获取页面向右滚动的距离：

  • document.body.scrollLeft
  • document.documentElement.scrollLeft

使用方式同上。

使用兼容写法：


var t = document.documentElement.scrollTop || document.body.scrollTop;
var l = document.documentElement.scrollLeft || document.body.scrollLeft;

定时器

延迟执行：


var timerId = setTimeout(function () {
  console.log('我执行了')
}, 1000)
console.log(timerId) // 1

使用说明：第一个参数是要执行的函数，第二个参数延迟的时间（单位毫秒）。返回一个数字，表示当前页面中第几个定时器。

每间隔一段时间执行：


var timerId = setInterval(function () {
  console.log('我执行了')
}, 1000)

使用说明：第一个参数是要执行的函数，第二个参数是间隔的时间（单位毫秒）。返回一个数字，表示当前页面中第几个定时器。

关闭定时器：

定时器返回的数字，就是用来关闭定时器的


clearTimeout(timerId); // 关闭延迟执行的定时器
clearInterval(timerId); // 关闭间隔执行的定时器

使用说明：其实这两个方法可以混用。


var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)
// 关闭延迟执行定时器
clearInterval(timerId)
​
var timerId2 = setInterval(function () {
  console.log('间隔定时器')
}, 1000)
// 关闭间隔定时器
clearTimeout(timerId2)

异步操作

定时器是我们在学习js中碰到的第一个异步代码

同步：一件事情要执行，必须等待另一个事情完成才可以进行

异步：两件事情互不干扰，各干各的，同一时间，两件事情在同时进行

同步代码：代码需要按照顺序，前面的代码执行结束了，后面的代码才可以进行

异步代码：两段代码同时执行，互不干扰

在js中，异步代码，执行流程：

js执行代码的内存：调用栈
从上到下将每一行代码放到调用栈中执行，
    被执行的代码是同步代码，直接执行
    被执行的代码是异步代码，将异步代码放在浏览器中开始计时
此时，js在执行同步代码，浏览器在计时
当浏览器中倒计时到时间了，有一段代码应该被执行了，但是浏览器不会执行这段的，会将这段代码放在
一个队列中，等待执行
当调用栈将所有的同步代码执行结束以后，会去队列中，找是否有需要执行的代码，如果有就执行，如果
没有，就过一段时间再到队列中找一次

我们没有说这是异步代码，代码就是同步的，目前为止，只有定时器是异步代码

avatar
文章
阅读
粉丝