第十二章 BOM
12.1 window 对象
- BOM 的核心,表示浏览器的实例
- 有两重身份:
- Global 对象
- 浏览器窗口的 JavaScript 接口
12.1.1 Global 作用域
- 所有通过 var 声明的全局变量和函数都会成为
window
对象的属性和方法
12.1.2 窗口关系
top
对象:指向最外层窗口,即浏览器窗口本身parent
对象:指向当前窗口的父窗口,最外层窗口的 paent 等于 topself
对象:指向 window
12.1.3 窗口位置与像素比
screenLeft
和 screenTop
:窗口相对于屏幕的位置,返回值单位是 css 像素- 可以使用
moveTo()
和 moveBy()
移动窗口 - 浏览器可能会禁用这些方法
window.moveTo(0, 0);
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 导航与打开新窗口
1. 弹出窗口
opener
属性:指向打开它的窗口
- 窗口不会跟踪记录自己打开的新窗口
- 设置为 null, 表示该窗口不需要与打开它的窗口通信,可以在独立进程中运行
2. 安全限制
3. 弹窗屏蔽程序
12.1.7 定时器
setTimeout()
setInterval()
12.1.8 系统对话框
alert()
confirm()
prompt()
:提示用户输入信息,用户取消会返回 null
12.2 location 对象
- 提供当前窗口中加载文档的信息,以及导航功能
window.location === document.location
- url 信息:p372(第四版)
12.2.1 查询字符串
12.2.2 操作地址
location.assign()
:立刻启动导航到新 URL,同时在浏览器历史记录中增加一条记录
- 也可以通过设置
window.location
或 location.href
跳转
replace()
:不会增加历史记录reload()
:重新加载当前页面。可能会从缓存中加载,传入 true 从服务器加载
12.3 navigator 对象
12.3.1 检测插件
12.3.2 注册处理程序
12.4 screen 对象
12.5 history 对象
12.5.1 导航
12.5.2 历史状态管理