BOM概述

什么是 BOM

BOM是Browser Object Model，浏览器对象模型。主要处理浏览器窗口和框架，不过通常浏览器特定的JS扩展都被看做BOM的一部分。
BOM是各个浏览器厂商根据DOM在各自浏览器上的实现，表现为不同浏览器定义有差别，实现方式不同

JS是通过访问 BOM 对象来访问、控制、修改客户端(浏览器)

浏览器对象模型（BOM）可以使我们通过 JS 来操作浏览器，在 BOM 中为我们提供了一组对象，用来完成对浏览器的操作

常见的 BOM 对象如下(下面会详细介绍)：

Window：代表的是 整个浏览器的窗口，同时 window 也是网页中的全局对象
Navigator：代表的是 当前浏览器的信息，通过该对象可以来识别不同的浏览器
Location：代表的是 当前浏览器的地址栏信息，通过该对象可以获取地址栏信息，或者操作浏览器跳转页面
History：代表的是 浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
Screen：代表的是 用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

由于 BOM 的 window 包含 document，因此可以直接使用 window 对象的 document 属性，通过 document 属性就可以访问、检索、修改 XHTML 文档内容与结构。因为 document 对象又是 DOM 的根节点

BOM对象的详细使用

BOM 对象在浏览器中都是作为 window 对象的属性保存的，可以通过 window 对象来使用，也可以直接使用

Window对象

弹出框

分为警示框、确认框、提示框

警示框

如果要确保信息传递给用户，通常会使用警告框。当警告框弹出时，用户将需要单击“确定”来继续

使用alert()需要注意的是：

  1. alert()会阻塞进程
  2. alert(param)中param只能是number、string类型或者它们组成的数组
语法
1
2
3
window.alert("内容")
或
alert("内容")

确认框

如果您希望用户验证或接受某个东西，则通常使用“确认”框,用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false

语法
1
2
3
window.confirm("内容");
或
confirm("内容");

提示框

如果您希望用户在进入页面前输入值，通常会使用提示框,如果用户单击“确定”，该框返回输入值，如果用户单击“取消”，该框返回 NULL

语法
1
2
3
window.prompt("提示内容","提示框的内容");
或
prompt("提示内容","提示框的内容")；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script> 
   var bth = document.getElementById("btn1");
   bth.onclick = function()
   {
       alert("这是警示栏");
       confirm("这是确认栏");
       var demo  = prompt("这是提示栏","2841220231");
       if (demo == 2841220231)
       {
        var dd = navigator.appCodeName;
           alert(dd);
       }
   }
</script>
</body>
</html>

定时事件

window 对象允许以指定的时间间隔执行代码，这些时间间隔称为 定时事件

方法作用
setTimeout( )在指定的毫秒数后调用函数或执行一段代码
setInterval( )按照指定的周期(以毫秒计)来调用函数或执行一段代码
clearTimeout( )取消由 setTimeout( ) 方法设置的定时器
clearInterval( )取消由 setInterval( ) 设置的定时器

超时定时器

在等待指定的毫秒数后执行函数，在给定的时间间隔执行一次

语法

1
2
3
window.setTimeout(funtion,毫秒数)
或
setTimeout(funtion,毫秒数)
属性
  • 1.是要执行的函数
  • 2.指示执行之前的毫秒数

循环定时器

等同于 setTimeout()，但持续重复执行该函数，在每个给定的时间间隔重复给定的函数

语法

1
2
3
window.setInterval(function,毫秒数);
或
setInterval(function,毫秒数);
属性
  • 1.要执行的函数
  • 2.每个执行之间的时间间隔的长度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<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>
    <button id="demo">点击</button>
    <script>
        var demo1 = document.getElementById("demo");
        var i = 0 ;
        demo1.onclick = function()
        {   
            //创建定时器
            var an = setInterval(function()
            {
                 //当i=10时，停止重复
                alert("这是定时器"+i);
                i = i+1;
                if(i == 10 )
                {
                    //清除定时器
                    clearInterval(an);
                    //创建延时器
                    var wei = setTimeout(function()
                    {
                        alert("延时器");
                    },300);
                    //清除延时器
                    //clearTimeout(wei);
                }
            },300);
        }
    </script>
