BOM之window对象

全文思维导图如下：

目录

一  Global对象

二 窗口关系

三 窗口位置与像素比

四 窗口大小

五 视口位置

---

一  Global对象

全局作用域：

• 通过var声明的所有全局变量和函数都会变成window对象的属性和方法，可以通过window.xx来进行访问，使用let或者const则不会

// var声明场景：
var age = 29;
var sayAge = ()=> alert(this.age);

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


// let const声明场景：
let age = 29;
const sayAge = ()=>alert(this.age);

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

• 可以在window对象上查询是否存在可能未声明的变量，直接访问会抛出错误

//场景一：直接访问
var newValue = oldValue;
//访问结果：ReferenceError: oldValue is not defined
//原因：oldValue没有声明


场景二：通过window属性查询
var newValue = window.oldValue;
//访问结果：undefined
//原因：oldValue属于window对象的属性，被设置为undefined

二 窗口关系

top:  指向最上层(最外层）窗口，即浏览器窗口本身

parent：指向当前窗口的父窗口

self:  终极window属性，始终指向window

三 窗口位置与像素比

属性：

srceenLeft\screenTop：用于表示窗口相对于屏幕左侧和顶部的位置，返回值的单位是CSS像素

方法：

-移动窗口

moveTo():接收要移动到的新位置的绝对坐标x和y

moveBy():接收相对当前位置在两个方向上移动的像素数

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

//把窗口移动到坐标位置（200， 300）
window.moveTo(200, 300);

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

//把窗口向左移动50像素
window.moveBy(-50, 0);

像素比：

CSS像素：

• 定义：Web开发中使用的统一像素单位
• 关系：不同像素密集度的屏幕下就会有不同的缩放系数，以便把物理像素（屏幕实际的分辨率）转换为CSS像素（浏览器报告的虚伪分辨率）
• 单位：DPI表示单位像素密度
• window.devicePixelRatio: 表示物理像素与逻辑像素之间的缩放系数，提供物理分辨率（物理像素）与CSS像素之间的转换比率

    eg.手机屏幕的物理分辨率为1920 * 1080，浏览器需要的逻辑分辨率为640*320，                  window.devicePixelRatio为3

四 窗口大小

属性：

• outerWidth / outerHeight:：

     返回浏览器窗口自身的大小（不管是在最外层 window 上使用，还是在窗格中使用）

• innerWidth / innerHeight：

     返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）

• document.documentElement.clientWidth / document.documentElement.clientHeight ：

       返回页面视口的宽度和高度

程序实现：确定页面视口的大小

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

//检查 pageWidth 是不是一个数值
if (typeof pageWidth != "number") { 
    //通过 document.compatMode来检查页面是否处于标准模式
    //https://developer.mozilla.org/zh-CN/docs/Web/API/Document/compatMode
  if (document.compatMode == "CSS1Compat"){ 
     pageWidth = document.documentElement.clientWidth; 
     pageHeight = document.documentElement.clientHeight; 
  } else { 
     pageWidth = document.body.clientWidth; 
     pageHeight = document.body.clientHeight; 
  } 
} 

特殊场景：

• 移动设备：

       视口大小/屏幕上页面可视区域的大小： window.innerWidth + window.innerHeight

• 移动浏览器：

       布局视口/渲染页面的实际大小：document.documentElement.clientWidth + document.documentElement.clientHeight

布局视口是相对于可见视口的概念，可见视口只能显示整个页面的一小部分

• 桌面浏览器

以上，document.documentElement. clientWidth 和 document.documentElement.clientHeight 中提供了相同的信息，在放大或缩小 页面时，这些值也会相应变化

方法：

• resizeTo() / resizeBy()：调整窗口大小（接收两个参数）
  • resizeTo() 接收新的宽度和高度值
  • resizeBy()接收宽度和高度各要缩放多少

//缩放为100*100
window.resizeTo(100, 100);

//添加缩放到100*150
window.resizeBy(100, 50);

//重新设置缩放为300 * 300
window.resizeTo(300, 300);

五 视口位置

视口滚动距离

属性

• window.pageXoffset/window. scrollX
• window.pageYoffset/window.scrollY

滚动页面方法：

接收表示相对视口距 离的 x 和 y 坐标

• scroll()        参数： 表示要滚动到的坐标
• scrollTo()    参数： 表示要滚动到的坐标
• scrollBy()    参数： 表示滚动的距离

//相对于当前视口向下滚动100像素
window.scrollBy(0, 100);

//相当于当前视口向右滚动40像素
window.scrollBy(40,0);

//滚动到页面左上角
window.scrollTo(0, 0);

//滚动到距离屏幕左边及顶边各100像素的位置
window.scrollTo(100, 100);

• 通过behavior属性设置浏览器是否平滑滚动

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


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