12 BOM

Window 对象

全局作用域

var 赋值会自动绑定在 window 对象。
const 和 let 不会

层级关系

如果窗口在 <iframe> <object> <frame> 中，则会产生层级关系（TODO：<object> 和 <frame> 需要研究一下）
top 对象。指向最外层 window
parent 对象。指向最临近父 window
最外层的 top 和 parent 相等，都指向 window
self 永远指向 window，这个 API 存在就是为了和 top parent 保持一致性

window 位置和 Pixel Ratio

位置

window.screenLeft
window.screenTop
window.moveTo(), window.moveBy() 移动窗口，有些浏览器会禁用

Pixel Ratio

window.devicePixelRatio
和显示器分辨率有关，代表 1px 在显示器上实际大小为多小像素

window 大小

innerWidth, innerHeight, outerWidth, and outerHeight
document.documentElement.clientWidth, document.documentElement.clientHeight

扩展：`document.compatMode`

BackCompat, 文档使用 quirks mode （怪异模式？）渲染。一些上古的不标准的浏览器
CSS1Compat，文档使用标准模式渲染
使用 <!DOCTYPE html> 让浏览器使用标准模式
XHTML 默认都是用标准模式，无需声明
参考：怪异模式的 Bug：https://developer.mozilla.org/en-US/docs/Mozilla/Mozilla_quirks_mode_behavior
对比
- document.documentElement.clientHeight/clientWidth
- document.body.clientHeight/clientWidth
调整窗口大小 window.resizeTo() 一般会被浏览器禁用

Viewport 视窗位置

Viewport 指的是浏览器文档内容可见的区域

便宜位置：以下属性作用用一样
- window.pageXOffset / window.pageYOffset
- window.scrollX / window.scrollY

滚动窗口

window.scroll() window.scrollBy() 一样，滚动相对距离
window.scrollTo()，传入绝对距离
可以传入一个对象

// normal scroll
window.scrollTo({
  left: 100,
  top: 100, behavior: 'auto'
});
// smooth scroll
window.scrollTo({
  left: 100,
  top: 100, behavior: 'smooth'
});

浏览器导航、打开新窗口

window.open() 文档具体 https://developer.mozilla.org/en-US/docs/Web/API/Window/open

弹窗被拦截

window.open() 返回值为空或抛出异常

系统弹窗

alert() 这些，是同步执行的，会阻塞线程

Location 对象

window.location 和 document.location 指向一个对象

Query 参数

使用 URLSearchParams 工具

操作 Location

location.assign() 同 window.location = 和 location.href =
可以设置其他的 location.hash =, location.search = 等等
上述方法都会增加 history 记录
location.replace()
location.reload() 参数传入 true 强制刷新

Navigator 对象

了解一下 navigator.registerProtocolHandler()

Screen 对象

略

History 对象（重要）

改变页面状态而不刷新页面

hashchange 事件
HTML5 的 history 对象
pushState()
replaceState()
popstate 事件
- 按下返回按钮时会触发
- event.state 为 pushState() 传入的 state 对象
history.state 获取当前 state
state 对象只能传入可以被序列化的对象。DOM 这类不可序列化的对象不可传入

tt-up / fed-in-depth

【红宝书第4版读书笔记】12-BOM #22

12 BOM

Window 对象

全局作用域

层级关系

window 位置和 Pixel Ratio

位置

Pixel Ratio

window 大小

扩展：`document.compatMode`

Viewport 视窗位置

浏览器导航、打开新窗口

弹窗被拦截

系统弹窗

Location 对象

Query 参数

操作 Location

Navigator 对象

Screen 对象

History 对象（重要）

tt-up / fed-in-depth

【红宝书第4版读书笔记】12-BOM #22

12 BOM

Window 对象

全局作用域

层级关系

window 位置和 Pixel Ratio

位置

Pixel Ratio

window 大小

扩展：document.compatMode

Viewport 视窗位置

浏览器导航、打开新窗口

弹窗被拦截

系统弹窗

Location 对象

Query 参数

操作 Location

Navigator 对象

Screen 对象

History 对象（重要）

扩展：`document.compatMode`