41.BOM

发表于 | 分类于

BOM

  1. 什么是BOM?
    DOM就是一套操作HTML标签的API(接口/方法/属性)
    BOM就是一套操作浏览器的API(接口/方法/属性)

  2. BOM中常见的对象
    window: 代表整个浏览器窗口
    注意: window是BOM中的一个对象, 并且是一个顶级的对象(全局)
    Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器
    Location: 代表浏览器地址栏的信息, 通过Location我们就能设置或者获取当前地址信息
    History: 代表浏览器的历史信息, 通过History来实现刷新/上一步/下一步
    注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿到当前的历史记录
    Screen: 代表用户的屏幕信息

​ 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器

1
2
3
4
5
6
7
8
9
10
11
// 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浏览器");
}

Location

代表浏览器地址栏的信息, 通过Location我们就能设置或者获取当前地址信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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);
}
// 设置当前地址栏的地址
oBtn2.onclick = function(){
    window.location.href = "http://www.it666.com";
}
// 重新加载界面
oBtn3.onclick = function(){
    window.location.reload();
}
oBtn4.onclick = function(){
    window.location.reload(true);
}

History上

代表浏览器的历史信息, 通过History来实现刷新/前进/后退，主要利用到了go

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 
// 注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿到当前的历史记录
let oBtn1 = document.querySelector("#btn1");
let oBtn2 = document.querySelector("#btn2");
// 前进
/*
注意点:
只有当前访问过其它的界面, 才能通过forward/go方法前进
如果给go方法传递1, 就代表前进1个界面, 传递2就代表进行2个界面
*/
oBtn1.onclick = function () {
    // window.history.forward();
    window.history.go(1);
}
// 刷新
// 如果给go方法传递0, 就代表刷新
oBtn2.onclick = function () {
    window.history.go(0);
}
  • go参数为正数，代表前进，类似forward();0就不动，原地

History下

1
2
3
4
5
6
7
8
9
10
11
12
13
 // History:   代表浏览器的历史信息, 通过History来实现刷新/上一步/下一步
 let oBtn1 = document.querySelector("#btn1");

 // 后退
 /*
注意点:
只有当前访问过其它的界面, back/go方法后退
如果给go方法传递-1, 就代表后退1个界面, 传递-2就代表后退2个界面
*/
 oBtn1.onclick = function () {
     // window.history.back();
     window.history.go(-1);
 }
  • 如果给go方法传递-1, 就代表后退1个界面, 传递-2就代表后退2个界面