BOM的核心是window对象，表示浏览器的实例。window对象在浏览器中有两重身份，一个是ECMAScript中的Global对象，另一个就是浏览器窗口的JavaScript接口。这意味着网页中定义的所有对象、变量和函数都以window作为其Global对象，都可以访问其上定义的parseInt()等全局方法。

  1. var age = 29; 
  2. var sayAge = () => alert(this.age);
  4. alert(window.age); // 29
  5. sayAge(); // 29
  6. window.sayAge();  // 29

如果使用let或const替代var，则不会把变量添加给全局对象。

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

  1. // 这会导致抛出错误，因为 oldValue 没有声明 
  2. var newValue = oldValue; 
  4. // 这不会抛出错误，因为这里是属性查询 
  5. // newValue 会被设置为 undefined 
  6. var newValue = window.oldValue;

JavaScript中有很多对象都暴露在全局作用域中，比如location和navigator，因而它们也是window对象的属性。

浏览器窗口打开/关闭

:::info window.open()用来打开一个指定url的窗口。
参数1：要打开的url
参数2：窗口的name
参数3：窗口属性（详见点击）
参数4：新窗口在浏览器历史记录中是否替代当前加载页面的布尔值

📌 **window.open()**方法返回一个对新建窗口的引用。这个对象与普通**window**对象没有区别，只是为控制新窗口提供了方便。 :::

  1. widnow.open('url', 'page2', 'width=500,height=500', false);
  3. // 窗口的 nage 也可以是个特殊的 name
  4. // 可选值有 _self、_parent、_top、_blank
  5. window.open('url', '_blank', 'width=500,height=500', false);
  7. var win = widnow.open("https://baidu.com", "width=500,height=500");
  8. console.log(win);

:::info window.close()用来关闭window.open()打开的窗口。 :::

window对象还有name、opener和closed属性可以获取window窗口的信息。

  1. // 获取 window.name
  2. var win = window.open('url', 'test', 'width=500,height=500', false);
  3. console.log(win.name)
  5. // window.opener 指向打开新窗口的窗口
  6. window.name = "page1";
  7. var win = window.open("","page2");
  8. console.log(win.opener.name, win.name); // page1 page2
  10. // closed 表示新窗口是否关闭
  11. var win = window.open("","page2");
  12. if(win.closed){
  13.   // do...
  14. }

窗口的位置

window.moveTo(坐标x, 坐标y) window.moveBy(向下移动的像素, 向右移动的像素)

  1. var win = widnow.open("https://baidu.com", "width=500,height=500");
  2. win.moveTo(200, 200); 
  3. win.moveBy(10, 10);

窗口的大小

window.innerHeight/window.innerWidth返回浏览器窗口可视窗口的高/宽度（不包含浏览器边框和工具栏） window.outerHeight/window.outerWidth回浏览器窗口可视窗口的高/宽度（包含浏览器边框和工具栏） 相关文章：滚动距离、视口尺寸、偏移尺寸

  1. console.log(window.innerHeight);
  2. console.log(window.innerWidth);
  4. window.log(window.outerHeight);
  5. window.log(window.outerWidth);

resizeTo(宽度值, 高度值) resizeBy(宽度像素, 高度像素)

  1. var win = widnow.open("https://baidu.com", "width=500,height=500");
  2. win.resizeTo(200, 200); 
  3. win.resizeBy(10, 10);

窗口的关系

window.top获取最上层窗口 window.parent获取当前窗口的父窗口 window.self获取当前窗口（之所以还要暴露 self，就是为了和 top、parent 保持一致）

举个例子 🌰：
image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <h2>这是Page1</h2>
  11.     <iframe src="./page2.html"></iframe>
  12.   </body>
  13. </html>
  14. <script>
  15.     window.name = "page1";
  17.     console.log(window.top.name); // page1
  18.     console.log(window.parent.name); // page1
  19.     console.log(window.self.name); // page1
  20.   </script>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <h2>这是Page2</h2>
  11.     <iframe src="./page3.html"></iframe>
  12.   </body>
  13. </html>
  14. <script>
  15.   window.name = "page2";
  17.   console.log(window.top.name); // page1
  18.   console.log(window.parent.name); // page1
  19.   console.log(window.self.name); // page2
  20. </script>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <h2>这是Page3</h2>
  11.   </body>
  12. </html>
  13. <script>
  14.   window.name = "page3";
  16.   console.log(window.top.name); // page1
  17.   console.log(window.parent.name); // page2
  18.   console.log(window.self.name); // page3
  19. </script>

