JavaScript高级程序设计 第12章---BOM浏览器对象模型

第12章 BOM

本章内容：

• 理解BOM的核心——window 对象
• 控制窗口及弹窗
• 通过location 对象获取页面信息
• 使用navigator 对象了解浏览器
• 通过history 对象操作浏览器历史

BOM是使用JavaScript 开发Web 应用程序的核心，提供了与网页无关的浏览器功能对象。

12.1 window对象

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

12.1.1 Global

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

var age = 29;
var sayAge = () => alert(this.age);

alert(window.age); // 29
sayAge(); // 29
window.sayAge(); // 29

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

let age = 29;
const sayAge = () => alert(this.age);

alert(window.age); // undefined
sayAge(); // undefined
window.sayAge(); // TypeError: window.sayAge is not a function

访问未声明的变量会抛出错误，但是通过属性查询在window对象上查询就不会抛出错误，会返回undefined

// 这会导致抛出错误，因为oldValue 没有声明
var newValue = oldValue;

// 这不会抛出错误，因为这里是属性查询
// newValue 会被设置为undefined
var newValue = window.oldValue;

12.1.2 窗口关系

top 对象始终指向最上层（最外层）窗口，即浏览器窗口本身。而parent 对象则始终指向当前窗口的父窗口。如果当前窗口是最上层窗口，则parent 等于top（都等于window）。
还有一个self 对象，它是终极window 属性，始终会指向window。实际上，self 和window 就是同一个对象。之所以还要暴露self，就是为了和top、parent 保持一致。
这些属性都是window 对象的属性，因此访问window.parent、window.top 和window.self都可以。这意味着可以把访问多个窗口的window 对象串联起来，比如window.parent.parent。

12.1.3 窗口位置与像素比

window 对象的位置可以通过不同的属性和方法来确定。现代浏览器提供了screenLeft 和screenTop 属性，用于表示窗口相对于屏幕左侧和顶部的位置 ，返回值的单位是CSS 像素。
可以使用moveTo()和moveBy()方法移动窗口。这两个方法都接收两个参数，其中moveTo()接收要移动到的新位置的绝对坐标x 和y；而moveBy()则接收相对当前位置在两个方向上移动的像素数。比如：

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

// 把窗口向下移动100 像素
window.moveBy(0, 100);

操作示例：https://www.runoob.com/try/try.php?filename=try_win_moveby

像素比
CSS 像素是Web 开发中使用的统一像素单位。这样定义像素大小是为了在不同设备上统一标准。比如，低分辨率平板设备上12 像素（CSS 像素）的文字应该与高清4K 屏幕下12 像素（CSS 像素）的文字具有相同大小

即不同设备物理像素大小不一致，为了让它们在相同大小的CSS像素效果下显示一致，物理像素与CSS 像素之间的转换比率由window.devicePixelRatio 属性提供。不同设备有不同的这个属性值来确保显示效果的一致性。（即CSS像素和显示大小保持一致，但物理像素的数量由设备的比例属性来决定）

window.devicePixelRatio 实际上与每英寸像素数（DPI，dots per inch）是对应的。DPI 表示单位像素密度，而window.devicePixelRatio 表示物理像素与逻辑像素之间的缩放系数。

12.1.4 窗口大小

所有现代浏览器都支持4 个属性：
innerWidth、innerHeight、outerWidth 和outerHeight。outerWidth 和outerHeight 返回浏览器窗口自身的大小（不管是在最外层window 上使用，还是在窗格中使用）。innerWidth和innerHeight 返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）。

document.documentElement.clientWidth 和document.documentElement.clientHeight返回页面视口的宽度和高度（和innerWidth，innerHeight一样）。

例如下面这个页面

页面视口大小和浏览器窗口大小就不一致:

innerWidth
1174
outerWidth
1434

可以使用resizeTo()和resizeBy()方法调整窗口大小（直接在f12处输入无反应）。这两个方法都接收两个参数，resizeTo()接收新的宽度和高度值，而resizeBy()接收宽度和高度各要缩放多少。下面看个例子：

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

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

12.1.5 视口位置

浏览器窗口尺寸通常无法满足完整显示整个页面，为此用户可以通过滚动在有限的视口中查看文档。度量文档相对于视口滚动距离的属性有两对，返回相等的值：window.pageXoffset/window.scrollX 和window.pageYoffset/window.scrollY。

可以使用scroll()、scrollTo()和scrollBy()方法滚动页面。这3 个方法都接收表示相对视口距离的x 和y 坐标，这两个参数在前两个方法中表示要滚动到的坐标，在最后一个方法中表示滚动的距离。

// 相对于当前视口向下滚动100 像素
window.scrollBy(0, 100);
// 相对于当前视口向右滚动40 像素
window.scrollBy(40, 0);
// 滚动到页面左上角
window.scrollTo(0, 0);
// 滚动到距离屏幕左边及顶边各100 像素的位置
window.scrollTo(100, 100);

这个可以正常使用

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

// 正常滚动 即快速跳转
window.scrollTo({
   
	left: 100,
	top: 100,
	behavior: 'auto'
});

// 平滑滚动 即慢慢滚动
window.scrollTo({
   
	left: 100,
	top: 100,
	behavior: