JavaScript - BOM 学习笔记（更新ing）

1、什么是BOM？

BOM 即浏览器对象模型，可以让我们通过JS操作浏览器，BOM比DOM大并且包含DOM

2、BOM对象

BOM对象	说明
Window	代表整个浏览器窗口，同时也是网页中的全局对象
Navigator	当前浏览器信息，通过此可以识别不同的浏览器
Location	保存着当前浏览器加载文档的信息、包括当前浏览器的地址（网址）栏信息等，可以借此操作浏览器跳转页面等，也保存着把 URL 解析为离散片段后能够通过属性访问的信息
History	浏览器历史记录，但由于隐私原因，只能通过该属性在当次访问浏览器时操作浏览器进行向前或者向后翻页
Screen	用户屏幕信息，可获取用户显示器的相关信息

这些BOM对象再浏览器中都是作为window对象的属性保存的，所以既可以直接使用

console.log(navigator);//Object Navigator

也可以通过window对象来使用、

console.log(window.navigator);//Object Navigator

2.1、Window对象

Window对象是BOM的核心，它一是代表ECMAScript 中的全局对象，二是代表浏览器窗口的 JavaScript 接口，所以网页中定义的所有对象、变量、函数都已window作为其全局对象。

2.1.1、Global作用域

由于window对象是ECMAScript中的全局对象，所以通过var声明的所有全局变量和函数都会变成window对象的属性和方法，而let和const声明的则不会把变量添加给全局对象

var name = "Rory";
alert(name);//"Rory"
alert(window.name);//"Rory"
------------------------------
let age = 10;
alert(age);//10
alert(window.age);//undefined

2.1.2、窗口关系

对象	说明
top	始终指向最上（外）层，即浏览器窗口本身
parent	始终指向当前窗口的父窗口
self	始终指向window，实际上，self和window就是同一个对象

2.1.3、窗口位置

首先介绍两个属性：
screenLeft：窗口相对于屏幕左侧的位置；screenTop：窗口相对于屏幕顶部的位置，二者返回值的单位是px。

移动窗口的方法：
x表示向左或向右移动的像素数，x为正时左移，为负时右移；
y表示向上或向下移动的像素数，y为正时下移，为负时上移
1、moveTo(x,y);//窗口移动到(x px,y px)位置，这里的(x,y)是终点位置
   window.moveTo(0,0);//窗口移动到左下角

2、moveBy(x,y)；//将窗口朝某方向移动多少像素
   window.moveBy(-50,50);//把窗口向右移动50px，向下移动50px，这里的(x,y)是朝某方向移动的像素数

2.1.4、像素比

2.1.5、窗口大小

height：元素自身高度；width：元素自身宽度

属性	说明
innerHeighty	height + Padding-top + Padding-button
innerWidth	width + Padding-left + Padding-right
outerWidth	width + Padding-left + Padding-right + border
outerHeight	height + Padding-top + Padding-button + border

属性	说明
clientWidth	页面布局视口宽度，即渲染页面的实际宽度
clientHeight	页面布局视口高度，即渲染页面的实际高度

调整窗口大小，下面方法只能应用于window对象

这里假设原窗口宽高为500×500
1、resizeTO(目标宽度，目标高度);
   window.resizeTo(100,200);//将窗口缩放到100×200
   该方法处理后的窗口大小为100×200

2、resizeBy(缩放宽度，缩放高度);
   window.resizeBy(100,200);//将窗口的宽缩小100px，宽缩小200px
   该方法处理后的窗口大小为400×300

2.1.6、视口位置

有限视口的滚动

滚动页面的方法：（注：x正值表示右，负值表示左；y正值表示下，负值表示上）
1、scroll(x,y)；

2、scrollTo(x,y);
   当前视口滚动到距离屏幕左边x像素，距离屏幕顶部y像素处
   window.scrollTo(0,0);//视口滚动到左上角
   
3、scrollBy(x,y);
   当前视口像右滚动x像素，像下滚动y像素
   window.scrollBy(100,-50);//当前视口像右滚动100像素，像上滚动50像素

此外可通过 ScrollToOptions 字典传参，同时设置behavior属性控制滚动方式

1、正常滚动：
   window.scrollTo({
   	 left:100;//不带单位，距离屏幕最左边100px
   	 top:50;//不带单位，距离屏幕最顶部50px
   	 behavior:"auto";//这里传字符串
   });