窗口获取滚动距离和操作滚动距离

:::success window.pageXoffset返回浏览器X轴滚动的距离
window.pageYoffset返回浏览器Y轴滚动的距离 :::

  1. console.log(window.pageXoffset);
  2. console.log(window.pageYoffset);

:::success window.scroll(滚动X坐标, 滚动Y坐标)
window.scrollTo(滚动X坐标, 滚动Y坐标)
window.scrollBy(滚动X像素, 滚动Y像素) :::

  1. // 滚动到页面左上角 
  2. window.scrollTo(0, 0);
  4. // 当前视口向下滚动 100 像素 
  5. window.scrollBy(0, 100);

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

  1. // 正常滚动 
  2. window.scrollTo({
  3.   left: 100,
  4.   top: 100,
  5.   behavior: 'auto' 
  6. });
  8. // 平滑滚动 
  9. window.scrollBy({
  10.   left: 100,
  11.   top: 100,
  12.   behavior: 'smooth' 
  13. });

系统对话框

:::warning window.alert("提示的内容")
该方法在使用的时候可以不带window
页面上显示一个提示框，会阻塞程序的执行 :::

  1. window.alert("输入错误！");
  2. alert("输入错误！");

:::warning window.confirm("提示的内容")
该方法在使用的时候可以不带window
页面上显示一个确认框，返回一个布尔值，会阻塞程序的执行 :::

  1. let res = window.confirm("确认删除？");
  2. let res = confirm("确认删除？");
  3. if(res){
  4.   // del...
  5. }

:::warning window.prompt("提示的内容")
该方法在使用的时候可以不带window
页面上显示一个输入框，返回输入的字符串，会阻塞程序的执行 :::

  1. let res = window.prompt("请输入姓名");
  2. let res = prompt("请输入姓名");
  4. console.log(res);

:::warning window.print()
该方法在使用的时候可以不带window
将页面进行打印 :::

  1. window.print();
  2. print()

定时器

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

setTimeout()

表示一定时间后做某事（延迟器） 返回一个延时的ID 参数1：要执行的回调函数 参数2：要延迟的时间（毫秒）

  1. // 在 1 秒后显示警告框 
  2. setTimeout(() => alert("Hello world!"), 1000);
  4. setTimeout(function(){
  5.  // do...
  6. }, 2000);

JavaScript 是单线程的，所以每次只能执行一段代码。为了调度不同代码的执行，JavaScript 维护了一个任务队列。其中的任务会按照添加到队列的先后顺序执行。setTimeout() 的第二个参数只是告诉 JavaScript 引擎在指定的毫秒数过后把任务添加到这个队列。如果队列是空的，则会立即执行该代码。如果队列不是空的，则代码必须等待前面的任务执行完才能执行。

clearTimeout()

用于取消销毁setTimeout()延时器 参数1：setTimeout()返回的ID

  1. // 设置超时任务 
  2. let timeoutId = setTimeout(() => alert("Hello world!"), 1000);
  4. // 取消延时器
  5. clearTimeout(timeoutId);

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

setInterval()

表示每隔一定时间后做某事，直到定时器被取消销毁（定时器） 返回一个定时器的ID 参数1：要执行的回调函数 参数2：要定时等待的时间（毫秒）

  1. setInterval(() => alert("Hello world!"), 10000);

注意 ⚠️ 这里的关键点是，第二个参数，也就是间隔时间，指的是向队列添加新任务之前等待的时间。比如，调用 setInterval() 的时间为 01:00:00，间隔时间为 3000 毫秒。这意味着 01:00:03 时，浏览器会把任务添加到执行队列。浏览器不关心这个任务什么时候执行或者执行要花多长时间。因此，到了 01:00:06，它会再向队列中添加一个任务。由此可看出，执行时间短、非阻塞的回调函数比较适合 setInterval()。

clearInterval()

用于取消销毁setInterval()定时器 参数1：setInterval()返回的ID

  1. // 设置延迟执行任务 
  2. let timeoutId = setInterval(() => alert("Hello world!"), 1000);
  4. // 取消超时任务 
  5. clearInterval(timeoutId);

相对于**setTimeout()**而言，取消定时的能力对**setInterval( )**更加重要。毕竟，如果一直不管它，那么定时任务会一直执行到页面卸载。