ES5-BOM-window

Posted on

window对象

表示浏览器的一个实例
具有双重角色：是通过JS访问浏览器的一个接口；是ES规定的Global对象

全局作用域

所有全局作用域中声明的变量、函数都会变成window的属性和方法

定义全局变量和window属性存在差别，全局变量[[Configurable]]特性是false不能delete删除，作为window属性声明的即为为对象添加属性，其[[Configurable]]默认是true
⚠️IE9+，之前版本这种操作会报错

⚠️访问未声明的变量会报错，但是访问window属性是一次属性查询过程，不存在返回undefined

⚠️location navigator实际都是window属性

窗口关系和框架

每个框架有自己的window对象，保存在frames集合中，通过索引(从上至下从左至右)或框架名访问，最顶层的window默认名字为空，除非window.open()打开的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <frameset rows="160,*">
        <frame src="frame.html" name="topFrame"></frame>
        <frameset cols="50%,50%">
            <frame src="another.html" name="leftFrame"></frame>
            <frame src="yetanother.html" name="rightFrame"></frame>
        </frameset>
    </frameset>
</body>
</html>

⚠️frameset的必填属性二选一：rows-行高度，cols-列宽度，均可以是像素点或百分比

top

由于每个框架有自己的window对象，所以访问frames列表最稳妥的方式是通过top访问
top指向最高层框架，其实它是window的属性，可以通过window.top访问到

⚠️但是测试时top.frames依然是个window对象而不是列表，暂时无解。。。

parent

parent当前框架的直接上层框架，也是window的属性，可以通过window.parent访问到

⚠️没有框架的情况下，top=parent=window

self

始终指向window，也是window的属性，可以通过window.self访问到，为了与top parent对应起来而已不包含其他值

⚠️因为框架的存在，每个框架有自己的window，有自己的构造函数，跨框架传递对象影响instanceof操作符

窗口位置

IE、Safari、Opera、Chrome都提供screenLeft screenTop属性，表示窗口相对于屏幕左边和上边的位置；FireFox使用screenX screenY提供相同的窗口位置信息（Safari和Chrome也支持这两个属性，Opera存在这两个属性但非存储此信息）
跨浏览器取窗口左边和上边的位置：

1
2
3
4
5
var leftPos = (typeof window.screenLeft == 'number') ?
    window.screenLeft : window.screenX;

var topPos = (typeof window.screenTop == 'number') ?
    window.screenTop : window.screenY;

⚠️IE、Opera的screenTop screenLeft保存的是可见区域到屏幕上边/左边的位置，即如果全屏模式下，则screenTop的值是浏览器工具栏的高度，有框架的情况下精确计算出框架相对于屏幕的位置；
但Safari、Chrome、Firefox的是整体浏览器到屏幕上边/左边的位置，即如果全屏模式下，screenTop 或 screenY都是0，且存在框架的情况下始终返回的是top.screenX(top顶框架的位置)

⚠️差异导致不存在跨浏览器取得窗口左边和上边的精准坐标值！！！

移动

moveTo() - 两个参数：新位置的x和y坐标值
moveBy() - 两个参数：水平和垂直方向上移动的像素数

⚠️需要注意的一点是这个坐标轴和正常数学不一样，基于屏幕左上角位置是0,0，向下y轴是正数不是负数
⚠️两个方法都可能会被浏览器禁用，Opera、IE7+默认就是禁用的，我在Safari、Chrome上测试都无效
⚠️两个方法不适用框架，只对最外层window使用

窗口大小

IE9+等所有浏览器都提供了4个属性：
innerWidth innerHeight outerWidth outerHeight

⚠️浏览器差异：
IE9+、Safari、Firebox，outer的返回浏览器本身的尺寸(顶层window对象或框架访问都是)
Opera，outer返回页面视图容器的大小(单个标签页对应的浏览器窗口)，inner是该容器中页面视图区的大小(减去边框宽度)
Chrome，outer和inner返回值一样，都是视口大小非浏览器大小

结论是不能取得浏览器窗口大小但可以取得视口大小