JavaScript的BOM

window对象

BOM的核心是window对象，表示的是浏览器的实例。BOM提供了很多与网页无关的浏览器功能对象。window对象在浏览器中有两重身份，一个是ECMAScript中的Global对象，另一个是浏览器窗口的JavaScript对象。因此，在网页中定义的所有对象变量和函数都已window作为其Global对象。

首先了解一些Global对象的作用域

Window 对象属性及对象方法可见：

Window 对象 | 菜鸟教程Window 对象 Window 对象 Window 对象表示浏览器中打开的窗口。 如果文档包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。 注意： 没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。 Window 对象属性 属性 描..https://www.runoob.com/jsref/obj-window.html

Global对象的作用域

所有被var声明的全局变量和函数都会变成window的属性和方法。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

注意：访问未声明的变量会抛出错误，但是可以在window对象上查询是否存在未声明对象。

如：

var newValue=oldValue; // 报错：oldValue is not defined
var newValue=window.oldValue; // 不会报错，这里是属性查询
console.log(newValue); // undefined

窗口

窗口关系

top对象始终指向浏览器窗口本身。

parent对象始终指向当前窗口的父窗口。

若当前窗口指向最上层窗口，那么parent = top = window，最上层如果不是使用window.open打开那么它的name属性就没有值。

self对象始终指向window。

窗口位置与像素比

screenLeft和screenTop属性表示窗口相对于屏幕左侧和顶部的位置，返回值为css像素，返回的是窗口相对于屏幕的X和Y坐标。

用法：

window.screenLeft
window.screenTop

moveTo() 方法可把窗口的左上角移动到一个指定的坐标。接收要移动到的新位置的绝对坐标x和y。

window.moveTo(x,y)

moveBy() 方法可相对窗口的当前坐标把它移动指定的像素。接收相对当前位置在两个方向上移动的像素数。

window.moveBy(x,y)

物理像素与css像素之间的转换比率是由window.devicePixelRatio属性提供。

窗口大小

所有浏览器都支持四个属性：innerHeight、innerWidth、outerWidth、outerHeight、

• window.innerHeight - 浏览器窗口的页面视口高度(包括滚动条，不包含浏览器边框和工具栏)
• window.innerWidth - 浏览器窗口的页面视口宽度(包括滚动条，不包含浏览器边框和工具栏)

• window.outerHeight - 浏览器窗口的自身高度
• window.outerWidth - 浏览器窗口的自身宽度 

