JavaScript–BOM

一、BOM的概述

虽然 ECMAScript 把浏览器对象模型（BOM，Browser Object Model）描述为 JavaScript 的核心，但实际上 BOM 是使用 JavaScript 开发 Web 应用程序的核心。BOM 提供了与网页无关的浏览器功能对象。

二、BOM的结构

三、window

1、window概述

BOM 的核心是 window 对象。window 对象在浏览器中有两重身份，一个是ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。

因为 window 对象被复用为 ECMAScript 的 Global 对象，所以通过 var 声明的所有全局变量和函数都会变成 window 对象的属性和方法。

var age = 29; 
var functon sayAge(){
      alert(this.age); 
} 
alert(window.age); // 29
sayAge(); // 29 
window.sayAge(); // 29

2、打印方法

// window //对象 
console.log(window); //window 对象 Window的构造函数 
//常用的弹窗方法及打印方法 
window.console.log('hello') //console.log() window可以省略的 console.log('日志') //控制台 log日志 以日志的形式打印 
console.error('错误') //以错误的形式打印 
console.warn('警告') //以错误的形式打印 
console.debug('测试') //以错误的形式打印 
console.info('信息提示') //以错误的形式打印

3、系统对话框方法

3.1 alert()方法–警告框

1）alert()方法它接收一个要显示给用户的字符串。与 console.log 可以接收任意数量的参数且能一次性打印这些参数不同，alert()只接收一个参数。
2）调用 alert()时，传入的字符串会显示在一个系统对话框中。对话框只有一个“OK”（确定）按钮。
3）如果传给 alert()的参数不是一个原始字符串，则会调用这个值的 toString()方法将其转换为字符串。

3.2 confirm()方法–确认框

1）确认框跟警告框类似，都会向用户显示消息。但不同之处在于，确认框有两个按钮：“Cancel”（取消）和“OK”（确定）。
2）用户通过单击不同的按钮表明希望接下来执行什么操作。
3）要知道用户单击了 OK 按钮还是 Cancel 按钮，可以判断 confirm()方法的返回值：true 表示单击了 OK 按钮，false 表示单击了 Cancel 按钮或者通过单击某一角上的 X 图标关闭了确认框。

if (confirm("Are you sure?")) { 
 alert("I'm so glad you're sure!"); 
} else { 
 alert("I'm sorry to hear you're not sure."); 
}

3.3 prompt()方法–提示框

1）提示框的用途是提示用户输入消息。除了 OK 和 Cancel 按钮，提示框还会显示一个文本框，让用户输入内容。
2）prompt()方法接收两个参数：要显示给用户的文本，以及文本框的默认值（可以是空字符串）。
3）如果用户单击了 OK 按钮，则 prompt()会返回文本框中的值。如果用户单击了 Cancel 按钮，或者对话框被关闭，则 prompt()会返回 null。

let result = prompt("What is your name? ", ""); 
if (result !== null) { 
 alert("Welcome, " + result); 
}

// 第一个参数是url地址 第二个参数为title target(打开方式 _blank _self _parent) 第三个参 数为设置的参数（窗口的高度 宽度等等） 
window.open('http://www.baidu.com','_blank','width=300,height=100,top=0,left=0') 
// height=100 窗⼝⾼度； 
// width=400 窗⼝宽度； 
// top=0 窗⼝距离屏幕上⽅的象素值； 
// left=0 窗⼝距离屏幕左侧的象素值； 
// toolbar=no 是否显⽰⼯具栏，yes为显⽰； 
// menubar，scrollbars 表⽰菜单栏和滚动栏。 
// resizable=no 是否允许改变窗⼝⼤⼩，yes为允许； 
// location=no 是否显⽰地址栏，yes为允许； 
// status=no 是否显⽰状态栏内的信息（通常是⽂件已经打开），yes为允许；

4、打开、关闭方法

4.1 open()

