JavaScript【九】JavaScript BOM（浏览器对象模型）

前言

哈喽小伙伴们，本文将收录在JavaScript【前端童子功】这个专栏里；这个专栏里边会收录一些JavaScript的基础知识和项目实战；希望大家可以多多支持，你们的支持就是我创作的动力；让我们一起来看看吧

Bom（浏览器对象模型）

BOM是浏览器对象模型，主要用于管理窗口与窗口之间的通信，核心对象是window。

浏览器对象模型（Browser Object Model，简称 BOM）是 JavaScript 的组成部分之一，BOM 赋予了 JavaScript 程序与浏览器交互的能力。

window 对象是 BOM 的核心，用来表示当前浏览器窗口，其中提供了一系列用来操作或访问浏览器的方法和属性。另外，JavaScript 中的所有全局对象、函数以及变量也都属于 window 对象，甚至我们前面介绍的 document 对象也属于 window 对象。

window对象：

属性：

• innerWidth 浏览器的宽度
• innerHright 浏览器的高度
• screen.width 屏幕分辨率的宽度
• screen.height 屏幕分辨率的高度

方法：

• alert() 弹出框
• prompt() 输入框
• comfirm() 带有确定取消按钮的对会话框。返回布尔值
• close() 关闭浏览器
• open(url) 打开新窗口
• srtInterval(回调函数，时间ms) 间隔一定的时间重复不断的执行回调函数
• clearInterval(id) 清除时间函数
• setTimeout(回调函数，时间ms) 间隔一定的时间只执行一次回调函数
• clearTimeout(id) 清除时间函数

获取元素:

document.querySelector(选择器)

添加点击事件：

元素.onclick=function(){

}

获取表单的值：用来连接js和html

表单元素.value

设置普通元素：

元素.innerHTML

console对象：

浏览器控制台。属于window对象的子对象。window.console

console对象方法

属性	参数	返回值	功能	兼容性
log	msg	undefined	向 Web 控制台输出一条消息	全部
dir	object	undefined	打印出对象的所有属性和属性值	>ie8
error	msg	undefined	向 Web 控制台输出一条错误消息	>ie7
warn	msg	undefined	向 Web 控制台输出一条警告信息	>ie7
time	timerName	undefined	启动一个计时器（timer）来跟踪某一个操作的占用时长	>ie10
timeEnd	timerName	undefined	停止一个通过 console.time() 启动的计时器	>ie10
table	tabledata, tablecolumns	undefined	用于在控制台输出表格信息。	>ie12

console.log

console.log() 方法用于在控制台输出信息。

该方法对于开发过程进行测试很有帮助。

提示: 在测试该方法的过程中，控制台需要可见 (浏览器按下 F12 打开控制台)。

语法

console.log(message)

参数说明

参数	类型	描述
message	String 或 Object	必需，控制台上要显示的信息

console.time

console.time()和console.timeEnd()这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。

console.time方法是开始计算时间，console.timeEnd是停止计时，输出脚本执行的时间:

// 启动计时器
console.time('testForEach');
// (测试用代码)
// 停止计时，输出时间
console.timeEnd('testForEach');

// testForEach 4522.303ms

参数说明

参数	类型	描述
label	String	可选，用于给计算器设置标签。
tablecolumns	Array	可选，一个数组，表格标题栏的名称。

这两个方法中都可以传入一个参数，作为计时器的名称，它的作用是在代码并行运行时分清楚各个计时器。所以两个方法的参数必须相同。

对console.timeEnd的调用会立即输出执行总共消耗的时间，单位是毫秒

for 循环测试

var i;
console.time("for 循环测试");
for (i = 0; i < 100000; i++) {
  // 代码部分
}
console.timeEnd("for 循环测试");

测试ajax请求所需时间：

console.time("ajax请求时间")
$.ajax({
  url:"https://zhihu-daily.leanapp.cn/api/v1/last-stories",
  success(res){
    console.timeEnd("ajax请求时间")
  }
})
//  ajax请求时间: 189.089111328125ms

console.table

console.table() 方法用于在控制台输出表格信息。

第一个参数是必需的，且对象类型需要是对象或数组，对应的数据会填充到表格中。

提示: 在测试该方法的过程中，控制台需要可见 (浏览器按下 F12 打开控制台)。

语法

console.table(tabledata, tablecolumns)

参数说明

参数	类型	描述
tabledata	Array 或 Object	必需，填充到表格中的数据。
tablecolumns	Array	可选，一个数组，表格标题栏的名称。

