Javascript高级编程学习笔记（27）—— BOM（1）window对象1

时间：2021-11-20 11:28:34

ECMAScript是JS的核心

但是对于在浏览器中运行的JS，BOM显然才是真正的核心

我们知道JS是由三个部分组成的 BOM、DOM、ECMAScript

之前的文章我们主要介绍的是ECMAScript

也就是JS的核心语法

但是JS作为一种脚本语言，其创建的初衷不就是为了控制浏览器中的页面的表现形势嘛

所以JS与浏览器的交互由什么控制呢？

当然就是我们的BOM了（浏览器对象模型）

BOM提供了一系列的对象用于访问浏览器的功能，由于各个厂商会按照各自的想法去拓展它

所以只有其中的一部分被标准化，并被纳入HTML5规范

下面我们就来聊聊标准化的这些内容

Window对象

Bom对象的核心是window，在浏览器环境中这个对象除了是JS访问浏览器功能的接口对象外

还是JS的Global对象，parseInt等全局方法在浏览器环境中也就属于window对象

由于window对象也是浏览器环境中的全局对象

所以全局变量和全局方法最终都会是 window 对象的属性和方法

不过要注意的地方在于，为window对象定义属性，和声明全局变量是有区别的

看以下代码

var a = 10;

window.b = 10;

虽然变量 a 可以通过window.a 进行访问

但是我们不能通过 delete 操作符来删除 window.a

却可以删除 window.b

这是因为虽然全局变量会作为 window对象的属性，但是这个属性有个特点

那就是这个属性的特性 [[Configurable]] 是false，所以我们不能通过delete来删除它

这也是浏览器环境中所有全局变量，储存在window对象上的特点

窗口关系及框架

如果你的浏览器中包含框架（另外的窗口），那么每个窗口都有自己的window对象

每个window对象都有frames属性，该属性的值为一个数组

window.frames 数组中我们可以访问所有的window对象

这些框架的索引从0开始，从左到右，从上到下增加

每个 window 都有一个name属性，也就是当前框架的名称

也可以在 frames 数组中通过window的name进行索引

为了避免层级关系的混淆，Bom还有 top、parent对象

top指向当前的框架最顶层，也就是浏览器窗口

而 parent 指向当前窗口的父级框架

有时候 top会等于parent

但在不包含框架的页面中 top 一定等于 parent

除此而外还有个 self 用于标识当前window，但是只是为了与top、parent对应，并没有什么特殊的功能

PS. 由于框架之间的window 对象是独立的，所以都拥有独立的构造函数，所以 a窗口的Array类型不等于b窗口的Array类型

窗口位置

除火狐而外的浏览器都通过 screenLeft、screenTop来提供当前窗口相对于屏幕的坐标

火狐使用 screenX、screenY来提供相应属性

跨浏览器兼容如下

var left = (typeof window.screenLeft ==="number")?window.screenLeft:window.screenX;

var top = (typeof window.screenTop ==="number")?window.screenTop:window.screenY;

moveTo(x,y) 将窗口移动到屏幕的指定位置

moveBy(x,y)窗口水平移动x，垂直移动y

要注意的是上述方法虽然可以移动浏览器窗口，但绝大多数情况下都会被浏览器禁用

窗口大小

由于获取浏览器窗口的大小，各个浏览器实现、行为各异

所以就不多说

主要说明一下获取可视区域的大小

var pageWidth = window.innerWidth;

var pageHeight = window.innerHeight;

if(typeof pageWidth !=="number"){

    if(document.compatMode ==="CSS1Compat"){

        pageWidth = document.documentElement.clientWidth;

        pageHeight = document.documentElement.clientHeight;

    }else{

        pageWidth = document.body.clientWidht;

        pageHeight = document.body.clinetHeight;

    }

}

这里也有两个方法控制窗口大小

resizeTo()

resizeBy()

使用和上面的move类似to是移动到某个坐标，by是朝垂直和水平分别移动多少

当然，这两个方法也很有可能被浏览器禁用

今天就先介绍这么多，明天继续~~~

相关文章