《JavaScript高级程序设计》- 第十二章：BOM

第十二章：BOM

BOM（Brower Object Model）：浏览器对象模型；

提供了与网页无关的浏览器功能对象

12.1 window对象

BOM的核心是window对象，表示浏览器实例；

window对象有两重身份

• ECMASCript中的Global对象
• 浏览器窗口的JavaScript接口

这就意味着：网页中所有定义的对象、变量和函数都是以window作为其Global对象。

注意：window对象的属性，再不同的浏览器中，差异可能会很大；

12.1.1 Global作用域

由于window被复用为Global的对象，所以var声明的全局变量、函数，都会称为window的属性、方法；

12.1.2 窗口关系

1. top对象：始终指向最上层窗口，即浏览器窗口本身
2. parent对象：指向当前窗口的父窗口
3. self对象：终极window属性，始终指向window

12.1.3 窗口位置与像素比

窗口位置，可以通过如下函数来获取、调节：

• screenLeft：获取浏览器相对于屏幕左侧的位置，返回单位是像素
• screenTop：获取浏览器相对于屏幕顶部的位置，返回单位是像素
• moveTo()：移动到新的（x，y）上，接收两个参数：
  • x：屏幕上的绝对坐标
  • y：屏幕上的绝对坐标
• moveBy()：将窗口偏移（xoffset，yoffset），接收两个参数：
  • xoffset：负数表示左偏移，正数反之
  • yoffset：负数表示上偏移，正数反之

像素比：物理分辨率 ÷ 逻辑分辨率

可以通过window.devicePixeRatio获取像素比

12.1.4 窗口大小

获取浏览器窗口大小

• outerWidth
• outerHeight

获取浏览器窗口中页面视口大小（不包括浏览器边框和工具栏）

• innerWidth
• innerHeight

通过DOM的形式获取布局页面视口的大小

• document.documentElement.clientWidth
• document.documentElement.clientHeight

浏览器窗口自身大小精确尺寸不好缺点，但是可以精确确定视口大小

let pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;

if(typeof pageWidth != 'number' || typeof pageHeight != 'number'){
    
    if( document.compatMode == 'CSS1Compat' ) {
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    }else{
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

由于移动端与桌面浏览器的差异化，所以需要先确定用户是否使用移动设备；

12.1.5 视口位置

可以使用以下三种方法滚动页面:

• scroll()：滚动窗口至文档中的特定位置。
• scrollTo()：将视口移动到（x，y）上，接收两个参数：
  • x：视口上的绝对坐标
  • y：视口上的绝对坐标
• scrollBy()：将视口偏移（xoffset，yoffset），接收两个参数：
  • xoffset：负数表示左偏移，正数反之
  • yoffset：负数表示上偏移，正数反之

与此同时，以上三个方法都可以接收一个字典，即对象；

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

// 平滑滚动
window.scrollTo({
    left:100,
    top:100,
    behavior:'smooth'
})

12.1.6 导航与打开新的窗口

可以使用window.open()方法用于导航至指定URL或者打开新的浏览器窗口。其返回一个窗口的引用；其接收4个参数：

• 加载的URL：