1）window.open()方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口。
2）这个方法接收 4个参数：要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。
3）通常，调用这个方法时只传前 3 个参数，最后一个参数只有在不打开新窗口时才会使用。

4.2 close()方法

这个方法只能用于 window.open()创建的弹出窗口。虽然不可能不经用户确认就关闭主窗口，但弹出窗口可以调用top.close()来关闭自己。关闭窗口以后，窗口的引用虽然还在，但只能用于检查其 closed 属性了。
window.close() //关闭当前的窗口 （关闭浏览器只能有一个页面）

5、改变滚动栏位置方法

5.1 scrollTo(）

// 滚动到距离屏幕左边及顶边各 100 像素的位置
window.scrollTo(100, 100);
// 滚动到页面左上角
window.scrollTo(0, 0);

5.2 scrollBy(）

// 相对于当前视口向下滚动 100 像素
window.scrollBy(0, 100); 
// 相对于当前视口向右滚动 40 像素
window.scrollBy(40, 0);

拓展

这几个方法也都接收一个 ScrollToOptions 字典，除了提供偏移值，还可以通过 behavior 属性告诉浏览器是否平滑滚动。

// 正常滚动 
window.scrollTo({ 
 left: 100, 
 top: 100, 
 behavior: 'auto' 
}); 
// 平滑滚动
window.scrollTo({ 
 left: 100, 
 top: 100, 
 behavior: 'smooth' 
});

6、调整窗口大小

resizeTo()和resizeBy()方法

这两个方法都接收两个参数，resizeTo()接收新的宽度和高度值，而 resizeBy()接收宽度和高度各要缩放多少。

// 缩放到 100×100 
window.resizeTo(100, 100); 
// 缩放到 200×150 
window.resizeBy(100, 50); 
// 缩放到 300×300 
window.resizeTo(300, 300);

注意：缩放窗口的方法可能会被浏览器禁用，而且在某些浏览器中默认是禁用的。同样，缩放窗口的方法只能应用到最上层的 window 对象。

7、打印方法

// 显示打印对话框
window.print();

8、查找方法

// 显示查找对话框
window.find();

9、改变位置方法

moveTo()和 moveBy()方法

这两个方法都接收两个参数，其中 moveTo()接收要移动到的新位置的绝对坐标 x 和 y；而 moveBy()则接收相对当前位置在两个方向上移动的像素数。

// 把窗口移动到左上角
window.moveTo(0,0); 
// 把窗口向下移动 100 像素
window.moveBy(0, 100);
// 把窗口移动到坐标位置(200, 300) 
window.moveTo(200, 300); 
// 把窗口向左移动 50 像素
window.moveBy(-50, 0);

10、聚焦和失焦方法

//focus 聚焦 blur 失去焦点 
window.focus() 
window.blur()

11、相关属性

1）所有现代浏览器都支持 4 个属性：innerWidth、innerHeight、outerWidth 和 outerHeight。
2）outerWidth 和 outerHeight 返回浏览器窗口自身的大小（不管是在最外层 window 上使用，还是在窗格中使用）。
3）innerWidth和 innerHeight 返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）
4）在移动设备上，window.innerWidth 和 window.innerHeight 返回视口的大小，也就是屏幕上页面可视区域的大小。

12、窗口关系

top 对象始终指向最上层（最外层）窗口，即浏览器窗口本身。而 parent 对象则始终指向当前窗口的父窗口。如果当前窗口是最上层窗口，则 parent 等于 top（都等于 window）。

四、location

1、location的概述

location 是最有用的 BOM 对象之一，提供了当前窗口中加载文档的信息，以及通常的导航功能。

2、location的属性

假设浏览器当前加载的 URL 是http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents，location 对象的内容如下表所示。

3、location的方法

3.1 assign()方法

最常见的是使用 assign()方法并传入一个 URL。
location.assign("http://www.baidu.com");
这行代码会立即启动导航到新 URL 的操作，同时在浏览器历史记录中增加一条记录。当用户单击“后退”按钮时，就会导航到前一个页面。

3.2 replace()方法

如果不希望增加历史记录，可以使用 replace()方法。这个方法接收一个 URL 参数，但重新加载后不会增加历史记录。调用 replace()之后，用户不能回到前一页。
location.replace('http://www.weibo.com')

3.3 reload()方法

1）它能重新加载当前显示的页面。调用 reload()而不传参数，页面会以最有效的方式重新加载。
2）也就是说，如果页面自上次请求以来没有修改过，浏览器可能会从缓存中加载页面。如果想强制从服务器重新加载，可以像下面这样给 reload()传个 true。

location.reload(); // 重新加载，可能是从缓存加载
location.reload(true); // 重新加载，从服务器加载

注意：脚本中位于 reload()调用之后的代码可能执行也可能不执行，这取决于网络延迟和系统资源等因素。为此，最好把 reload()作为最后一行代码。

五、history

1、history的概述

1）history 对象表示当前窗口首次使用以来用户的导航历史记录。因为 history 是 window 的属性，所以每个 window 都有自己的 history 对象。
2）出于安全考虑，这个对象不会暴露用户访问过的 URL，但可以通过它在不知道实际 URL 的情况下前进和后退。

2、history的方法

2.1 go()方法

1）go()方法可以在用户历史记录中沿任何方向导航，可以前进也可以后退。
2）这个方法只接收一个参数，这个参数可以是一个整数，表示前进或后退多少步。负值表示在历史记录中后退（类似点击浏览器的“后退”按钮），而正值表示在历史记录中前进（类似点击浏览器的“前进”按钮）。

// 后退一页
history.go(-1); 
// 前进一页
history.go(1); 
// 前进两页
history.go(2);

2.2 back()方法

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

2.3 forward()方法

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

2.4 pushState()方法

history.pushState方法接受三个参数，依次为：
1）state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填 null。
2）title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
3）url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

let stateObject = {foo:"bar"}; 
history.pushState(stateObject, "My title", "baz.html");

pushState()方法执行后，状态信息就会被推到历史记录中，浏览器地址栏也会改变以反映新的相对 URL。除了这些变化之外，即使 location.href 返回的是地址栏中的内容，浏览器页不会向服务器发送请求。第二个参数并未被当前实现所使用，因此既可以传一个空字符串也可以传一个短标题。第一个参数应该包含正确初始化页面状态所必需的信息。
注意：因为 pushState()会创建新的历史记录，所以也会相应地启用“后退”按钮。
总之，pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应。 如果pushState的url参数，设置了一个新的锚点值（即hash），并不会触发hashchange事件。如果设置了一个跨域网址，则 会报错。

2.5 .replaceState()方法

history.replaceState方法的参数与pushState方法一模一样，区别是它修改浏览历史中当前纪录。

//假定当前网页是 example.com/example.html
history.pushState({page: 1}, 'title 1', '?page=1'); 
history.pushState({page: 2}, 'title 2', '?page=2'); 
history.replaceState({page: 3}, 'title 3', '?page=3'); 
history.back() // url显示为http://example.com/example.html?page=1 
history.back() // url显示为http://example.com/example.html

3、history的属性

3.1 length属性

length 属性，表示历史记录中有多个条目。这个属性反映了历史记录的数量，包括可以前进和后退的页面。对于窗口或标签页中加载的第一个页面，history.length 等于 1。

3.2 state

history.state 属性返回当前页面的state对象。

history.pushState({page: 1}, 'title 1', '?page=1'); 
history.state // { page: 1 }

3.3 scrollRestoration

滚动栏恢复

六、screen

1、screen的概述

这个对象中保存的纯粹是客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息，比如像素宽度和像素高度。

2、screen的属性

七、navigator

userAgent属性

navigator.userAgent属性返回浏览器的User-Agent字符串，标示浏览器的厂商和版本信息。它包含了appVersion中的所有信息。

//下面是Chrome浏览器的userAgent。
navigator.userAgent //Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36