2、平滑滚动：
   window.scrollBy({
     left:20px;//左移20px
     top:-20px;//上移20px
     behavior:"smooth";//平滑滚动
   });

2.1.7、导航与打开新窗口

1、打开窗口
   window.open("url", "目标窗口名", 窗口参数, 布尔值(新窗口是否替代当前窗口));
   //一般只传前三个参数，最后一个布尔值在不打开新窗口时使用
   //url：要打开的页面链接或者资源的url地址
   //目标窗口名也可以为:_self、_parent、_top 或_blank。这不是窗口的标题，只是方便后续对窗口引用
   //窗口参数：为新打开窗口的一些配置项，比如是否有菜单栏、滚动条、长高等等信息,数字不带单位,各项之间逗号分隔且 不能有空格.如果没有传该参数，则新窗口（或标签页）会带有所有默认的浏览器特性设置
    window.open("http://www.bilibili.com/", 
      			"哔哩哔哩 (゜-゜)つロ 干杯~-bilibili"，
      			"width=1200, height=900");//以1200×900的宽高打开b站
    
    window.open("index.html", "page_1");
    window.open("", "page_2");//不打开窗口的情况下获取窗口“page_2”的引用

   
   以下部分的wroxWin为用window.open()创建的窗口的引用名
   
2、缩放窗口
   设原窗口大小为600×600
   resizeTo(newWidth，newHeight);//传入新窗口的宽高
   wroxWin.resizeTo(500,400);//新窗口大小为500×400
 ------------------------------------------------------------------------  
   resizeBy(widthDifference，heightDifference);//接收新窗口和原窗口的宽高之差
   wroxWin.resizeBy(200,100);//新窗口大小为800×700

3、移动窗口
   moveTo();//传入两个参数，第一个参数是距离浏览器最左端距离，第二个是距离对顶端距离
   wroxWin.moveTo(20,50);

4、关闭新打开的窗口
   close();//只能打开由window.open()创建的弹出窗口
   wroxWin.close();
   //弹出窗口也可以通过 top.close() 关闭自己
   关闭窗口后，窗口的引用只能用于检查其closed属性，检查其关闭状态
   console.log(wroxWin.closed);//true

5、opener：指向打开它的窗口。这个属性只在弹出窗口的最上层 window 对象（top）有定义，是指向调用 window.open()打开它的窗口或窗格的指针
   console.log(wrox.opener === window);//true

   也可以把新打开的标签页的opener设置为null，这样它就可以运行在独立的进程中，该操作无法恢复

窗口参数如下：

2.1.8、定时器

JavaScriptJavaScript 维护了一个任务队列。其中的任务会按照添加到队列的先后顺序执行

setTimeout()： 指定在一定时间后执行某些代码。
setInterval()： 指定每隔一段时间执行某些代码。

2.1.8.1、setTimeout()和clearTimeout()

该方法通常接收两个参数，第一个是执行的代码，第二个是执行回调函数前等待的时间，单位是ms。

1、setTimeout(console.log(1111), 1000);//1s后执行console.log(1111);

   注意，第二个参数是告诉js引擎在经过设置的毫秒数后把该任务添加到任务队列 中，
   若队列是空的，那么立即执行改代码，如果不是空的，那么代码必须等待前面的 任务执行完毕才能执行
--------------------------------------------------------------------------------------
2、setTimeout()会返回一个表示该超时排期的数值 ID，该ID是被排期执行代码的标   识符, 使用 
   clearTimeout()方法并传入该ID，可以取消该任务，
   
   例.
   let time_out_ID = setTimeout(console.log(1111), 1000);
   clearTimeout(time_out_ID);//任务取消

2.1.8.2、setInterval()和clearInterval()

由于实际情况下，无法保证一个任务结束和下一个任务开始之间的时间间隔，所以该方法建议少用

该方法也是接收两个参数：需要执行的代码、把下一次执行该代码的任务添加到队列中需要等待的时间，单位是ms。

1、setInterval(console.log(alert("1s后我会再次进入任务队列")), 1000);
   注意：这里第二个时间参数是向队列添加新任务之前等待的时间，浏览器只会根据设置的时间间隔将这个
   任务加入任务队列，而不会考虑什么时候执行这个任务或是执行它要花费多少时间。

   注意：如果不取消 setInterval() 设置的循环定时任务，那么该任务的循环将会一直执行到页面卸载
   