resizeTo() 方法:用于把窗口大小调整为指定的宽度和高度。(接收新的宽高）

window.resizeTo(width,height)

resizeBy() 方法:用于根据指定的像素来调整窗口的大小。（接收宽高要缩放多少）

resizeBy(width,height)

视口位置

可以使用scroll()，scrollTo()，scrollBy()方法滚动页面，三个方法都接收表示相对视口距离的x和y坐标。前两个方法中表示要滚动到的坐标，后一个方法表示滚动的距离。

导航与打开新窗口

window.open()方法

用于导航到指定URl，也可以用于打开新浏览器窗口，四个参数：要加载的URL，目标窗口，特性字符串，和表示新窗口在浏览器历史记录中是否替代当前加载页前面的布尔值。（通常是只传前三个，最后一个参数只有在不打开新窗口时才会使用）

注意：

第二个参数是以及存在的窗口或窗格的名字，则会在对应的窗口或窗格打开URL，如果第二个窗口不是已有窗口，则会打开一个新窗口或标签页。

第三个参数，即特性字符串，用于指定新窗口的配置。如果没有第三个参数，则新窗口会带有所有的默认的浏览器特性（工具栏，地址栏，状态栏都是默认配置），如果打开的不是新窗口，则忽略第三个参数。（特性字符串是一个逗号分隔的设置字符串，用于指定新窗口包含的特性。如  height：数值;新窗口高度.....）

window.open()返回一个对新建窗口的引用。

定时器

JavaScript在浏览器中是单线程执行的，但允许使用定时器指定在某个时间后或每隔一段时间后就执行相应的代码。

setTimeout() 方法

setTimeout()用于在指定的毫秒数后调用函数或计算表达式。

setTimeout(code, milliseconds)

参数	描述
code/function	必需。要执行的代码，也可以是一个函数。
milliseconds	可选。执行或调用 code/function 需要等待的时间，单位：毫秒。默认为 0。

调用 setTimeout()时会返回一个表示该超时排期时的数值ID，这个ID是被排期执行代码的唯一标识，可以用于取消任务，要取消任务可以调用clearTimeout()。并传入超时ID。

var myVar;
 //2 秒（2000 毫秒）后弹出 "Hello" :
function myFunction() {
    myVar = setTimeout(alertFunc, 2000);
}
 
function alertFunc() {
    alert("Hello");
}

 注意：所有的超时执行代码都会在全局作用域中的一个匿名函数中允许，因此函数中的this值在非严格模式夏始终指向window，而在非严格模式下是undefined。如果给setTimeout提供了一个箭头函数，那么this会保留为定义它时所在的词汇作用域。

setInterval() 方法

可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval()方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

setInterval(code, milliseconds);

参数	描述
code/function	必需。要调用一个代码串，也可以是一个函数。
milliseconds	必须。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。

var myVar;
 //每三秒（3000 毫秒）弹出 "Hello"
function myFunction() {
    myVar = setInterval(alertFunc, 3000);
}
 
function alertFunc() {
    alert("Hello!");
}

 

setInterval() 返回一个 ID（数字），可以将这个ID传递给clearInterval()，以取消循环定时。

系统对话框

alert() 显示带有一段消息和一个确认按钮的警告框。

confirm()  显示带有一段消息以及确认按钮和取消按钮的对话框。

prompt()  显示可提示用户输入的对话框。

这些系统对话框可以向用户显示消息，确认操作和获取输入。

location对象

Location 对象属性

属性	说明
hash	返回一个URL的锚部分，如果没有则为空字符串
host	返回一个URL的主机名（服务器名）和端口号
hostname	返回URL的主机名（服务器名）
href	返回完整的URL，Location的toString()方法返回这个值
pathname	返回的URL路径名或文件名
port	返回一个URL服务器使用的端口号，如果没有端口号则返回空字符串
protocol	返回一个URL协议，如果没有端口则返回空字符串页面使用的协议，通常是 "http:” 或 "https:"
search	返回一个URL的查询部分，这个字符串以问号开头
username	域名前指定的用户名
protocol	域名前指定的密码
origin	URl的源地址，只读。

Location 对象方法

方法	说明
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

navigator对象

Navigator 对象属性

属性	说明
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的user-agent 头部的值
geolocation	返回浏览器的地理位置信息
language	返回浏览器使用的语言
onLine	返回浏览器是否在线，在线返回 ture，否则返回 false
product	返回浏览器使用的引擎（产品）

Navigator 对象方法

方法	描述
javaEnabled()	指定是否在浏览器中启用Java
taintEnabled()	规定浏览器是否启用数据污点(data tainting)

检测插件

除了IE10及更低版本的浏览器都可以使用，plugins数组来确定是否安装了某个插件。

plugins数组包含以下属性：

• name：插件名称
• description：插件介绍
• fliename：插件的文件名
• length：由当前插件处理的MIME类型数量 

screen对象

属性	说明
availHeight	返回屏幕的高度（不包括Windows任务栏）
availWidth	返回屏幕的宽度（不包括Windows任务栏）
colorDepth	返回目标设备或缓冲器上的调色板的比特深度
height	返回屏幕的总高度
pixelDepth	返回屏幕的颜色分辨率（每象素的位数）
width	返回屏幕的总宽度

history对象

History 对象属性

属性	说明
length	返回历史列表中的网址数

History 对象方法

方法	说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

小结

• 要引用其他window对象，可以使用几个不同的窗口指针
• 通过location对象可以以编程方式操纵浏览器的导航系统。
• 使用replace()方法可以替换浏览器历史记录中当前显示的页面，并导航到新URL
• navigator对象提供关于浏览器的信息，提供的信息类型取决于浏览器。

 文中部分内容来自于Window 对象 | 菜鸟教程