BOM(浏览器对象模型):提供用于访问浏览器的对象。
window是BOM的核心对象,表示浏览器的一个实例。
全局变量会成为window的属性,但是定义全局变量和直接在window对象上定义属性是有差别的——全局变量不能通过delete删除,但window对象上定义的可以。
这是因为使用var添加的window属性[[Configurable]]被设置为false(不可删除)。
访问未声明的变量会发生错误,但通过查询window对象,可以知道某个可能未声明的变量是否存在。
//这里会抛出错误,因为oldValue未定义 var newValue = oldValue; //这里不会抛出错误,因为这是一次属性查询 var newValue = window.oldValue; //newValue的值是undefined
如果页面中包含框架,则每个框架都拥有自己的window对象,并保存在frames集合中。在frames集合中可以通过数值索引/框架名称来访问相应的window对象。每个window对象都有一个name属性,其中包含框架的名称。
PS1:对于最高层窗口来说:除非最高层窗口是通过window.open()打开的,否则其window对象的name属性不会包含任何值。
与框架有关的window对象属性(同时也是对象):
用来确定window对象位置的属性:screenLeft, screenTop / screenX, screenY,分别表示窗口相对于屏幕左边和上边的位置。
两组方法分别支持的浏览器:
screenLeft, screenTop | IE、Safari、Opera、Chrome |
screenX, screenY | Firefox、Safari、Chrome |
跨浏览器取得窗口位置的代码:
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
缺点:
将窗口精确移动到一个新位置的方法:
PS:这两个方法很可能会被浏览器禁用(Opera和IE7+),且不适合框架,只能对最外层window对象使用。
IE9+、Safari、Firefox | Opera | Chrome | |
innerWidth、innerHeight | 视图区大小 | 该容器中页面视图区的大小(减去边框宽度) | 视口大小 |
outerWidth、outerHeight | 浏览器窗口本身的尺寸 | 页面视图容器的大小(单个标签页对应浏览器窗口的大小) | 视口大小 |
document.documentElement.clientWidth / document.documentElement.clientHeight:保存了页面视口的信息。
resizeTo()和resizeBy():调整浏览器窗口的大小。(分别接收新宽度高度和新窗口与原窗口的宽度和高度之差,同样可能被浏览器禁用)
2020/6/10 JavaScript高级程序设计 BOM
原文:https://www.cnblogs.com/hermionepeng/p/13089086.html