2、setInterval()
   与 clearTimeout() 相似，也会返回一个循环定时ID，通过将这个ID传入 clearTimeout() 方法，可以
   取消该循环定时任务。

   例.
   let Interval_ID = setTimeout(console.log(alert("1s后我会再次进入任务队列")), 1000);
   clearTimeout(Interval_ID);//该循环定时任务取消，将不会再被加入任务列表

2.1.9、系统对话框

系统对话框的样式无法使用CSS设置，他们的执行会中断其他代码的执行

2.1.9.1、alert() - 警告框

1、alert('hello world');

2、let str = "hello world";
   alert(str);

该方法接受一个参数并将其以字符串的形式显示在弹出的系统对话框中，若参数不是字符串，则该方法会先调用参数的 toString() 方法将其转化为字符串

alert() 方法弹出的警告框只提供了唯一一个OK选项可供用户操作，将其关闭

2.1.9.2、confirm() - 确认框

与alert()类似，接受参数并将其以字符串形式输出。但confirm()弹出的确认框有两个按钮：“Cancel（取消）”、“OK（确定）”，点击Cancel（取消），confirm()返回false；点击OK（确定），confirm()返回true。

1、confirm("确定继续执行？");

2、let str = "继续执行该任务吗？"
   confirm(str);

3、确认框在实际应用中一般用于在必要时让用户确认执行某个操作
   let str = "确定修改密码？"
   if(confirm(str)){
    	passWords = "123";
   }
   else{
    	alert("密码未修改");
   }

2.1.9.3、prompt() - 提示框

提示框用于提示用户在文本框中输入信息，如果用户点击OK（确定），则prompt()会返回文本框中的值；如果用户点击Cancel（取消），则提示框关闭并返回null。

prompt("显示给用户的文本"，"文本框默认值，可以是空字符串");

例:
	let info = prompt("同学，你的发言很有建设性，请请输入你的学号和姓名，我们给你加综测", "");
	if(info){
		alert("欢迎明年报考我校");
	}

window的其他方法：

//显示查找对话框，在当前页面查找指定字符串，该方法可能在未来被废弃
1、window.find();

//打开打印对话框打印当前文档
2、window.print();

//模拟浏览器的"后退"功能，回到浏览器当前页面的上一页，仅在存在上一页时可触发
3、window.back();

//模拟浏览器的"前进"功能，前往浏览器当前页面的下一页，仅在存在下一页时可触发
4、window.forward();

//模拟浏览器"回到主页"功能，跳转到指定的主页
5、winodw.home();

//终止浏览器的下载进程
6、window.stop();

//从窗口中移出焦点
7、window.blur();

//从窗口中得到焦点
8、window.focus();

//捕获指定参数的所有事件，当需要捕获多个参数的事件时，之间用|分隔
9、window.captureevent();

//捕获通过参数传入的外部事件
10、window.enableexternalcapture();

//终止并取消window.enableexternalcapture()
11、window.disableexternalcapture();

//触发指定事件的事件处理器
12、window.handleevent();

//释放通过参数传入的已被捕捉的事件
13、window.releaseeven();

//把被捕捉类型的所有事件转交给标准事件处理方法进行处理
14、window.releaseeven();

2.2、Navigator对象

2.2.1、属性与方法

属性	说明
activeVrDisplays	返回数组，包含 ispresenting 属性为 true 的 VRDisplay 实例
appCodeName	返回浏览器的代码名
appName	返回浏览器全名
userAgent	返回一个反映浏览器信息的字符串，此为获取浏览器信息的主流方法
appVersion	返回浏览器的平台和版本信息
battery	返回暴露 Battery Status API 的 BatteryManager 对象
connection	返回暴露 Network Information API 的 NetworkInformation 对象
cookieEnabled	返回布尔值，表示是否启用了 cookie
credentials	返回暴露 Credentials Management API 的 CredentialsContainer 对象
deviceMemory	返回单位为 GB 的设备内存容量
doNotTrack	返回用户的“不跟踪”（do-not-track）设置
geolocation	返回暴露 Geolocation API 的 Geolocation 对象
hardwareConcurrency	返回设备的处理器核心数量
javaEnabled	返回布尔值，表示浏览器是否启用了 Java
language	返回浏览器的主语言
languages	返回浏览器偏好的语言数组
locks	返回暴露 Web Locks API 的 LockManager 对象
mediaCapabilities	返回暴露 Media Capabilities API 的 MediaCapabilities 对象
mediaDevices	返回可用的媒体设备
maxTouchPoints	返回设备触摸屏支持的最大触点数
mimeTypes	返回浏览器中注册的 MIME 类型数组
onLine	返回布尔值，表示浏览器是否联网
oscpu	返回浏览器运行设备的操作系统与CPU
permissions	返回暴露 Permissions API 的 Permissions 对象
platform	返回浏返回浏览器运行的系统平台
plugins	返回浏览器安装的插件数组
product	返回产品名称
productSub	返回产品的额外信息
serviceWorker	返回用来与 ServiceWorker 实例交互的 ServiceWorkerContainer
storage	返回暴露 Storage API 的 StorageManager 对象
userAgent	返回浏览器的用户代理字符串
vendor	返回浏览器的厂商名称
vendorSub	返回浏览器厂商的更多信息
webdriver	返回浏览器当前是否被自动化程序控制