</body>
</html>

常用窗口属性

两个属性可用用于确定浏览器窗口的尺寸

这两个属性都以像素返回尺寸：

  • window.innerHeight - 浏览器窗口的内高度（以像素计）
  • window.innerWidth - 浏览器窗口的内宽度（以像素计）
    浏览器窗口（浏览器视口）不包括工具栏和滚动条
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<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>
        //兼容其他浏览器,万恶的ie，现在已经不用IE了
        var height = window.innerHeight 
        var width = window.innerWidth 
         alert ("高度是"+ height+"px");
         alert("宽度是"+width+"px");
</script>
</body>
</html>

其他window方法

Window 对象

打开新窗口

语法

1
2
3
window.open(URL,name,specs,replace);
或
open(URL,name,specs,replace);

关闭当前窗口

语法

1
2
3
window.close()
或
close()
移动当前窗口

语法

1
2
3
window.moveTo(x,y)
或
moveTo(x,y)
调整当前窗口的大小

语法

1
2
3
window.resizeTo(width,height)
或
resizeTo(width,height)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<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>
    <button onclick="openwin()">打开新窗口</button>
    <button onclick="closewin()">关闭当前窗口</button>
    <button onclick="movewin()">移动当前窗口</button>
    <button onclick="sizewin()">调整当前窗口的大小</button>
    <script>
        function openwin()
        {
            demo = window.open("","哔哩哔哩","height=200,width=200");
        };
        function closewin()
        {
            demo.close();
        };
        function movewin()
        {
            demo.moveTo(400,400);
            demo.focus();
        };
        function sizewin()
        {
            demo.resizeTo(500,500);
            demo.focus();
        };
    </script>
</body>
</html>

通过该对象可以来识别不同的浏览器，由于历史原因，该对象中的大部分属性都已经不能帮助我们识别浏览器了，也就是不能用了

一般我们只会使用 navigator.userAgent 来判断浏览器的信息，navigator.userAgent 是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的 navigator.userAgent

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<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>
        var ua = navigator.userAgent;
if (/firefox/i.test(ua)) {
    alert("你是火狐浏览器");
} else if (/chrome/i.test(ua)) {
    alert("你是谷歌浏览器");
} else if (/msie/i.test(ua)) {
    alert("你是IE5-IE10浏览器");
} else if ("ActiveXObject" in window) {
    alert("你是IE11浏览器");
}
    </script>
</body>
</html>
属性作用
navigator.appCodeName浏览器的内部名称，也就是代号
navigator.appName浏览器的完整名称
navigator.appVersion浏览器的平台和版本信息
navigator.cookieEnabled浏览器中是否启用Cookie的布尔值
navigator.platform运行浏览器的操作系统平台
navigator.userAgent客户端发送到服务器的User-Agent头部的值
navigator.language客户端发送到服务器的User-Agent头部值的语言

警告

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本

  • navigator 数据可被浏览器使用者更改
  • 一些浏览器对测试站点会识别错误
  • 浏览器无法报告晚于浏览器发布的新操作系统

Navigator 对象

注意：在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了，如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息，比如：ActiveXObject

Location对象

封装了浏览器的地址栏的信息，如果直接打印 location，则可以获取到地址栏的信息（当前页面的完整路径）

常用属性

属性作用
locationlocation对象 ,可以改值
location.href当前地址的全路径地址，可以改值
location.origin当前地址的来源
location.protocol当前地址的协议
location.port当前地址的端口号
location.hostname当前地址的主机名
location.host当前地址的主机
location.pathname当前地址的路径部分
location.search当前地址的?后边的参数部分

常用方法

assign( )

定义：用来跳转到其它的页面，作用和直接修改location一样

1
location.assign("https://chen-ruo.top")

reload( )

定义：用于重新加载当前页面，作用和刷新按钮一样，如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面

1
location.reload(true)

replace( )

定义：可以使用一个新的页面替换当前页面，调用完毕也会跳转页面，它不会生成历史记录，不能使用回退按钮回退

1
location.replace("https://chen-ruo.top")

History对象

用来操作浏览器向前或向后翻页

常用属性