console.table(["king", "lilei", "susan"]);

location 对象

JavaScript location 对象中包含了有关当前页面链接（URL）的信息，例如当前页面的完整 URL、端口号等，我们可以通过 window 对象中的 location 属性来获取 location 对象。由于 window 对象是一个全局对象，因此在使用window.location时可以省略 window 前缀，例如window.location.href可以简写为location.href。

location属性

当前文档的地址对象。也是window的子对象，window.location

一个完整的url 包括9个部分 协议://用户名：密码@域名：端口/路径；参数？查询#片段 不过几乎没有哪个url包含这些所有组件，最重要的三部分是协议，域名和路径:

以该url为例：

http://www.baidu.com:80/javascript/?file=001/BOM/README.md/#location对象
协议        域名    |端口号| 路径    |查询字符串|              |哈希|

属性	描述	可读写性	结果
href	包含整个URL的一个字符串	读写	http://www.baidu.com:80/javascript/001/BOM/?file=README.md#location对象
origin	包含页面来源的域名的标准形式字符串	只读	http://www.baidu.com:80
protocol	包含URL对应协议的字符串，最后有一个":"	只读	http:
host	包含了域名和端口号的字符串，如没有端口号则只有域名	只读	www.baidu.com:80
hostname	包含URL域名的字符串	只读	www.baidu.com
port	包含端口号的字符串	只读	80
pathname	包含URL中路径部分的字符串，开头有一个"/"	只读	/javascript/001/BOM/
search	包含URL参数（查询字符串）的字符串，开头有一个“?”	只读	?file=README.md
hash	包含块标识符的字符串，开头有一个"#"	只读	#location对象

location方法

属性	参数	返回值	功能	兼容性
assign	url	undefined	加载给定URL的内容资源	全部
reload	Boolean	undefined	重新加载来自当前 URL的资源(刷新本页)	全部
replace	url	undefined	用给定的URL替换掉当前的资源	全部
toString	无	包含整个URL的字符串	获取本窗口的url，将地址转换成字符串(只能获取，无法修改，读取效果与location.href相同)	全部

location.assign 与 location.replace的区别: replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面

location.reload 的参数：

• false或未写参数：检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。
• true：那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

history 对象

history 对象是 windows子对象。history 接口允许操作浏览器的曾经在标签页或者框架里访问的历史记录,这些方法和事件能够帮助我们优雅的实现单页面应用，同时又不会影响搜索引擎对我们网站的搜录。现在所有的现代浏览器都已经支持这些新的特性，并且涌现出大量的路由框架，都内置集成了这些新的特性。比方说著名的vue框架里面的 vue-route等路由框架。

history 对象属性

属性	描述	可读写性	兼容性
length	包含当前页面在内的历史记录个数	只读	全部

history 对象方法

属性	参数	返回值	功能	兼容性
back	无	undefined	加载 history 列表中的前一个 URL(等价于history.go(-1))	全部
forward	无	undefined	加载 history 列表中的下一个 URL(等价于history.go(1))	全部
go	number	undefined	通过当前页面的相对位置从浏览器历史记录加载页面	全部
pushState	state, title, url	undefined	无刷新的向浏览器 历史最前方 加入一条记录	>ie9
replaceState	state, title, url	undefined	无刷新的使用一条记录替换当前的历史记录	>ie9

• history.go方法
  • history.go(-1)： 加载上一个历史记录
  • history.go(1)： 加载下一个历史记录
  • history.go(0) 或不传参： 刷新本页 类似地，你可以传递参数值2并向前移动2个页面，等等。
    如果已经没有页面，该方法不会报错，页面不会发生任何变化； 如果参数不是整数，页面也不会发生任何变化。
• history.pushState 和 history.replaceState 方法有3个参数
  • 状态对象state —— 需要保存的数据，这个数据在触发popstate事件时保存在event.state上
  • 标题title —— 浏览器目前不识别该参数，传入一个空字符串
  • 地址URL —— 需要更改的url地址

window.onpopstate事件： 浏览器点击前进后退(或者在js中调用history.back()、history.forward()、history.go()方法)时触发的事件。event.state可以获取当前url下设置的state。

注：pushState 和 replaceState方法只能加载同源下的资url源（存在跨域问题）

