第十二章：BOM

第十二章 BOM

12.1 window 对象

• BOM 的核心，表示浏览器的实例
• 有两重身份：
  • Global 对象
  • 浏览器窗口的 JavaScript 接口

12.1.1 Global 作用域

• 所有通过 var 声明的全局变量和函数都会成为 window对象的属性和方法

12.1.2 窗口关系

• top对象：指向最外层窗口，即浏览器窗口本身
• parent对象：指向当前窗口的父窗口，最外层窗口的 paent 等于 top
• self对象：指向 window

12.1.3 窗口位置与像素比

• screenLeft和 screenTop：窗口相对于屏幕的位置，返回值单位是 css 像素
• 可以使用 moveTo()和 moveBy()移动窗口
• 浏览器可能会禁用这些方法

// 移动到左上角
window.moveTo(0, 0);

// 下移 100px
window.moveBy(0, 100);

像素比

• DPI：单位像素密度
• window.devicePixelRatio(DPR，像素比)：物理像素与逻辑像素之间的缩放系数
  • 物理分辨率 / 系数 = 逻辑分辨率

12.1.4 窗口大小

• window.outerWidth和 window.outerHeight：浏览器窗口自身的大小
• window.innerWidth和 window.innerHeight：视觉视口的大小
• document.(documentElement | body).clientWidth / Height：布局视口的大小
• window.resizeTo()和 window.resizeBy()

12.1.5 视口位置

• window.pageXoffset / scrollX和 window.pageYoffset / scrollY
• window.scroll() / scrollTo() / scrollBy()

12.1.6 导航与打开新窗口

• window.open()

1. 弹出窗口

• opener属性：指向打开它的窗口
  • 窗口不会跟踪记录自己打开的新窗口
  • 设置为 null， 表示该窗口不需要与打开它的窗口通信，可以在独立进程中运行

2. 安全限制

3. 弹窗屏蔽程序

12.1.7 定时器

• setTimeout()
  • clearTimeout()
• setInterval()
  • clearInterval()

12.1.8 系统对话框

• alert()
• confirm()
• prompt()：提示用户输入信息，用户取消会返回 null

12.2 location 对象

• 提供当前窗口中加载文档的信息，以及导航功能
• window.location === document.location
• url 信息：p372（第四版）

12.2.1 查询字符串

• URLSearchParams

12.2.2 操作地址

• location.assign()：立刻启动导航到新 URL，同时在浏览器历史记录中增加一条记录
  • 也可以通过设置 window.location或 location.href跳转
• replace()：不会增加历史记录
• reload()：重新加载当前页面。可能会从缓存中加载，传入 true 从服务器加载

12.3 navigator 对象

• p375（第四版）

12.3.1 检测插件

12.3.2 注册处理程序

12.4 screen 对象

12.5 history 对象

• 表示当前窗口使用以来用户的导航历史记录

12.5.1 导航

• go()：正值前进，负值后退
  • back()
  • forward()

12.5.2 历史状态管理

• p380（第四版）