1
2
console.log(history);           //输出history对象
console.log(history.length);    //可以获取到当成访问的链接数量

常用方法

back()

可以回退到上一个页面，作用和浏览器的回退按钮一样

1
history.back()

forward()

可以跳转到下一个页面，作用和浏览器的前进按钮一样

1
history.forward()

go()

可以用来跳转到指定的页面，它需要一个整数作为参数

  • 1：表示向前跳转一个页面，相当于forward()
  • 2：表示向前跳转两个页面
  • -1：表示向后跳转一个页面，相当于back()
  • -2：表示向后跳转两个页面
1
2
3
4
history.go(1)
history.go(2)
history.go(-1)
history.go(-2)

Screen对象

有关客户端显示屏幕的信息

每个 Window 对象的 screen 属性都引用一个 Screen 对象。

Screen 对象中存放着有关显示浏览器屏幕的信息

JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求

属性作用
availHeight返回显示屏幕的高度 (除 Windows 任务栏之外)
availWidth返回显示屏幕的宽度 (除 Windows 任务栏之外)
height返回显示屏幕的高度
width返回显示器屏幕的宽度
bufferDepth设置或返回调色板的比特深度
colorDepth返回目标设备或缓冲器上的调色板的比特深度
deviceXDPI返回显示屏幕的每英寸水平点数
deviceYDPI返回显示屏幕的每英寸垂直点数
logicalXDPI返回显示屏幕每英寸的水平方向的常规点数
logicalYDPI返回显示屏幕每英寸的垂直方向的常规点数
pixelDepth返回显示屏幕的颜色分辨率（比特每像素）
updateInterval设置或返回屏幕的刷新率
fontSmoothingEnabled返回用户是否在显示控制面板中启用了字体平滑

本地存储

本地存储方法分为 cookie 和 storage

读取cookie

示例代码

1
2
3
4
5
6
7
8
function getCookie( name ){
    let arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)")
    if(arr=document.cookie.match(reg)){
        return unescape(arr[2])
    }else{
        return null
    }
}

写cookie

示例代码

1
2
3
4
5
6
function setCookie(name,value){
    let Days = 30
    let exp = new Date( )
    exp.setTime(exp.getTime( ) + Days*24*60*60*1000)
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString( )
}

删除cookie

示例代码

1
2
3
4
5
6
7
8
function delCookie(name){
    var exp = new Date( )
    exp.setTime(exp.getTime( ) - 1)
    var cval=getCookie(name)
    if(cval != null){
        document.cookie= name + "="+cval+";expires="+exp.toGMTString( )
    }
}

storage

相比cookie，更推荐用storage来做本地存储

storage，分为 sessionStorage 和 localStorage

sessionStorage

特点：

  1. 生命周期为关闭浏览器窗口
  2. 在同一个窗口(页面)下数据可以共享
  3. 以键值对的形式存储使用
方法作用
sessionStorage.setItem(key, value)存储数据
sessionStorage.getItem(key)获取数据
sessionStorage.removeItem(key)删除数据
sessionStorage.clear( )删除所有数据

localStorage

特点：

  1. 永久有效，即使关闭页面也会存在。除非手动删除
  2. 可以多窗口(页面)共享，即同一浏览器可以共享
  3. 以键值对的形式存储使用
方法作用
localStorage.setItem(key, value)存储数据
localStorage.getItem(key)获取数据
localStorage.removeItem(key)删除数据
localStorage.clear( )删除所有数据

区别

共同点

cookie，sessionStorage，localStorage都是在客户端保存数据的，并且都是key-value类型

不同点

生命周期

cookie 如果不设置有效期，那么就是临时存储，浏览器关闭，cookie 也就失效了。如果设置了有效期，那么有效期到了，就自动消失了

sessionStorage 仅在当前会话下有效

localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。除非主动删除数据，否则数据永远不会消失

大小限制

cookie 大小限制在4KB

localstorage 和 sessionStorage 的大小限制为5M

安全性

localstorage 和 sessionStorage 不会随着HTTP header发送到服务器端，安全性相对于 cookie 来说比较高一些

便捷性

localstorage 和 sessionStorage 相关的一些操作数据的方法的确比 cookie 便捷很多