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是朝垂直和水平分别移动多少
当然，这两个方法也很有可能被浏览器禁用
今天就先介绍这么多，明天继续~~~