window.onpopstate = function (event) {
    console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数.
history.pushState({ page: 1 }, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({ page: 2 }, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({ page: 3 }, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 输出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 输出 "location: http://example.com/example.html, state: null
history.go(2);  // 输出 "location: http://example.com/example.html?page=3, state: {"page":3}

总结

• js刷新本页面方法汇总：
  1. history.go(0)
  2. location.reload()
• js跳转页面方法汇总：
  1. window.open(url)
  2. location.href = “”
  3. location.assign(url)

Navigator 对象

Navigator 对象包含有关浏览器的信息,是window对象的属性，中文是"导航器"的意思

Navigator的属性

属性	描述	值
language	返回当前浏览器的语言	“zh-CN”、"en"等
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值	true,false
onLine	返回指明系统是否处于联网状态的布尔值	true,false
platform	返回运行浏览器的操作系统平台。	“Win32”, “Linux i686”, “MacPPC”, “MacIntel”, 等
userAgent	返回由客户机发送服务器的 user-agent 头部的值	userAgent: “Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36”

检测浏览器

检测浏览器版本：

 function getExplorerInfo() {
    var explorer = window.navigator.userAgent.toLowerCase();
    //ie
    if (explorer.indexOf("msie") >= 0) {
        var ver = explorer.match(/msie ([\d.]+)/)[1];
        return { type: "IE", version: ver };
    }
    else if (explorer.indexOf("edge") >= 0) {
        var ver = explorer.match(/edge\/([\d.]+)/)[1];
        return { type: "Edge", version: ver };
    }
    //firefox
    else if (explorer.indexOf("firefox") >= 0) {
        var ver = explorer.match(/firefox\/([\d.]+)/)[1];
        return { type: "Firefox", version: ver };
    }
    //Chrome
    else if (explorer.indexOf("chrome") >= 0) {
        var ver = explorer.match(/chrome\/([\d.]+)/)[1];
        return { type: "Chrome", version: ver };
    }
    //Opera
    else if (explorer.indexOf("opera") >= 0) {
        var ver = explorer.match(/opera.([\d.]+)/)[1];
        return { type: "Opera", version: ver };
    }
    //Safari
    else if (explorer.indexOf("safari") >= 0) {
        var ver = explorer.match(/safari\/([\d.]+)/)[1];
        return { type: "Safari", version: ver };
    }
}

检测浏览器是否为PC端

function getExplorerType(){
    var explorer = window.navigator.userAgent.toLowerCase();
    return explorer.indexOf('mobile') === -1
}

结果：true PC , false 为 Mobile

检测当前网络状态

//浏览器在线
window.ononline = function(){
    console.log(window.navigator.onLine)
}

//浏览器离线
window.onoffline = function(){
    console.log(window.navigator.onLine)
}

h5相机拍照

DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>title>
        <script type="text/javascript" src="jquery.min.js">script>
        <script>
            window.addEventListener("DOMContentLoaded", function () {
                var canvas = document.getElementById("canvas"),
                    context = canvas.getContext("2d"),
                    video = document.getElementById("video"),
                    videoObj = {
                        "video": true
                    },
                    errBack = function (error) {
                        console.log("Video capture error: ", error.code);
                    };
                $("#snap").click(function () {
                    context.drawImage(video, 0, 0, 330, 250);
                })
                if (navigator.mediaDevices.getUserMedia) {
                    navigator.mediaDevices.getUserMedia(videoObj)
                    .then(function (stream) {
                        video.srcObject = stream;
                        video.play();
                    })
                    .catch(errBack)
                } else if (navigator.webkitGetUserMedia) {
                    navigator.webkitGetUserMedia(videoObj, function (stream) {
                        video.src = window.webkitURL.createObjectURL(stream);
                        video.play();
                    }, errBack);
                }
            }, false);
        script>
    head>    
    <body>
        <div id="contentHolder">
            <video id="video" width="320" height="320" autoplay>video>
            <input type="button" id="snap" style="width:100px;height:35px;" value="拍 照" />
            <canvas style="" id="canvas" width="320" height="320">canvas>
        div>
    body>
html>

Vibration（震动）

// 可以传入一个大于0的数字，表示让手机震动相应的时间长度，单位为ms
navigator.vibrate(100)

// 也可以传入一个包含数字的数组，比如下面这样就是代表震动300ms，暂停200ms，震动100ms，暂停400ms，震动100ms
navigator.vibrate([300,200,100,400,100])

// 也可以传入0或者一个全是0的数组，表示暂停震动
navigator.vibrate(0)

用途

使手机震动，用来给用户一个提示，例如说数据校验失败。

写在最后

更多JavaScript知识以及API请大家持续关注，尽请期待。各位小伙伴让我们 let’s be prepared at all times！

✨原创不易，还希望各位大佬支持一下！
点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！