方法	说明
getVRDisplays()	返回数组，包含可用的每个 VRDisplay 实例
getUserMedia()	返回与可用媒体设备硬件关联的流
registerProtocolHandler()	将一个网站注册为特定协议的处理程序
requestMediaKeySystemAccess()	返回一个期约，解决为 MediaKeySystemAccess 对象
sendBeacon()	异步传输一些小数据
share()	返回当前平台的原生共享机制
vibrate()	触发设备振动

2.2.2、检测浏览器中的插件

可通过plugins数组，其中每一项包含以下属性

属性	说明
name	插件名称
description	插件介绍
filename	插件的文件名
length	由当前插件处理的MIME类型数量

插件检测

let hasPlugin = function(name){//name是待检测插件名称
		name = name.toLowerCase();
		for(let plugin of window.navigator.plugins){
			if(plugin.name.toLowerCase().indexof(name) > -1){
				return true;
			}
		}
		return false;
    }

2.3、location对象

它即是window的属性也是document的属性，即：window.location和document.location是同一个对象。
摘自红宝书：

2.4、screen对象

保存浏览器窗口外客户端显示器的信息，信息因浏览器而异

属性	说明
availHeight	屏幕像素高度减去系统组件高度（只读）
availWidth	屏幕像素宽度减去系统组件宽度（只读）
availLeft	没有被系统组件占用的屏幕的最左侧像素（只读）
availTop	没有被系统组件占用的屏幕的最顶端像素（只读）
colorDepth	表示屏幕颜色的位数（只读）
height	屏幕像素高度
width	屏幕像素宽度
left	当前屏幕左边的像素距离
top	当前屏幕顶端的像素距离
pixelDepth	屏幕的位深（只读）
orientation	返回Screen Orientation API中屏幕的朝向

术语	说明
只读	表示文档或属性只能读取，不能修改也不能储存
位深度	表示一个像素所需要的bit数
API	一些预先定义的接口（如函数、HTTP接口），或指软件系统不同组成部分衔接的约定，用来提供应用程序与开发人员基于某软件或硬件得以访问的一组例程，而又无需访问源码，或理解内部工作机制的细节。

2.5、history对象

可通过history对象再不知道实际URL的情况下控制浏览器向前或向后翻页

2.5.1、导航 - go()方法

go()方法可以在用于在历史记录中朝任何方向导航，go()只接受一个参数，可以是整数，正值表示前进多少步，负值表示后退多少步

//后退两页
1、history.go(-2);

//前进1页
2、history.go(2);

一些旧版本浏览器中，还可以向go()中传一个字符串，然后浏览器会导航到历史记录中最近的包含该字符串的位置，如果历史记录中无匹配项，则这个方法不会起作用

//导航到距离当前页面最近的bilibili页面
history.go("myPage.html");
history.go("http://bilibili.com/");

go()的两种简写方法 forward() 和 back()，分别表示前进一页和后退一页

//前进一页
history.forward();

//后退一页
history.back();

history对象的length属性，返回历史记录的数量，可用于确定当前页面是不是起点页面

if(history.length == 1){
	alert("当前页面是起点页");
}
else{
	alert("当前页面不是起点页面，历史记录中的页面数目为：" + history.length);
}

2.5.2、历史状态管理 - pushState()

状态管理API可以让开发者改变浏览器URL而不会加载新页面

语法:pushState(state对象, "新状态标题", "相对URL");
//第一个参数的对象大小通常在500KB到1MB内
//第二个参数可以是标题也可以是空串


	let stateObject = {foo:"bar"};
	history.pushState{stateObject, "new title", "index.html"};