JavaScript - BOM

2021-07-17 22:08:02

BOM

1 什么是BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

2 BOM的结构

在 BOM 中包含了 DOM，整个 BOM 结构如下：

3 window对象

window 对象是浏览器的*对象，它具有双重角色。

它是 JavaScript 访问浏览器窗口的一个接口对象。
它是一个全局对象，所有定义在全局作用域的变量、函数都是它的属性或方法。

由于所有全局属性和方法都属于 window 对象，因此在调用时是可以省略 window 的。如调用 alert() 方法时，可以写成 window.alert()，但通常都会直接调用 alert() 方法即可。

    function myFunction1(){
        console.log('hello');
    }
    window.myFunction1();
    console.log(window)

4 常用的方法

4.1 alert()

用于在页面中弹出一个警告框，一般用于程序调试。

使用语法：

window.alert(提示信息);

示例：

alert('start')
window.alert('end')

4.2 confirm()

消息确认提示框，一般用于删除时进行确认，防止误删除。这个方法可以给定提示信息，执行后会返回一个布尔类型的值。

使用语法：

var 返回值 = confirm(提示信息);

示例：

var f = confirm('你确定要删除么？')
console.log(f);

if (confirm('你确定要删除么？删除后不能恢复！')) {
    console.log('已经成功删除！')
}

说明：confirm() 方法执行后，会返回一个布尔类型的值，根据这个值我们可以进行相应的操作。

5 常用的事件

5.1 页面加载

事件	说明
window.onload = function(){} window.addEventListener('load', function(){})	传统方式加载监听事件方式加载
window.addEventListener('DOMContentLoaded', function(){})	监听事件方式加载

window.onload 是页面加载事件，当文档内容（包括图像、脚本文件、CSS 样式文件等）完全加载完成后会触发该事件——即调用处理函数。window.onload 是传统事件注册方式，只会调用一次，如果在页面中写了多个该事件，只会执行最后一个加载事件。

使用示例：

window.onload = function () {
    console.log('页面加载完成！')
};

5.2 调整窗口大小

当调整页面窗口大小时，会触发 onresize 事件，该事件语法如下。

window.onresize = function(){
    
}

注意：

只要窗口大小发生像素变化时就会触发此事件。
当使用这个事件来实现响应式布局时可以使用 window.innerWidth 属性获取当前屏幕宽度。

演示案例：

window.onresize = function () {
	console.log('当前窗口宽度为：' + window.innerWidth);
	console.log('当前窗口高度为：' + window.innerHeight);
};

6 定时器方法

window 对象中提供了两种定时器方法。

setTimeout()
setInterval()

6.1 setTimeout()

setTimeout() 定时器是延迟指定时间（毫秒数）就会执行回调函数。

语法如下：

window.setTimeout(回调函数, [延迟执行毫秒数])

使用此定时器需要注意如下事项：

window 对象可以省略
回调函数可以直接写在定时器方法内也可以只写函数名
延迟执行时间的单位是毫秒，默认为 0 表示立即执行回调函数
一般会给定时器指定一个名称

使用示例：

<script>
    console.log('你好')
    setTimeout(function(){
        console.log('hello')
    }, 2000)
    console.log('大家上午好！')

    console.log('-----------');

    function fn(){
        console.log('回调函数的输出');
    }
    setTimeout(fn, 2000);
</script>

需求：希望点击按钮后，结束定时器的运行。

<script>
    // 点击按钮时结束定时器运行
    var timer = null; // 句柄对象，用于获取定时器对象
    function btnOnClick(){
        // 删除定时器对象
        clearTimeout(timer);
    }

    var index = 0;
    function fn() {
        console.log(index++);
        timer = setTimeout(fn, 2000);
    }
    timer = setTimeout(fn, 2000);
</script>

说明：我们可以在定义定时器对象时，给它指定一个引用名称，通过这个引用名称，我们就可以根据自己的业务逻辑来结束这个定时器的运行。

结束定时器的运行需要使用 window 对象中的 clearTimeout() 方法，这个方法的参数就是定时器的引用对象。

6.2 setInterval()

setTimeout() 是指定时间之后执行，如果想每隔多少时间就执行一次，就需要使用 setInterval() 定时器了。

语法如下：

window.setInterval(回调函数, [间隔执行时间毫秒数])

示例：

setInterval(function () {
    console.log('hello');
}, 2000);

使用此定时器需要注意如下事项：

window 对象可以省略
回调函数可以直接写在定时器方法内也可以只写函数名
间隔执行时间的单位是毫秒，默认为 0 表示立即执行回调函数
一般会给定时器指定一个名称
第一次执行也是延迟指定毫秒之后执行，之后是每隔指定毫秒数就执行一次

说明：上例中会每隔 2 秒就会执行输出一次 hello 字符串。

setTimeout 和 setInterval 的区别：

setTimeout 是延迟指定的毫秒数后执行一次，而 setInterval 是延迟指定的毫秒数后反复执行。

如果希望 setTimeout 实现 setInterval ，那么需要在 setTimeout 的回调函数中再次调用自己才可以。

可以给 setInterval 定义一个名称，同时可以利用这个名称来结束定时任务的执行。

<script>
    // 需求：当 index 的值达到 5 时，就结束。
    var timer = null;
    var index = 1;
    timer = setInterval(function () {
        if (index === 5) clearInterval(timer);
        console.log(index++);
    }, 1000);
</script>

7 location对象

7.1 什么是 location

window 对象中提供了 location 属性，该属性用于获取或设置浏览器地址栏中的 URL 值。这个获取或设置属性后会返回一个对象，所以将这个属性称为 location 对象。

URL（Uniform Resource Locator）叫统一资源定位符，是互联网上标准资源的地址。它由以下几部分组成。

组成	说明
protocol	协议，如：http、https、ftp等
host	主机（域名），如：www.baidu.com
port	端口号，如：80、8080、3306等
path	路径，由零个或多个'/'隔开的字符串，一般表示主机上一个目录或文件
query	参数，以键值对形式显现，多个使用 & 号连接
fragment	片段，以 # 号后面内容，常用于锚点

示例：

<form>
    <input type="text" name="account" placeholder="账号">
    <input type="password" name="pwd" placeholder="密码">
    <input type="submit" value="提交">
</form>
<script>
    console.log(location);
    console.log(location.protocol); // 协议
    console.log(location.host);
    console.log(location.hostname + ', '  + location.port);
    console.log(location.href);
    console.log(location.search);
</script>

7.2 location 属性

location 对象中提供了以下属性。

属性	返回值
href	获取或设置 URL
host	返回主机名
port	返回端口号
pathname	返回路径
search	返回参数
hash	返回片段

示例：把请求参数保存到对象中。如：把 user=xaoupeng&pwd=123456 保存到一个对象中。

<form>
    <input type="text" name="account" placeholder="账号" value="xaoupeng">
    <input type="password" name="pwd" placeholder="密码" value="123">
    <input type="text" name="code" placeholder="验证码" value="abc1">
    <input type="submit" value="提交">
</form>
<script>
    // 需求：把请求参数保存到对象中。如：把 user=xaoupeng&pwd=123 保存到一个对象中。
    function getSearchString() {
        // 1. 通过 location 的 search 属性来获取请求的参数列表
        // '?account=xaoupeng&pwd=123'
        var queryString = location.search;
        // 1.1 判断请求参数是否存在
        queryString = queryString.length > 0 ? queryString : '';
        // 2. 去掉字符串前的 ? 号
        // 'account=xaoupeng&pwd=123'
        queryString = queryString.substr(1);
        // console.log(queryString);

        // 3. 把多参数进行切割
        // ['account=xaoupeng', 'pwd=123']
        var obj = {};
        if (queryString.indexOf('&') !== -1) {
            var parameters = queryString.split('&')

            // 4. 遍历数组，然后再把参数名和参数值进行切分，并把它赋给对象。
            var items = null;
            for (var i = 0; i < parameters.length; i++) {
                //console.log(parameters[i]);
                items = parameters[i].split('=')
                //console.log(items);
                obj[items[0]] = items[1]
            }
        }
        //console.log(obj);
        return obj;
    }
    var result = getSearchString();
    console.log(result);
</script>

7.3 location 方法

除了上面的属性外，location 中还提供了如下方法。

方法	返回值
assign()	跟 href 一样可以跳转页面
replace()	替换当前页面，不记录历史无法进行后退
reload()	重新加载页面，相当于按 f5，如果参数为 true，相当于按 ctrl + f5

方法使用示例：

<script>
    // location.href = 'https://www.baidu.com/'

    location.assign('https://www.baidu.com')
    location.replace('a.html')

    location.reload();
</script>

8 navigator 对象

navigator 对象包含有关浏览器的信息。

查看 navigator 对象所有信息：

console.log(navigator)

下面以判断浏览器是否安装了某个插件为例，来说明其用法。

在 navigator 对象众多属性中，有一个属性叫 Plugins，里面存放的就是插件信息，可通过如下方式进行查看：

console.log(navigator.plugins);

下面通过封装一个方法，来判断是否安装了某个插件，如果安装则返回 true，否则返回 false。

<script>
    function hasPlugin(name) {
        name = name ? name.toLocaleLowerCase() : '';
        console.log('name = ' + name);
        var plugins = navigator.plugins;
        for (var i = 0; i < plugins.length; i++) {
            //console.log(typeof plugins[i]);
            console.log(plugins[i].name);
            return plugins[i].name.toLocaleLowerCase().indexOf(name) !== -1 ? true : false;
        }
    }
    var r = hasPlugin('pdf')
    console.log(r);
</script>

在 navigator 对象中还有一个叫 userAgent 属性比较常用。它一般用于获取浏览器的信息。

该属性可以返回由客户机发送服务器的 user-agent 头部的值。

下面代码可以判断用户由那个终端打开页面，实现跳转

 //console.log(navigator.userAgent)
    if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        //window.location.href = "https://m.xxx.com";     //手机
    } else {
        //window.location.href = "https://www.xxx.com";     //电脑
    }

9 history 对象

window 对象还提供了一个 history 对象，它与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。方法如下表所示。

方法	作用
back()	后退
forward()	前进
go(参数)	前进和后退，参数为正整数表示前进，参数为负整数表后退

示例：

<a href="b.html">b.html</a>
<script>
    console.log('-----------')
    //history.forward();
    history.go(1)
</script>


<a href="a.html">a.html</a>
<script>
    //history.back();
    history.go(-1)
</script>

码农公寓

BOM